mirror of https://github.com/vector-im/riot-web
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).t3chguy/dedup-icons-17oct
parent
4e68b91515
commit
d110660dc3
|
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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()} />
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue