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:
parent
f684ad51cd
commit
95430cecbc
19 changed files with 130 additions and 54 deletions
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue