nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add notification dots to thread summary icons (#12146)

Browse Source 
* Add notification dots to thread summary icons

Adopts new IndicatorIcon from compound to have threads icons with
indicator dot (that aren't also buttons). Adds green & red dots on
the threads icon in the thread summary to indicate notifications.
Changes the notification level dots colours in the threads panel to
be green to match.

* Update test for new CSS class

* Update snapshots with new class name

* Another snapshot update for new class name

* Replace more uses of old class name in tests

* More snapshot updates for new class name

* Unsure how this ever worked in chronological mode

* More snapshot updates

* Fix dot colours

* Upgrade to compound-web 3

* Fix computed notification levels

* Add test for notificationLevelToIndicator
This commit is contained in:
David Baker
2024-01-25 16:53:41 +00:00
committed by GitHub
parent f684ad51cd
commit 95430cecbc
19 changed files with 130 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/views/rooms/RoomHeader.tsx
View File

@@ -37,7 +37,6 @@ import { Flex } from "../../utils/Flex";
import { Box } from "../../utils/Box";
import { useRoomCall } from "../../../hooks/room/useRoomCall";
import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
import SdkConfig from "../../../SdkConfig";
import { useFeatureEnabled } from "../../../hooks/useSettings";
@@ -52,20 +51,7 @@ import { Linkify, topicToHtml } from "../../../HtmlUtils";
import PosthogTrackers from "../../../PosthogTrackers";
import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
import { RoomKnocksBar } from "./RoomKnocksBar";
/**
* A helper to transform a notification color to the what the Compound Icon Button
* expects
*/
function notificationLevelToIndicator(color: NotificationLevel): React.ComponentProps<typeof IconButton>["indicator"] {
if (color <= NotificationLevel.None) {
return undefined;
} else if (color <= NotificationLevel.Notification) {
return "default";
} else {
return "highlight";
}
}
import { notificationLevelToIndicator } from "../../../utils/notifications";
export default function RoomHeader({
room,