Notifcation icons for Conpherence

Summary: Adds notification icons for Conpherence and re-writes the CSS a bit for the new icons and states. I removed the background bubble here and went straight CSS. I also seem to have a JS error and the notification menu doesn't display, but I'm tired and wanted to look at this in Differential. Will update after JS fix.

Test Plan: Turned on notification numbers and conpherence numbers, turned them off. Made them big. Checked FF and IE.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: aran, Korvin

Maniphest Tasks: T2415

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

resources/sprite/manifest/menu.json

@@ -11,10 +11,20 @@
       "rule" : ".phabricator-crumb-divider",
       "hash" : "50180da0aed206c9db2bc1547c1a158c"
     },
-    "bubble"           : {
+    "conf-hover"       : {
-      "name" : "bubble",
+      "name" : "conf-hover",
-      "rule" : ".phabricator-main-menu-alert-bubble.alert-unread",
+      "rule" : ".alert-notifications:hover .phabricator-main-menu-message-icon",
-      "hash" : "42f6a2337a584ce99c964021ff3450ca"
+      "hash" : "febc4135b2821ae2d3f0b06aa295ca0d"
+    },
+    "conf-off"         : {
+      "name" : "conf-off",
+      "rule" : ".alert-notifications .phabricator-main-menu-message-icon",
+      "hash" : "dc1b05cb611eaef76a09e8cff698c99d"
+    },
+    "conf-unseen"      : {
+      "name" : "conf-unseen",
+      "rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
+      "hash" : "1f7d54b2b9781099f867b100ebdd6c6a"
     },
     "eye"              : {
       "name" : "eye",
@@ -26,11 +36,6 @@
       "rule" : ".phabricator-main-menu-logo-image",
       "hash" : "6eadea2c3dd2ada989eba22b6769b3eb"
     },
-    "round_bubble"     : {
-      "name" : "round_bubble",
-      "rule" : ".phabricator-main-menu-alert-bubble",
-      "hash" : "9710a3fa4a5fbfde3d81ad66863cdde0"
-    },
     "seen_have_unread" : {
       "name" : "seen_have_unread",
       "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",

src/__celerity_resource_map__.php

@@ -499,15 +499,15 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-menu-X2.png' =>
   array(
-    'hash' => '11017d94e949aa169361b966716e8729',
+    'hash' => 'ad544a9287ca73b9e0d3f549834701ee',
-    'uri' => '/res/11017d94/rsrc/image/sprite-menu-X2.png',
+    'uri' => '/res/ad544a92/rsrc/image/sprite-menu-X2.png',
     'disk' => '/rsrc/image/sprite-menu-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-menu.png' =>
   array(
-    'hash' => 'ba0f7d61f49ea50e9c3ff93b160e14c5',
+    'hash' => '8a6822c29bfa6f33db1c1b8b02b5c6d3',
-    'uri' => '/res/ba0f7d61/rsrc/image/sprite-menu.png',
+    'uri' => '/res/8a6822c2/rsrc/image/sprite-menu.png',
     'disk' => '/rsrc/image/sprite-menu.png',
     'type' => 'png',
   ),
@@ -2712,7 +2712,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/a38edb46/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/38ec42d4/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3308,7 +3308,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-menu-css' =>
   array(
-    'uri' => '/res/3d9f75af/rsrc/css/sprite-menu.css',
+    'uri' => '/res/8e6624b0/rsrc/css/sprite-menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3345,7 +3345,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'd935fc46' =>
+    '6031cfb4' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3389,7 +3389,7 @@ celerity_register_resource_map(array(
         36 => 'phabricator-object-item-list-view-css',
         37 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/d935fc46/core.pkg.css',
+      'uri' => '/res/pkg/6031cfb4/core.pkg.css',
       'type' => 'css',
     ),
     '66dca903' =>
@@ -3579,19 +3579,19 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => 'e30a3fa8',
-    'aphront-crumbs-view-css' => 'd935fc46',
+    'aphront-crumbs-view-css' => '6031cfb4',
-    'aphront-dialog-view-css' => 'd935fc46',
+    'aphront-dialog-view-css' => '6031cfb4',
-    'aphront-error-view-css' => 'd935fc46',
+    'aphront-error-view-css' => '6031cfb4',
-    'aphront-form-view-css' => 'd935fc46',
+    'aphront-form-view-css' => '6031cfb4',
     'aphront-headsup-action-list-view-css' => 'ec01d039',
-    'aphront-headsup-view-css' => 'd935fc46',
+    'aphront-headsup-view-css' => '6031cfb4',
-    'aphront-list-filter-view-css' => 'd935fc46',
+    'aphront-list-filter-view-css' => '6031cfb4',
-    'aphront-pager-view-css' => 'd935fc46',
+    'aphront-pager-view-css' => '6031cfb4',
-    'aphront-panel-view-css' => 'd935fc46',
+    'aphront-panel-view-css' => '6031cfb4',
-    'aphront-table-view-css' => 'd935fc46',
+    'aphront-table-view-css' => '6031cfb4',
-    'aphront-tokenizer-control-css' => 'd935fc46',
+    'aphront-tokenizer-control-css' => '6031cfb4',
-    'aphront-tooltip-css' => 'd935fc46',
+    'aphront-tooltip-css' => '6031cfb4',
-    'aphront-typeahead-control-css' => 'd935fc46',
+    'aphront-typeahead-control-css' => '6031cfb4',
     'differential-changeset-view-css' => 'ec01d039',
     'differential-core-view-css' => 'ec01d039',
     'differential-inline-comment-editor' => 'ac53d36a',
@@ -3605,7 +3605,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'ec01d039',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'd935fc46',
+    'global-drag-and-drop-css' => '6031cfb4',
     'inline-comment-summary-css' => 'ec01d039',
     'javelin-aphlict' => '66dca903',
     'javelin-behavior' => 'fbeded59',
@@ -3675,48 +3675,48 @@ celerity_register_resource_map(array(
     'javelin-util' => 'fbeded59',
     'javelin-vector' => 'fbeded59',
     'javelin-workflow' => 'fbeded59',
-    'lightbox-attachment-css' => 'd935fc46',
+    'lightbox-attachment-css' => '6031cfb4',
     'maniphest-task-summary-css' => 'e30a3fa8',
     'maniphest-transaction-detail-css' => 'e30a3fa8',
     'phabricator-busy' => '66dca903',
     'phabricator-content-source-view-css' => 'ec01d039',
-    'phabricator-core-buttons-css' => 'd935fc46',
+    'phabricator-core-buttons-css' => '6031cfb4',
-    'phabricator-core-css' => 'd935fc46',
+    'phabricator-core-css' => '6031cfb4',
-    'phabricator-crumbs-view-css' => 'd935fc46',
+    'phabricator-crumbs-view-css' => '6031cfb4',
-    'phabricator-directory-css' => 'd935fc46',
+    'phabricator-directory-css' => '6031cfb4',
     'phabricator-drag-and-drop-file-upload' => 'ac53d36a',
     'phabricator-dropdown-menu' => '66dca903',
     'phabricator-file-upload' => '66dca903',
-    'phabricator-filetree-view-css' => 'd935fc46',
+    'phabricator-filetree-view-css' => '6031cfb4',
-    'phabricator-flag-css' => 'd935fc46',
+    'phabricator-flag-css' => '6031cfb4',
-    'phabricator-form-view-css' => 'd935fc46',
+    'phabricator-form-view-css' => '6031cfb4',
-    'phabricator-header-view-css' => 'd935fc46',
+    'phabricator-header-view-css' => '6031cfb4',
-    'phabricator-jump-nav' => 'd935fc46',
+    'phabricator-jump-nav' => '6031cfb4',
     'phabricator-keyboard-shortcut' => '66dca903',
     'phabricator-keyboard-shortcut-manager' => '66dca903',
-    'phabricator-main-menu-view' => 'd935fc46',
+    'phabricator-main-menu-view' => '6031cfb4',
     'phabricator-menu-item' => '66dca903',
-    'phabricator-nav-view-css' => 'd935fc46',
+    'phabricator-nav-view-css' => '6031cfb4',
     'phabricator-notification' => '66dca903',
-    'phabricator-notification-css' => 'd935fc46',
+    'phabricator-notification-css' => '6031cfb4',
-    'phabricator-notification-menu-css' => 'd935fc46',
+    'phabricator-notification-menu-css' => '6031cfb4',
-    'phabricator-object-item-list-view-css' => 'd935fc46',
+    'phabricator-object-item-list-view-css' => '6031cfb4',
     'phabricator-object-selector-css' => 'ec01d039',
     'phabricator-paste-file-upload' => '66dca903',
     'phabricator-prefab' => '66dca903',
     'phabricator-project-tag-css' => 'e30a3fa8',
-    'phabricator-remarkup-css' => 'd935fc46',
+    'phabricator-remarkup-css' => '6031cfb4',
     'phabricator-shaped-request' => 'ac53d36a',
-    'phabricator-side-menu-view-css' => 'd935fc46',
+    'phabricator-side-menu-view-css' => '6031cfb4',
-    'phabricator-standard-page-view' => 'd935fc46',
+    'phabricator-standard-page-view' => '6031cfb4',
     'phabricator-textareautils' => '66dca903',
     'phabricator-tooltip' => '66dca903',
-    'phabricator-transaction-view-css' => 'd935fc46',
+    'phabricator-transaction-view-css' => '6031cfb4',
-    'phabricator-zindex-css' => 'd935fc46',
+    'phabricator-zindex-css' => '6031cfb4',
-    'sprite-apps-large-css' => 'd935fc46',
+    'sprite-apps-large-css' => '6031cfb4',
-    'sprite-gradient-css' => 'd935fc46',
+    'sprite-gradient-css' => '6031cfb4',
-    'sprite-icon-css' => 'd935fc46',
+    'sprite-icon-css' => '6031cfb4',
-    'sprite-menu-css' => 'd935fc46',
+    'sprite-menu-css' => '6031cfb4',
-    'syntax-highlighting-css' => 'd935fc46',
+    'syntax-highlighting-css' => '6031cfb4',
   ),
 ));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -87,16 +87,6 @@ final class CeleritySpriteGenerator {
     $sprites = array();
 
     $sources = array(
-      'round_bubble' => array(
-        'x' => 26,
-        'y' => 26,
-        'css' => '.phabricator-main-menu-alert-bubble'
-      ),
-      'bubble' => array(
-        'x' => 46,
-        'y' => 26,
-        'css' => '.phabricator-main-menu-alert-bubble.alert-unread'
-      ),
       'seen_read_all' => array(
         'x' => 14,
         'y' => 14,
@@ -135,6 +125,25 @@ final class CeleritySpriteGenerator {
         'y' => 25,
         'css' => '.phabricator-main-menu-logo-image',
       ),
+      'conf-off' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications .phabricator-main-menu-message-icon',
+      ),
+      'conf-hover' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications:hover .phabricator-main-menu-message-icon',
+      ),
+      'conf-unseen' => array(
+        'x' => 14,
+        'y' => 14,
+        'css' =>
+          '.alert-notifications.message-unread '.
+          '.phabricator-main-menu-message-icon',
+      ),
     );
 
     $scales = array(

src/view/page/menu/PhabricatorMainMenuView.php

@@ -292,6 +292,59 @@ final class PhabricatorMainMenuView extends AphrontView {
     require_celerity_resource('phabricator-notification-menu-css');
     require_celerity_resource('sprite-menu-css');
 
+    $container_classes = array(
+      'sprite-menu',
+      'alert-notifications',
+    );
+
+    $conpherence = id(new PhabricatorApplicationConpherence())->isBeta();
+    $allow_beta =
+      PhabricatorEnv::getEnvConfig('phabricator.show-beta-applications');
+    $message_tag = '';
+
+    if (!$conpherence || $allow_beta) {
+      $message_id = celerity_generate_unique_node_id();
+      $message_count_id = celerity_generate_unique_node_id();
+
+      $unread_status = ConpherenceParticipationStatus::BEHIND;
+      $unread = id(new ConpherenceParticipantQuery())
+        ->withParticipantPHIDs(array($user->getPHID()))
+        ->withParticipationStatus($unread_status)
+        ->execute();
+      $message_count_number = count($unread);
+      if ($message_count_number > 999) {
+        $message_count_number = "\xE2\x88\x9E";
+      }
+
+      $message_count_tag = phutil_render_tag(
+        'span',
+        array(
+          'id'    => $message_count_id,
+          'class' => 'phabricator-main-menu-message-count'
+        ),
+        phutil_escape_html($message_count_number));
+
+      $message_icon_tag = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'sprite-menu phabricator-main-menu-message-icon',
+        ),
+        '');
+
+      if ($message_count_number) {
+        $container_classes[] = 'message-unread';
+      }
+
+      $message_tag = phutil_render_tag(
+        'a',
+        array(
+          'href'  => '/conpherence/',
+          'class' => implode(' ', $container_classes),
+          'id'    => $message_id,
+        ),
+        $message_icon_tag.$message_count_tag);
+    }
+
     $count_id = celerity_generate_unique_node_id();
     $dropdown_id = celerity_generate_unique_node_id();
     $bubble_id = celerity_generate_unique_node_id();
@@ -318,11 +371,6 @@ final class PhabricatorMainMenuView extends AphrontView {
       ),
       '');
 
-    $container_classes = array(
-      'phabricator-main-menu-alert-bubble',
-      'sprite-menu',
-      'alert-notifications',
-    );
     if ($count_number) {
       $container_classes[] = 'alert-unread';
     }
@@ -354,7 +402,8 @@ final class PhabricatorMainMenuView extends AphrontView {
       ),
       '');
 
-    return array($bubble_tag, $notification_dropdown);
+    return array(
+      $bubble_tag.$message_tag, $notification_dropdown);
   }
 
   private function renderMenuIcon($name) {

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

@@ -41,8 +41,6 @@
 
 .phabricator-main-menu-logo {
   display: inline-block;
-  position: relative;
-  height: 44px;
   width: 139px;
   margin-right: 6px;
   padding-right: 6px;
@@ -248,59 +246,45 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.device-desktop .phabricator-main-menu-alerts {
-  display: inline-block;
-}
-
 .device .phabricator-main-menu-alerts {
-  position: absolute;
+  margin-left: 60px;
-  left: 60px;
-  right: 60px;
-  top: 10px;
-  height: 34px;
-  text-align: center;
 }
 
-.phabricator-main-menu-alert-bubble {
+.phabricator-main-menu-alerts {
   display: inline-block;
-  position: relative;
+  border-radius: 15px;
-  width: 26px;
+  background: rgba(0,0,0,.2);
-  height: 26px;
+  height: 20px;
-  margin-bottom: 9px;
+  padding: 3px 10px;
+  margin-top: 9px;
 }
 
-.phabricator-main-menu-alert-bubble.alert-unread {
+.phabricator-main-menu-alert-icon,
-  width: 46px;
+.phabricator-main-menu-message-icon {
-}
-
-.phabricator-main-menu-alert-icon {
-  position: absolute;
   width: 14px;
   height: 14px;
-  top: 5px;
+  display: block;
-  left: 6px;
+  float: left;
+  margin: 2px 0 0 0;
 }
 
-.phabricator-main-menu-alert-count {
+.alert-notifications .phabricator-main-menu-message-icon {
-  position: absolute;
+  margin: 3px 0 0 8px;
+}
+
+.phabricator-main-menu-alert-count,
+.phabricator-main-menu-message-count {
   font-weight: bold;
-  line-height: 22px;
+  line-height: 20px;
-  top: 1px;
-  right: 8px;
-  left: 20px;
   color: #ffffff;
   text-align: center;
   display: none;
+  float: left;
+  margin-left: 3px;
 }
 
-.phabricator-main-menu-alert-item {
+.alert-unread .phabricator-main-menu-alert-count,
-  width: 26px;
+.message-unread .phabricator-main-menu-message-count  {
-  height: 26px;
-  margin: 9px;
-  display: block;
-}
-
-.alert-unread .phabricator-main-menu-alert-count {
   display: block;
 }
 

webroot/rsrc/css/sprite-menu.css

@@ -13,19 +13,11 @@ 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: 140px 127px;
+    background-size: 140px 88px;
   }
 }
 
 
-.phabricator-main-menu-alert-bubble {
-  background-position: 0px -68px;
-}
-
-.phabricator-main-menu-alert-bubble.alert-unread {
-  background-position: 0px -41px;
-}
-
 .alert-notifications .phabricator-main-menu-alert-icon {
   background-position: 0px 0px;
 }
@@ -35,21 +27,33 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
-  background-position: -27px -68px;
+  background-position: -30px 0px;
 }
 
 .phabricator-crumb-divider {
-  background-position: 0px -95px;
+  background-position: 0px -56px;
 }
 
 .menu-icon-eye {
-  background-position: -47px -41px;
+  background-position: -10px -56px;
 }
 
 .menu-icon-app {
-  background-position: -42px -68px;
+  background-position: -35px -56px;
 }
 
 .phabricator-main-menu-logo-image {
+  background-position: 0px -30px;
+}
+
+.alert-notifications .phabricator-main-menu-message-icon {
   background-position: 0px -15px;
 }
+
+.alert-notifications:hover .phabricator-main-menu-message-icon {
+  background-position: -15px -15px;
+}
+
+.alert-notifications.message-unread .phabricator-main-menu-message-icon {
+  background-position: -30px -15px;
+}