Break logo/name into replaceable parts

Summary: Ref T4214, this breaks the 'eye' out as a separate image 40px x 40px. We also now show the eye on mobile, as we have enough room for both currently.

Test Plan: Tested default and nightmaremoon colors, tested mobile, tablet and desktop layouts.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T4214

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '33952f78',
+    'core.pkg.css' => 'f933e4df',
     'core.pkg.js' => 'cbdbd552',
     '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' => 'aceca0e9',
+    'rsrc/css/application/base/main-menu-view.css' => 'cebeecc4',
     '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' => '28281e16',
+    'rsrc/css/sprite-menu.css' => '1e5b7537',
     'rsrc/css/sprite-payments.css' => 'cc085d44',
     'rsrc/css/sprite-projects.css' => '7578fa56',
     'rsrc/css/sprite-tokens.css' => '1706b943',
@@ -324,8 +324,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' => '39d78f97',
-    'rsrc/image/sprite-menu.png' => '259dab45',
+    'rsrc/image/sprite-menu-X2.png' => '162d7d2b',
+    'rsrc/image/sprite-menu.png' => '3734edad',
     'rsrc/image/sprite-payments.png' => 'd8576309',
     'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
     'rsrc/image/sprite-projects.png' => '631ff9a7',
@@ -717,7 +717,7 @@ return array(
     'phabricator-hovercard-view-css' => '893f4783',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => 'aceca0e9',
+    'phabricator-main-menu-view' => 'cebeecc4',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -814,7 +814,7 @@ return array(
     'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => 'a355d921',
     'sprite-main-header-css' => '92720ee2',
-    'sprite-menu-css' => '28281e16',
+    'sprite-menu-css' => '1e5b7537',
     'sprite-payments-css' => 'cc085d44',
     'sprite-projects-css' => '7578fa56',
     'sprite-tokens-css' => '1706b943',

resources/sprite/manifest/menu.json

@@ -31,6 +31,11 @@
       "rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
       "hash" : "7edd6d68b36f2f46133eb3118f966c6b"
     },
+    "eye"              : {
+      "name" : "eye",
+      "rule" : ".phabricator-main-menu-eye",
+      "hash" : "35f24014f23142275574136a63dcb73f"
+    },
     "info-sm"          : {
       "name" : "info-sm",
       "rule" : ".menu-icon-info-sm",
@@ -38,8 +43,8 @@
     },
     "logo"             : {
       "name" : "logo",
-      "rule" : ".phabricator-main-menu-logo-image",
-      "hash" : "b03901ae5dff3ec840b88f8335819598"
+      "rule" : ".phabricator-main-menu-logo",
+      "hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
     },
     "logout-sm"        : {
       "name" : "logout-sm",

src/applications/celerity/CeleritySpriteGenerator.php

@@ -85,9 +85,14 @@ final class CeleritySpriteGenerator {
         'css' => '.menu-icon-app-blue',
       ),
       'logo' => array(
-        'x' => 149,
+        'x' => 96,
         'y' => 26,
-        'css' => '.phabricator-main-menu-logo-image',
+        'css' => '.phabricator-main-menu-logo',
+      ),
+      'eye' => array(
+        'x' => 40,
+        'y' => 40,
+        'css' => '.phabricator-main-menu-eye',
       ),
       'conf-off' => array(
         'x' => 18,

src/view/page/menu/PhabricatorMainMenuView.php

@@ -238,12 +238,11 @@ final class PhabricatorMainMenuView extends AphrontView {
   }
 
   private function renderPhabricatorLogo() {
-    $class = 'phabricator-main-menu-logo-image';
 
     return phutil_tag(
       'a',
       array(
-        'class' => 'phabricator-main-menu-logo',
+        'class' => 'phabricator-main-menu-brand',
         'href'  => '/',
       ),
       array(
@@ -256,7 +255,13 @@ final class PhabricatorMainMenuView extends AphrontView {
         phutil_tag(
           'span',
           array(
-            'class' => 'sprite-menu menu-logo-image '.$class,
+            'class' => 'sprite-menu phabricator-main-menu-eye',
+          ),
+          ''),
+          phutil_tag(
+          'span',
+          array(
+            'class' => 'sprite-menu phabricator-main-menu-logo',
           ),
           ''),
       ));

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

@@ -38,29 +38,34 @@
   float: left;
 }
 
-.phabricator-main-menu-logo {
+.phabricator-main-menu-brand {
   display: inline-block;
-  width: 149px;
+  width: 148px;
   height: 44px;
   float: left;
   margin-right: 6px;
-  padding-right: 6px;
+  padding-right: 4px;
   padding-left: 6px;
 }
 
-.menu-logo-image {
+.phabricator-main-menu-logo {
   position: absolute;
-  width: 149px;
+  width: 96px;
   height: 26px;
+  left: 52px;
   top: 9px;
 }
 
-.device-phone .phabricator-main-menu-logo {
-  margin-left: -45px;
+.phabricator-main-menu-eye {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  top: 2px;
 }
 
-.device .phabricator-main-menu-logo:hover {
-  background-color: transparent;
+.device .phabricator-main-menu-brand:hover {
+  background-color: rgba(0,0,0,.6);
+  cursor: hand;
 }
 
 /* - Expand/Collapse Button ----------------------------------------------------
@@ -385,15 +390,12 @@
 }
 
 .device-desktop .main-header-dark .phabricator-application-menu
- .core-menu-item.phui-list-item-view:hover,
-.device-desktop .main-header-dark .phabricator-main-menu-logo:hover {
+ .core-menu-item.phui-list-item-view:hover {
   background-color: rgba(0,0,0,.6);
 }
 
 .device-desktop .phabricator-application-menu
- .core-menu-item.phui-list-item-view:hover,
-.device-desktop .phabricator-main-menu-logo:hover {
-  background-color: rgba(0,0,0,.3);
+ .core-menu-item.phui-list-item-view:hover {
   box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
   border-radius: 3px;
 }

webroot/rsrc/css/sprite-menu.css

@@ -13,7 +13,7 @@ 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: 150px 151px;
+    background-size: 116px 192px;
   }
 }
 
@@ -78,10 +78,14 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -35px -119px;
 }
 
-.phabricator-main-menu-logo-image {
+.phabricator-main-menu-logo {
   background-position: 0px -63px;
 }
 
+.phabricator-main-menu-eye {
+  background-position: 0px -151px;
+}
+
 .alert-notifications .phabricator-main-menu-message-icon {
   background-position: 0px -19px;
 }