Notification Menu Upgrade (#1713)

* Mark notification as seen on hover

* Clean code

* Mark notifications as seen on button click

* Clean code

* Animate bubble
This commit is contained in:
Rave | 図書館猫 2022-06-22 02:59:37 +02:00 committed by GitHub
parent 061f4ab08f
commit 86fcd87f53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 6 deletions

View file

@ -20,7 +20,7 @@ const perform = (dispatch, ownProps) => ({
readNotification: ([id]) => dispatch(doReadNotifications([id])),
seeNotification: ([id]) => dispatch(doSeeNotifications([id])),
deleteNotification: (id) => dispatch(doDeleteNotification(id)),
doSeeAllNotifications: doSeeAllNotifications,
doSeeAllNotifications: () => dispatch(doSeeAllNotifications()),
});
export default connect(select, perform)(NotificationHeaderButton);

View file

@ -46,14 +46,17 @@ export default function NotificationHeaderButton(props: Props) {
doSeeAllNotifications,
} = props;
const list = notifications.slice(0, 20);
const { push } = useHistory();
const notificationsEnabled = authenticated && (ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui));
const [anchorEl, setAnchorEl] = React.useState(null);
const [clicked, setClicked] = React.useState(false);
const open = Boolean(anchorEl);
const handleClick = (event) => setAnchorEl(!anchorEl ? event.currentTarget : null);
const handleClick = (event) => {
doSeeAllNotifications();
if (unseenCount > 0) doSeeAllNotifications();
setAnchorEl(!anchorEl ? event.currentTarget : null);
};
const handleClose = () => setAnchorEl(null);
const menuProps = {
@ -87,7 +90,6 @@ export default function NotificationHeaderButton(props: Props) {
);
function handleMenuClick() {
if (unseenCount > 0) doSeeAllNotifications();
push(`/$/${PAGES.NOTIFICATIONS}`);
}
@ -191,7 +193,7 @@ export default function NotificationHeaderButton(props: Props) {
>
{generateNotificationText(notification_rule, notification_parameters)}
</div>
{!is_read && <span></span>}
{!is_read && <span className="dot"></span>}
<DateTime timeAgo date={active_at} />
</div>
<div className="delete-notification" onClick={(e) => handleNotificationDelete(e, id)}>

View file

@ -14,7 +14,7 @@ export default function NotificationBubble(props: Props) {
const { unseenCount, inline = false, user } = props;
const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
if (unseenCount === 0 || !notificationsEnabled) {
if (!notificationsEnabled) {
return null;
}
@ -22,6 +22,7 @@ export default function NotificationBubble(props: Props) {
<span
className={classnames('notification__bubble', {
'notification__bubble--inline': inline,
'notification__bubble-hidden': unseenCount === 0,
})}
>
<span

View file

@ -338,6 +338,8 @@ $contentMaxWidth: 60rem;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1);
transition: transform 0.4s;
.notification__count {
margin-bottom: -2px;
@ -348,6 +350,10 @@ $contentMaxWidth: 60rem;
}
}
.notification__bubble-hidden {
transform: scale(0);
}
.notification__bubble--small {
font-size: var(--font-xxsmall);
}

View file

@ -327,6 +327,9 @@ reach-portal {
display: inline-block;
font-size: var(--font-xxsmall);
margin-right: var(--spacing-xxxs);
&.dot {
font-size: var(--font-small);
}
}
.sticker__comment {
margin-left: 0;