Add unread notification dot to timeline card button (#7749)
This commit is contained in:
parent
bf8438cbb2
commit
479e7e9a25
2 changed files with 7 additions and 0 deletions
|
@ -140,6 +140,11 @@ $pulse-color: $alert;
|
||||||
animation-iteration-count: 1;
|
animation-iteration-count: 1;
|
||||||
|
|
||||||
&.mx_Indicator_gray {
|
&.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);
|
background: rgba($input-darker-fg-color, 1);
|
||||||
box-shadow: rgba($input-darker-fg-color, 1);
|
box-shadow: rgba($input-darker-fg-color, 1);
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,6 +60,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
|
||||||
|
|
||||||
const classes = classNames({
|
const classes = classNames({
|
||||||
"mx_RightPanel_headerButton_unreadIndicator": true,
|
"mx_RightPanel_headerButton_unreadIndicator": true,
|
||||||
|
"mx_Indicator_bold": color === NotificationColor.Bold,
|
||||||
"mx_Indicator_gray": color === NotificationColor.Grey,
|
"mx_Indicator_gray": color === NotificationColor.Grey,
|
||||||
});
|
});
|
||||||
return <>
|
return <>
|
||||||
|
@ -100,6 +101,7 @@ const TimelineCardHeaderButton = ({ room, isHighlighted, onClick }: IHeaderButto
|
||||||
let unreadIndicator;
|
let unreadIndicator;
|
||||||
const color = RoomNotificationStateStore.instance.getRoomState(room).color;
|
const color = RoomNotificationStateStore.instance.getRoomState(room).color;
|
||||||
switch (color) {
|
switch (color) {
|
||||||
|
case NotificationColor.Bold:
|
||||||
case NotificationColor.Grey:
|
case NotificationColor.Grey:
|
||||||
case NotificationColor.Red:
|
case NotificationColor.Red:
|
||||||
unreadIndicator = <UnreadIndicator color={color} />;
|
unreadIndicator = <UnreadIndicator color={color} />;
|
||||||
|
|
Loading…
Reference in a new issue