From d110660dc3ee0079ce0ebf08cecda3eccfea85a8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 23 Jan 2024 14:39:50 +0000 Subject: [PATCH] Make the unread badge component more reusable (#12163) Add a paramter to make it a dot rather than a badge rather than mangling it to a dot with CSS in EventTile. Move it to a place in the DOM that reflects where it's actually supposed to sit rather than repositioning it with CSS. Tweak sizes to match what figma says (8px everywhere for dots rather than 6px in some places as it was). --- res/css/views/rooms/_EventTile.pcss | 25 ------------------- res/css/views/rooms/_NotificationBadge.pcss | 10 +++++--- src/components/views/rooms/EventTile.tsx | 6 ++++- .../StatelessNotificationBadge.tsx | 9 ++++--- .../UnreadNotificationBadge.tsx | 5 ++-- 5 files changed, 19 insertions(+), 36 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 20753d94b9..31a1dc5dcb 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1053,23 +1053,6 @@ $left-gutter: 64px; pointer-events: none; /* ensures the title for the sender name can be correctly displayed */ } - /* Display notification dot */ - &[data-notification]::before, - .mx_NotificationBadge { - position: absolute; - $notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */ - - /* !important to fix overly specific CSS selector applied on mx_NotificationBadge */ - width: $notification-dot-size !important; - height: $notification-dot-size !important; - border-radius: 50%; - inset: $notification-inset-block-start $spacing-8 auto auto; - } - - .mx_NotificationBadge_count { - display: none; - } - &[data-notification="total"]::before { background-color: $room-icon-unread-color; } @@ -1441,14 +1424,6 @@ $left-gutter: 64px; margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ } } - - &[data-shape="ThreadsList"][data-notification]::before, - .mx_NotificationBadge { - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-block-start: calc( - $notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top) - ); - } } } diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss index d7f15eacde..68b44b124b 100644 --- a/res/css/views/rooms/_NotificationBadge.pcss +++ b/res/css/views/rooms/_NotificationBadge.pcss @@ -41,11 +41,13 @@ limitations under the License. /* These are the 3 background types */ &.mx_NotificationBadge_dot { - background-color: $primary-content; /* increased visibility */ + width: 8px; + height: 8px; + border-radius: 8px; - width: 6px; - height: 6px; - border-radius: 6px; + .mx_NotificationBadge_count { + display: none; + } } &.mx_NotificationBadge_knocked { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 8ea3e35f67..cb41417338 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1308,6 +1308,11 @@ export class UnwrappedEventTile extends React.Component "" )} {timestamp} + {isRenderingNotification && room ? (
@@ -1336,7 +1341,6 @@ export class UnwrappedEventTile extends React.Component )} {msgOption} - , ); } diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx index 95f71cc085..03529defc1 100644 --- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx @@ -28,6 +28,7 @@ interface Props { count: number; level: NotificationLevel; knocked?: boolean; + type?: "badge" | "dot"; } interface ClickableProps extends Props { @@ -39,7 +40,7 @@ interface ClickableProps extends Props { } export const StatelessNotificationBadge = forwardRef>( - ({ symbol, count, level, knocked, ...props }, ref) => { + ({ symbol, count, level, knocked, type = "badge", ...props }, ref) => { const hideBold = useSettingValue("feature_hidebold"); // Don't show a badge if we don't need to @@ -59,10 +60,10 @@ export const StatelessNotificationBadge = forwardRef= NotificationLevel.Highlight, - mx_NotificationBadge_dot: isEmptyBadge && !knocked, + mx_NotificationBadge_dot: (isEmptyBadge && !knocked) || type === "dot", mx_NotificationBadge_knocked: knocked, - mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3, - mx_NotificationBadge_3char: symbol && symbol.length > 2, + mx_NotificationBadge_2char: type === "badge" && symbol && symbol.length > 0 && symbol.length < 3, + mx_NotificationBadge_3char: type === "badge" && symbol && symbol.length > 2, }); if (props.onClick) { diff --git a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx index 4708c33b95..5864a63be0 100644 --- a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx @@ -23,10 +23,11 @@ import { StatelessNotificationBadge } from "./StatelessNotificationBadge"; interface Props { room?: Room; threadId?: string; + type?: "badge" | "dot"; } -export function UnreadNotificationBadge({ room, threadId }: Props): JSX.Element { +export function UnreadNotificationBadge({ room, threadId, type }: Props): JSX.Element { const { symbol, count, level } = useUnreadNotifications(room, threadId); - return ; + return ; }