From 1758450e5cf18b0fcae0e534783d7aced209f98d Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 4 Apr 2022 12:36:54 +0100 Subject: [PATCH] Revamp notification dot for better readibility (#8197) --- res/css/structures/_RightPanel.scss | 28 ++++++++++++------- res/css/views/rooms/_EventTile.scss | 2 +- res/themes/dark/css/_dark.scss | 5 ++++ res/themes/legacy-dark/css/_legacy-dark.scss | 1 + .../legacy-light/css/_legacy-light.scss | 1 + res/themes/light/css/_light.scss | 5 ++++ .../views/right_panel/HeaderButton.tsx | 4 ++- .../views/right_panel/RoomHeaderButtons.tsx | 2 ++ 8 files changed, 36 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 916f14b4e8..c53bc86400 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -93,7 +93,8 @@ limitations under the License. mask-position: center; } -$dot-size: 7px; +$dot-size: 8px; +$dot-offset: -3px; $pulse-color: $alert; .mx_RightPanel_pinnedMessagesButton { @@ -104,8 +105,8 @@ $pulse-color: $alert; } .mx_RightPanel_headerButton_unreadIndicator_bg { position: absolute; - right: 0; - top: 0; + right: $dot-offset; + top: $dot-offset; margin: 4px; width: $dot-size; height: $dot-size; @@ -117,8 +118,8 @@ $pulse-color: $alert; .mx_RightPanel_headerButton_unreadIndicator { position: absolute; - right: 0; - top: 0; + right: $dot-offset; + top: $dot-offset; margin: 4px; width: $dot-size; height: $dot-size; @@ -135,13 +136,13 @@ $pulse-color: $alert; } &.mx_Indicator_gray { - background: rgba($roomtile-default-badge-bg-color, 1); - box-shadow: rgba($roomtile-default-badge-bg-color, 1); + background: rgba($room-icon-unread-color, 1); + box-shadow: rgba($room-icon-unread-color, 1); } &.mx_Indicator_bold { - background: rgba($input-darker-fg-color, 1); - box-shadow: rgba($input-darker-fg-color, 1); + background: rgba($primary-content, 1); + box-shadow: rgba($primary-content, 1); } &::after { @@ -197,7 +198,14 @@ $pulse-color: $alert; } } -.mx_RightPanel_headerButton_highlight { +.mx_RightPanel_headerButton_unread { + &::before { + background-color: $room-icon-unread-color !important; + } +} + +.mx_RightPanel_headerButton_highlight, +.mx_RightPanel_headerButton:hover { &::before { background-color: $accent !important; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index bb60c95c99..988b79b6ef 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -70,7 +70,7 @@ $left-gutter: 64px; } &[data-shape=ThreadsList][data-notification=total]::before { - background-color: $roomtile-default-badge-bg-color; + background-color: $room-icon-unread-color; } &[data-shape=ThreadsList][data-notification=highlight]::before { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 37e3be485c..7921a4e1a8 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -79,6 +79,11 @@ $settings-profile-button-bg-color: #e7e7e7; $settings-subsection-fg-color: $text-secondary-color; // ******************** +// Room +// ******************** +$room-icon-unread-color: #fff; +// ******************** + // RoomHeader // ******************** $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 887139e867..03ba8c70ea 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -85,6 +85,7 @@ $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; $icon-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; +$room-icon-unread-color: #fff; // Legacy theme backports $accent: #0DBD8B; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 311e2ab4db..b039cfa70f 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -127,6 +127,7 @@ $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; $icon-button-color: #91a1c0; $roomtopic-color: #9e9e9e; +$room-icon-unread-color: #737D8C; // ******************** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 6ba458301b..36efeda5c4 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -118,6 +118,11 @@ $settings-profile-button-bg-color: $menu-border-color; $settings-subsection-fg-color: $muted-fg-color; // ******************** +// Room +// ******************** +$room-icon-unread-color: $secondary-content; +// ******************** + // RoomHeader // ******************** $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 7f6c22fbd3..8341b03d2d 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -29,6 +29,7 @@ import { ButtonEvent } from "../elements/AccessibleButton"; interface IProps { // Whether this button is highlighted isHighlighted: boolean; + isUnread?: boolean; // click handler onClick: (ev: ButtonEvent) => void; // The parameters to track the click event @@ -50,11 +51,12 @@ export default class HeaderButton extends React.Component { public render() { // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { isHighlighted, onClick, analytics, name, title, ...props } = this.props; + const { isHighlighted, isUnread = false, onClick, analytics, name, title, ...props } = this.props; const classes = classNames({ mx_RightPanel_headerButton: true, mx_RightPanel_headerButton_highlight: isHighlighted, + mx_RightPanel_headerButton_unread: isUnread, [`mx_RightPanel_${name}`]: true, }); diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index aa2a8ffd63..1ac90c91e6 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -93,6 +93,7 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }: IHeaderBut name="pinnedMessagesButton" title={_t("Pinned messages")} isHighlighted={isHighlighted} + isUnread={!!unreadIndicator} onClick={onClick} analytics={["Right Panel", "Pinned Messages Button", "click"]} > @@ -243,6 +244,7 @@ export default class RoomHeaderButtons extends HeaderButtons { title={_t("Threads")} onClick={this.onThreadsPanelClicked} isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)} + isUnread={this.threadNotificationState.color > 0} analytics={['Right Panel', 'Threads List Button', 'click']}>