Notification Menu Upgrade (#1713)

* Mark notification as seen on hover

* Clean code

* Mark notifications as seen on button click

* Clean code

* Animate bubble

ui/component/headerNotificationButton/index.js

@@ -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);

ui/component/headerNotificationButton/view.jsx

@@ -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)}>

ui/component/notificationBubble/view.jsx

@@ -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

ui/scss/component/_notification.scss

@@ -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);
 }

ui/scss/component/menu-button.scss

@@ -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;