Update message and notification icons to use fonts

Summary: Cleans up spacing, updates to fonts instead of images. Fixed some mobile issues.

Test Plan:
Test with and without counts on desktop, tablet, mobile. Test layout in FF, Chrome, IE.

{F246745}

{F246746}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '78e368d3',
+    'core.pkg.css' => 'a82ffdea',
     'core.pkg.js' => 'ef8f73ee',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
@@ -35,7 +35,7 @@ return array(
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
     'rsrc/css/application/auth/auth.css' => '1e655982',
-    'rsrc/css/application/base/main-menu-view.css' => 'b2d8b1f8',
+    'rsrc/css/application/base/main-menu-view.css' => 'de453b7c',
     'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '5d71008f',
     'rsrc/css/application/base/standard-page-view.css' => '3f5b9311',
@@ -152,7 +152,7 @@ return array(
     'rsrc/css/sprite-gradient.css' => '4bdb98a7',
     'rsrc/css/sprite-login.css' => 'a355d921',
     'rsrc/css/sprite-main-header.css' => '92720ee2',
-    'rsrc/css/sprite-menu.css' => 'afaf676d',
+    'rsrc/css/sprite-menu.css' => '0ca5a908',
     'rsrc/css/sprite-payments.css' => 'cc085d44',
     'rsrc/css/sprite-projects.css' => '7578fa56',
     'rsrc/css/sprite-tokens.css' => '1706b943',
@@ -330,8 +330,8 @@ return array(
     'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
     'rsrc/image/sprite-login.png' => '07f2c67c',
     'rsrc/image/sprite-main-header.png' => '83521873',
-    'rsrc/image/sprite-menu-X2.png' => 'a54606dd',
+    'rsrc/image/sprite-menu-X2.png' => '89ae35f1',
-    'rsrc/image/sprite-menu.png' => '34048681',
+    'rsrc/image/sprite-menu.png' => 'b912a047',
     'rsrc/image/sprite-payments.png' => 'd8576309',
     'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
     'rsrc/image/sprite-projects.png' => '631ff9a7',
@@ -723,7 +723,7 @@ return array(
     'phabricator-hovercard-view-css' => '893f4783',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => 'b2d8b1f8',
+    'phabricator-main-menu-view' => 'de453b7c',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -820,7 +820,7 @@ return array(
     'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => 'a355d921',
     'sprite-main-header-css' => '92720ee2',
-    'sprite-menu-css' => 'afaf676d',
+    'sprite-menu-css' => '0ca5a908',
     'sprite-payments-css' => 'cc085d44',
     'sprite-projects-css' => '7578fa56',
     'sprite-tokens-css' => '1706b943',

resources/sprite/manifest/menu.json

@@ -1,50 +1,20 @@
 {
   "version" : 1,
   "sprites" : {
-    "arrow-right"      : {
+    "arrow-right" : {
       "name" : "arrow-right",
       "rule" : ".phabricator-crumb-divider",
       "hash" : "87affa58adbe8da437a1cea6ffc5d8a4"
     },
-    "conf-hover"       : {
+    "eye"         : {
-      "name" : "conf-hover",
-      "rule" : ".alert-notifications:hover .phabricator-main-menu-message-icon",
-      "hash" : "78795fbf2345fd8f54e66a3b3dea7bcd"
-    },
-    "conf-off"         : {
-      "name" : "conf-off",
-      "rule" : ".alert-notifications .phabricator-main-menu-message-icon",
-      "hash" : "85e76a1e5d717d7d7f0a4e4e92a0b543"
-    },
-    "conf-unseen"      : {
-      "name" : "conf-unseen",
-      "rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
-      "hash" : "7edd6d68b36f2f46133eb3118f966c6b"
-    },
-    "eye"              : {
       "name" : "eye",
       "rule" : ".phabricator-main-menu-eye",
       "hash" : "35f24014f23142275574136a63dcb73f"
     },
-    "logo"             : {
+    "logo"        : {
       "name" : "logo",
       "rule" : ".phabricator-main-menu-logo",
       "hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
-    },
-    "seen_have_unread" : {
-      "name" : "seen_have_unread",
-      "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
-      "hash" : "7742f97d26f025542d6f162346557871"
-    },
-    "seen_read_all"    : {
-      "name" : "seen_read_all",
-      "rule" : ".alert-notifications .phabricator-main-menu-alert-icon",
-      "hash" : "94d4fea01dbb666bb794feec56f783e5"
-    },
-    "unseen_any"       : {
-      "name" : "unseen_any",
-      "rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon",
-      "hash" : "6c577a4c2207f9e2250ca3f09fb4fac3"
     }
   },
   "scales"  : [

src/applications/celerity/CeleritySpriteGenerator.php

@@ -6,24 +6,6 @@ final class CeleritySpriteGenerator {
     $sprites = array();
 
     $sources = array(
-      'seen_read_all' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications .phabricator-main-menu-alert-icon',
-      ),
-      'seen_have_unread' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications:hover .phabricator-main-menu-alert-icon',
-      ),
-      'unseen_any' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
-      ),
       'arrow-right' => array(
         'x' => 9,
         'y' => 31,
@@ -39,25 +21,6 @@ final class CeleritySpriteGenerator {
         'y' => 40,
         'css' => '.phabricator-main-menu-eye',
       ),
-      'conf-off' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications .phabricator-main-menu-message-icon',
-      ),
-      'conf-hover' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications:hover .phabricator-main-menu-message-icon',
-      ),
-      'conf-unseen' => array(
-        'x' => 18,
-        'y' => 18,
-        'css' =>
-          '.alert-notifications.message-unread '.
-          '.phabricator-main-menu-message-icon',
-      ),
     );
 
     $scales = array(

src/view/page/menu/PhabricatorMainMenuView.php

@@ -270,13 +270,8 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     require_celerity_resource('phabricator-notification-css');
     require_celerity_resource('phabricator-notification-menu-css');
-    require_celerity_resource('sprite-menu-css');
-
-    $container_classes = array(
-      'sprite-menu',
-      'alert-notifications',
-    );
 
+    $container_classes = array('alert-notifications');
     $aural = array();
 
     $message_tag = '';
@@ -324,7 +319,8 @@ final class PhabricatorMainMenuView extends AphrontView {
       $message_icon_tag = phutil_tag(
         'span',
         array(
-          'class' => 'sprite-menu phabricator-main-menu-message-icon',
+          'class' => 'phabricator-main-menu-message-icon phui-icon-view '.
+                     'phui-font-fa fa-comments',
         ),
         '');
 
@@ -408,7 +404,8 @@ final class PhabricatorMainMenuView extends AphrontView {
       $icon_tag = phutil_tag(
         'span',
         array(
-          'class' => 'sprite-menu phabricator-main-menu-alert-icon',
+          'class' => 'phabricator-main-menu-alert-icon phui-icon-view '.
+                     'phui-font-fa fa-bell',
         ),
         '');
 

webroot/rsrc/css/application/base/main-menu-view.css

@@ -43,8 +43,7 @@
   width: 148px;
   height: 44px;
   float: left;
-  margin-right: 6px;
+  margin-right: 4px;
-  padding-right: 4px;
   padding-left: 6px;
 }
 
@@ -271,36 +270,58 @@
 
 .phabricator-main-menu-alerts {
   display: inline-block;
-  border-radius: 15px;
   float: left;
-  background: rgba(0,0,0,.5);
+  padding: 4px 0;
-  height: 20px;
+}
-  padding: 2px 10px 3px 8px;
+
-  margin-top: 10px;
+.alert-notifications {
+  float: left;
+}
+
+.alert-notifications:hover .phui-icon-view {
+  color: #fff;
+}
+
+.alert-unread:hover .phabricator-main-menu-alert-icon.phui-icon-view,
+.message-unread:hover .phabricator-main-menu-message-icon.phui-icon-view {
+  color: {$sky};
 }
 
 .phabricator-main-menu-alert-icon,
 .phabricator-main-menu-message-icon {
   width: 18px;
   height: 18px;
-  display: block;
   float: left;
-  margin: 2px 0 0 0;
+  padding: 9px 6px 9px 4px;
+  color: white;
+  font-size: 18px;
+  line-height: 20px;
+  text-align: right;
 }
 
-.alert-notifications .phabricator-main-menu-message-icon {
+.phabricator-main-menu-alert-icon {
-  margin: 2px 0 0 6px;
+  font-size: 16px;
+  margin-top: 2px;
 }
 
 .phabricator-main-menu-alert-count,
 .phabricator-main-menu-message-count {
-  font-weight: bold;
+  color: #fff;
-  line-height: 20px;
-  color: #ffffff;
   text-align: center;
   display: none;
   float: left;
-  margin-left: 3px;
+  margin: 11px 6px 0 -2px;
+  font-size: 12px;
+}
+
+.device-phone .alert-unread .phabricator-main-menu-alert-count,
+.device-phone .message-unread .phabricator-main-menu-message-count {
+  display: none;
+}
+
+.alert-unread .phabricator-main-menu-alert-icon,
+.message-unread .phabricator-main-menu-message-icon  {
+  color: {$sky};
 }
 
 .alert-unread .phabricator-main-menu-alert-count,

webroot/rsrc/css/sprite-menu.css

@@ -13,43 +13,19 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-menu {
     background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 97px 138px;
+    background-size: 97px 100px;
   }
 }
 
 
-.alert-notifications .phabricator-main-menu-alert-icon {
-  background-position: 0px 0px;
-}
-
-.alert-notifications:hover .phabricator-main-menu-alert-icon {
-  background-position: -19px 0px;
-}
-
-.alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
-  background-position: -38px 0px;
-}
-
 .phabricator-crumb-divider {
-  background-position: 0px -65px;
+  background-position: 0px -27px;
 }
 
 .phabricator-main-menu-logo {
-  background-position: 0px -38px;
+  background-position: 0px 0px;
 }
 
 .phabricator-main-menu-eye {
-  background-position: 0px -97px;
+  background-position: 0px -59px;
-}
-
-.alert-notifications .phabricator-main-menu-message-icon {
-  background-position: 0px -19px;
-}
-
-.alert-notifications:hover .phabricator-main-menu-message-icon {
-  background-position: -19px -19px;
-}
-
-.alert-notifications.message-unread .phabricator-main-menu-message-icon {
-  background-position: -38px -19px;
 }