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:
parent
061f4ab08f
commit
86fcd87f53
5 changed files with 18 additions and 6 deletions
|
@ -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);
|
||||
|
|
|
@ -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)}>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue