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

2
test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
View File

@@ -25,7 +25,7 @@ describe("StatelessNotificationBadge", () => {
const { container } = render(
<StatelessNotificationBadge symbol="!" count={0} level={NotificationLevel.Unsent} />,
);
expect(container.querySelector(".mx_NotificationBadge_highlighted")).not.toBe(null);
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).not.toBe(null);
});
it("has knock style", () => {

10
test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
View File

@@ -92,26 +92,26 @@ describe("UnreadNotificationBadge", () => {
const { container } = render(getComponent());
expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
act(() => {
room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
});
expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeTruthy();
});
it("renders unread thread notification badge", () => {
const { container } = render(getComponent(THREAD_ID));
expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
act(() => {
room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 1);
});
expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeTruthy();
});
it("hides unread notification badge", () => {
@@ -177,6 +177,6 @@ describe("UnreadNotificationBadge", () => {
const { container } = render(getComponent(THREAD_ID));
expect(container.querySelector(".mx_NotificationBadge_dot")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
});
});