Update notification UI a little

Summary: Fixes T8944. Adds a small dot if notification is new along with color. Goes away when clicked. Increased font and padding for readability.

Test Plan: Send notifications from test account, review them in menu, application search, and in real-time display.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

Maniphest Tasks: T8944

Differential Revision: https://secure.phabricator.com/D18485

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '291cbd98',
+    'core.pkg.css' => 'b324663c',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -29,7 +29,7 @@ return array(
     'rsrc/css/aphront/dialog-view.css' => '6bfc244b',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
     'rsrc/css/aphront/multi-column.css' => '84cc6640',
-    'rsrc/css/aphront/notification.css' => '3f6c89c9',
+    'rsrc/css/aphront/notification.css' => '457861ec',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'faf6a6fc',
     'rsrc/css/aphront/table-view.css' => 'a3aa6910',
@@ -40,7 +40,7 @@ return array(
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
     'rsrc/css/application/base/main-menu-view.css' => '1802a242',
-    'rsrc/css/application/base/notification-menu.css' => '73fefdfa',
+    'rsrc/css/application/base/notification-menu.css' => '10685bd4',
     'rsrc/css/application/base/phui-theme.css' => '9f261c6b',
     'rsrc/css/application/base/standard-page-view.css' => '34ee718b',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
@@ -792,8 +792,8 @@ return array(
     'phabricator-main-menu-view' => '1802a242',
     'phabricator-nav-view-css' => 'faf6a6fc',
     'phabricator-notification' => '5c3349b2',
-    'phabricator-notification-css' => '3f6c89c9',
+    'phabricator-notification-css' => '457861ec',
-    'phabricator-notification-menu-css' => '73fefdfa',
+    'phabricator-notification-menu-css' => '10685bd4',
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'c5af80a2',

src/view/phui/PHUIFeedStoryView.php

@@ -150,13 +150,25 @@ final class PHUIFeedStoryView extends AphrontView {
     if ($this->getShowTimestamp()) {
       if ($this->epoch) {
         if ($user) {
-          $foot = phabricator_datetime($this->epoch, $user);
+          $marker = id(new PHUIIconView())
+            ->setIcon('fa-circle')
+            ->addClass('phabricator-notification-status');
+          $date = phabricator_datetime($this->epoch, $user);
           $foot = phutil_tag(
             'span',
             array(
               'class' => 'phabricator-notification-date',
             ),
-            $foot);
+            $date);
+            $foot = phutil_tag(
+              'div',
+              array(
+                'class' => 'phabricator-notification-foot',
+              ),
+              array(
+                $marker,
+                $date,
+              ));
         } else {
           $foot = null;
         }

webroot/rsrc/css/aphront/notification.css

@@ -11,7 +11,7 @@
 
 .jx-notification {
   width: 240px;
-  padding: 8px 16px;
+  padding: 8px 12px;
 
   font-size: 11px;
   overflow: hidden;

webroot/rsrc/css/application/base/notification-menu.css

@@ -4,7 +4,8 @@
 
 .phabricator-notification-menu {
   background: {$page.content};
-  font-size: {$smallestfontsize};
+  font-size: {$smallerfontsize};
+  line-height: 18px;
   word-wrap: break-word;
   overflow-y: auto;
   box-shadow: {$dropshadow};
@@ -12,9 +13,8 @@
   border-radius: 3px;
 }
 
-.phabricator-notification .phabricator-notification-date {
+.phabricator-notification {
-  margin-left: 8px;
+  padding: 8px 12px;
-  color: {$lightgreytext};
 }
 
 .phabricator-notification-menu-loading {
@@ -44,11 +44,7 @@
 }
 
 .phabricator-notification-list .phabricator-notification {
-  padding: 10px 4px;
+  padding: 8px;
-}
-
-.phabricator-notification {
-  padding: 6px 8px;
 }
 
 .phabricator-notification-menu .phabricator-notification {
@@ -56,7 +52,7 @@
 }
 
 .device-desktop .phabricator-notification-menu .phabricator-notification:hover {
-  background: {$hoverblue};
+  background: {$lightgreybackground};
 }
 
 .device-desktop .phabricator-notification-menu
@@ -81,9 +77,34 @@
   color: {$lightgreytext};
 }
 
+.phabricator-notification-foot {
+  color: {$lightgreytext};
+  font-size: {$smallestfontsize};
+  line-height: 18px;
+  position: relative;
+}
+
+.phabricator-notification-unread .phabricator-notification-foot {
+  padding-left: 10px;
+}
+
+.phabricator-notification-foot .phabricator-notification-status {
+  display: none;
+}
+
+.phabricator-notification-unread .phabricator-notification-foot
+  .phabricator-notification-status {
+    font-size: 7px;
+    color: {$lightgreytext};
+    position: absolute;
+    display: inline-block;
+    top: 6px;
+    left: 0;
+}
+
 .phabricator-notification-header {
   font-weight: bold;
-  padding: 10px 8px;
+  padding: 10px 12px;
   font-size: {$smallerfontsize};
   border-bottom: 1px solid {$thinblueborder};
 }