PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Revamp notification dot for better readibility (#8197)

Browse source
This commit is contained in:
Germain 2022-04-04 12:36:54 +01:00 committed by GitHub
parent 39f001e7f5
commit 1758450e5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
res/css/structures/_RightPanel.scss
View file

@ -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;
}

2
res/css/views/rooms/_EventTile.scss
View file

@ -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 {

5
res/themes/dark/css/_dark.scss
View file

@ -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);

1
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -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;

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -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;
// ********************

5
res/themes/light/css/_light.scss
View file

@ -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);

4
src/components/views/right_panel/HeaderButton.tsx
View file

@ -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<IProps> {
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,
});

2
src/components/views/right_panel/RoomHeaderButtons.tsx
View file

@ -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<IProps> {
title={_t("Threads")}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
isUnread={this.threadNotificationState.color > 0}
analytics={['Right Panel', 'Threads List Button', 'click']}>
<UnreadIndicator color={this.threadNotificationState.color} />
</HeaderButton>