From cc453f222146bf1d48af3edbdc6396e856e81893 Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Fri, 2 Aug 2024 15:18:19 +0200
Subject: [PATCH] Change the filtered notification count to be in the account
avatar (#31262)
---
app/javascript/mastodon/components/avatar.tsx | 12 +++++++++
.../components/notification_request.jsx | 3 +--
app/javascript/styles/mastodon/_mixins.scss | 13 ---------
.../styles/mastodon/components.scss | 27 ++++++++++++++++---
4 files changed, 37 insertions(+), 18 deletions(-)
diff --git a/app/javascript/mastodon/components/avatar.tsx b/app/javascript/mastodon/components/avatar.tsx
index 8f866a3c6..8b16296c2 100644
--- a/app/javascript/mastodon/components/avatar.tsx
+++ b/app/javascript/mastodon/components/avatar.tsx
@@ -11,6 +11,8 @@ interface Props {
style?: React.CSSProperties;
inline?: boolean;
animate?: boolean;
+ counter?: number | string;
+ counterBorderColor?: string;
}
export const Avatar: React.FC<Props> = ({
@@ -19,6 +21,8 @@ export const Avatar: React.FC<Props> = ({
size = 20,
inline = false,
style: styleFromParent,
+ counter,
+ counterBorderColor,
}) => {
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
@@ -43,6 +47,14 @@ export const Avatar: React.FC<Props> = ({
style={style}
>
{src && <img src={src} alt='' />}
+ {counter && (
+ <div
+ className='account__avatar__counter'
+ style={{ borderColor: counterBorderColor }}
+ >
+ {counter}
+ </div>
+ )}
</div>
);
};
diff --git a/app/javascript/mastodon/features/notifications/components/notification_request.jsx b/app/javascript/mastodon/features/notifications/components/notification_request.jsx
index 3a77ef4e2..fc96bd2ee 100644
--- a/app/javascript/mastodon/features/notifications/components/notification_request.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notification_request.jsx
@@ -38,12 +38,11 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
return (
<div className='notification-request'>
<Link to={`/notifications/requests/${id}`} className='notification-request__link'>
- <Avatar account={account} size={36} />
+ <Avatar account={account} size={40} counter={toCappedNumber(notificationsCount)} />
<div className='notification-request__name'>
<div className='notification-request__name__display-name'>
<bdi><strong dangerouslySetInnerHTML={{ __html: account?.get('display_name_html') }} /></bdi>
- <span className='filtered-notifications-banner__badge'>{toCappedNumber(notificationsCount)}</span>
</div>
<span>@{account?.get('acct')}</span>
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index d7f8586dd..899b494e5 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,16 +1,3 @@
-@mixin avatar-radius {
- border-radius: 4px;
- background: transparent no-repeat;
- background-position: 50%;
- background-clip: padding-box;
-}
-
-@mixin avatar-size($size: 48px) {
- width: $size;
- height: $size;
- background-size: $size $size;
-}
-
@mixin search-input {
outline: 0;
box-sizing: border-box;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index cba6a5aa3..3c1ec2816 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1980,17 +1980,15 @@ body > [data-popper-placement] {
}
.account__avatar {
- @include avatar-radius;
-
display: block;
position: relative;
- overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
+ border-radius: 4px;
}
&-inline {
@@ -2027,6 +2025,29 @@ body > [data-popper-placement] {
font-size: 15px;
}
}
+
+ &__counter {
+ $height: 16px;
+ $h-padding: 5px;
+
+ position: absolute;
+ bottom: -3px;
+ inset-inline-end: -3px;
+ padding-left: $h-padding;
+ padding-right: $h-padding;
+ height: $height;
+ border-radius: $height;
+ min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
+ line-height: $height + 1px; // to visually center the numbers
+ background-color: $ui-button-background-color;
+ color: $white;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--background-color);
+ font-size: 11px;
+ font-weight: 500;
+ text-align: center;
+ }
}
a .account__avatar {