From 30314516572cbb08e492d920a49fe6297c4aaf51 Mon Sep 17 00:00:00 2001 From: Badi Ifaoui Date: Wed, 24 Jan 2024 19:20:29 +0100 Subject: [PATCH] fix: pill room name badge icons --- components.json | 3 +- .../superhero/img/icons/community-room.svg | 8 +- .../superhero/img/icons/tokengated-room.svg | 20 +- src/components/views/elements/Pill.tsx | 194 ++++++++++++++++++ src/components/views/elements/RoomName.tsx | 7 +- 5 files changed, 221 insertions(+), 11 deletions(-) create mode 100644 src/components/views/elements/Pill.tsx diff --git a/components.json b/components.json index 3c34db1d97..d6796bc3c6 100644 --- a/components.json +++ b/components.json @@ -16,5 +16,6 @@ "src/components/views/dialogs/InviteDialog.tsx": "src/components/views/dialogs/InviteDialog.tsx", "src/components/views/right_panel/UserInfo.tsx": "src/components/views/right_panel/UserInfo.tsx", "src/components/structures/HomePage.tsx": "src/components/structures/HomePage.tsx", - "src/components/views/dialogs/spotlight/SpotlightDialog.tsx": "src/components/views/dialogs/spotlight/SpotlightDialog.tsx" + "src/components/views/dialogs/spotlight/SpotlightDialog.tsx": "src/components/views/dialogs/spotlight/SpotlightDialog.tsx", + "src/components/views/elements/Pill.tsx": "src/components/views/elements/Pill.tsx" } diff --git a/res/themes/superhero/img/icons/community-room.svg b/res/themes/superhero/img/icons/community-room.svg index 70e9aeb808..6a7f08679e 100644 --- a/res/themes/superhero/img/icons/community-room.svg +++ b/res/themes/superhero/img/icons/community-room.svg @@ -1,6 +1,8 @@ - - + diff --git a/res/themes/superhero/img/icons/tokengated-room.svg b/res/themes/superhero/img/icons/tokengated-room.svg index 6a7f08679e..61437ce370 100644 --- a/res/themes/superhero/img/icons/tokengated-room.svg +++ b/res/themes/superhero/img/icons/tokengated-room.svg @@ -1,8 +1,16 @@ - - + + + + + + + + + + diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx new file mode 100644 index 0000000000..d020d67328 --- /dev/null +++ b/src/components/views/elements/Pill.tsx @@ -0,0 +1,194 @@ +/* +Copyright 2017 - 2019, 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { ReactElement } from "react"; +import classNames from "classnames"; +import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; +import { Tooltip } from "@vector-im/compound-web"; +import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg"; +import MatrixClientContext from "matrix-react-sdk/src/contexts/MatrixClientContext"; +import { usePermalink } from "matrix-react-sdk/src/hooks/usePermalink"; +import RoomAvatar from "matrix-react-sdk/src/components/views/avatars/RoomAvatar"; +import MemberAvatar from "matrix-react-sdk/src/components/views/avatars/MemberAvatar"; +import { _t } from "matrix-react-sdk/src/languageHandler"; +import { Icon as LinkIcon } from "matrix-react-sdk/res/img/element-icons/room/composer/link.svg"; +import { Icon as UserIcon } from "matrix-react-sdk/res/img/compound/user.svg"; + +import { Icon as TokenGatedRoomIcon } from "../../../../res/themes/superhero/img/icons/tokengated-room.svg"; +import { isVerifiedRoom } from "../../../hooks/useVerifiedRoom"; +import { Icon as CommunityRoomIcon } from "../../../../res/themes/superhero/img/icons/community-room.svg"; +import { getSafeRoomName } from "../../../hooks/useRoomName"; + +export enum PillType { + UserMention = "TYPE_USER_MENTION", + RoomMention = "TYPE_ROOM_MENTION", + AtRoomMention = "TYPE_AT_ROOM_MENTION", // '@room' mention + EventInSameRoom = "TYPE_EVENT_IN_SAME_ROOM", + EventInOtherRoom = "TYPE_EVENT_IN_OTHER_ROOM", +} + +export const pillRoomNotifPos = (text: string | null): number => { + return text?.indexOf("@room") ?? -1; +}; + +export const pillRoomNotifLen = (): number => { + return "@room".length; +}; + +const linkIcon = ; + +const PillRoomAvatar: React.FC<{ + shouldShowPillAvatar: boolean; + room: Room | null; +}> = ({ shouldShowPillAvatar, room }) => { + if (!shouldShowPillAvatar) { + return null; + } + + if (room) { + return