Add notification dots to thread summary icons (#12146)

* 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

View file

@ -22,8 +22,10 @@ import {
LocalNotificationSettings,
ReceiptType,
} from "matrix-js-sdk/src/matrix";
import { IndicatorIcon } from "@vector-im/compound-web";
import SettingsStore from "../settings/SettingsStore";
import { NotificationLevel } from "../stores/notifications/NotificationLevel";
export const deviceNotificationSettingsKeys = [
"notificationsEnabled",
@ -113,3 +115,21 @@ export function clearAllNotifications(client: MatrixClient): Promise<Array<{} |
return Promise.all(receiptPromises);
}
/**
* A helper to transform a notification color to the what the Compound Icon Button
* expects
*/
export function notificationLevelToIndicator(
level: NotificationLevel,
): React.ComponentPropsWithRef<typeof IndicatorIcon>["indicator"] {
if (level <= NotificationLevel.None) {
return undefined;
} else if (level <= NotificationLevel.Activity) {
return "default";
} else if (level <= NotificationLevel.Notification) {
return "success";
} else {
return "critical";
}
}