Add unread notification dot to timeline card button (#7749)

This commit is contained in:
Šimon Brandner 2022-02-08 18:37:03 +01:00 committed by GitHub
parent bf8438cbb2
commit 479e7e9a25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 0 deletions

View file

@ -140,6 +140,11 @@ $pulse-color: $alert;
animation-iteration-count: 1;
&.mx_Indicator_gray {
background: rgba($roomtile-default-badge-bg-color, 1);
box-shadow: rgba($roomtile-default-badge-bg-color, 1);
}
&.mx_Indicator_bold {
background: rgba($input-darker-fg-color, 1);
box-shadow: rgba($input-darker-fg-color, 1);
}

View file

@ -60,6 +60,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
const classes = classNames({
"mx_RightPanel_headerButton_unreadIndicator": true,
"mx_Indicator_bold": color === NotificationColor.Bold,
"mx_Indicator_gray": color === NotificationColor.Grey,
});
return <>
@ -100,6 +101,7 @@ const TimelineCardHeaderButton = ({ room, isHighlighted, onClick }: IHeaderButto
let unreadIndicator;
const color = RoomNotificationStateStore.instance.getRoomState(room).color;
switch (color) {
case NotificationColor.Bold:
case NotificationColor.Grey:
case NotificationColor.Red:
unreadIndicator = <UnreadIndicator color={color} />;