imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 130 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/components/structures/TimelinePanel-test.tsx
View file

@ -817,7 +817,7 @@ describe("TimelinePanel", () => {
client = MatrixClientPeg.safeGet();
Thread.hasServerSideSupport = FeatureSupport.Stable;
room = new Room("roomId", client, "userId");
room = new Room("roomId", client, "userId", { pendingEventOrdering: PendingEventOrdering.Detached });
allThreads = new EventTimelineSet(
room,
{

4
test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
class="mx_RoomStatusBar_unsentBadge"
>
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char"
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"
@ -81,7 +81,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
class="mx_RoomStatusBar_unsentBadge"
>
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char"
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"

2
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -215,7 +215,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomStatusBar_unsentBadge"
>
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char"
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"

4
test/components/views/rooms/EventTile-test.tsx
View file

@ -163,14 +163,14 @@ describe("EventTile", () => {
});
expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
expect(container.getElementsByClassName("mx_NotificationBadge_highlighted")).toHaveLength(0);
expect(container.getElementsByClassName("mx_NotificationBadge_level_highlight")).toHaveLength(0);
act(() => {
room.setThreadUnreadNotificationCount(mxEvent.getId()!, NotificationCountType.Highlight, 1);
});
expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
expect(container.getElementsByClassName("mx_NotificationBadge_highlighted")).toHaveLength(1);
expect(container.getElementsByClassName("mx_NotificationBadge_level_highlight")).toHaveLength(1);
});
});

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();
});
});

19
test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
View file

@ -3,26 +3,37 @@
exports[`<VideoRoomChatButton /> renders button when room is a video room 1`] = `
<button
aria-label="Chat"
class="_icon-button_ur2sw_17"
class="_icon-button_16nk7_17"
data-state="closed"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div />
<div
class="_indicator-icon_jtb4d_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
`;
exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
<button
aria-label="Chat"
class="_icon-button_ur2sw_17"
class="_icon-button_16nk7_17"
data-indicator="default"
data-state="closed"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div />
<div
class="_indicator-icon_jtb4d_26"
data-indicator="default"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
`;

27
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View file

@ -46,34 +46,49 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<button
aria-disabled="true"
aria-label="There's no one here to call"
class="_icon-button_ur2sw_17"
class="_icon-button_16nk7_17"
data-state="closed"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div />
<div
class="_indicator-icon_jtb4d_26"
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
>
<div />
</div>
</button>
<button
aria-disabled="true"
aria-label="There's no one here to call"
class="_icon-button_ur2sw_17"
class="_icon-button_16nk7_17"
data-state="closed"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div />
<div
class="_indicator-icon_jtb4d_26"
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_ur2sw_17"
class="_icon-button_16nk7_17"
data-state="closed"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div />
<div
class="_indicator-icon_jtb4d_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
</header>

4
test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
View file

@ -480,7 +480,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<span>
Show a badge
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"
@ -1190,7 +1190,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<span>
Show a badge
<div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
>
<span
class="mx_NotificationBadge_count"

2
test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
View file

@ -26,7 +26,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
class="mx_SpacePanel_badgeContainer"
>
<div
class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char"
role="button"
tabindex="-1"
>