matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-30 02:21:17 +03:00
Code Activity

Make the unread badge component more reusable (#12163)

Browse Source 
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).
This commit is contained in:
David Baker
2024-01-23 14:39:50 +00:00
committed by GitHub
parent 4e68b91515
commit d110660dc3
5 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/EventTile.tsx
View File

@ -1308,6 +1308,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
""
)}
{timestamp}
<UnreadNotificationBadge
room={room || undefined}
threadId={this.props.mxEvent.getId()}
type="dot"
/>
</div>
{isRenderingNotification && room ? (
<div className="mx_EventTile_avatar">
@ -1336,7 +1341,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
)}
{msgOption}
<UnreadNotificationBadge room={room || undefined} threadId={this.props.mxEvent.getId()} />
</>,
);
}

9
src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
View File

@ -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<HTMLDivElement, XOR<Props, ClickableProps>>(
({ 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<HTMLDivElement, XOR<Props,
mx_NotificationBadge: true,
mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
mx_NotificationBadge_highlighted: level >= 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) {

5
src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
View File

@ -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 <StatelessNotificationBadge symbol={symbol} count={count} level={level} />;
return <StatelessNotificationBadge symbol={symbol} count={count} level={level} type={type} />;
}