Add eye icon to left menu button

Summary: Do we have an icon with 2x for the right menu?

Test Plan: {F26590}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

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

resources/sprite/manifest/gradient.json

@@ -28,7 +28,7 @@
     },
     "gradient-dark-menu-label" : {
       "name" : "gradient-dark-menu-label",
-      "rule" : ".gradient-dark-menu-label",
+      "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label",
       "hash" : "89a908596142d38fbe61a706694cd321"
     },
     "gradient-green-dark"      : {
@@ -55,6 +55,6 @@
   "scales"  : [
     1
   ],
-  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {\n    background-image: url(\/rsrc\/image\/sprite-gradient-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}",
+  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit, .phabricator-dark-menu .phabricator-menu-item-type-label {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit, .phabricator-dark-menu .phabricator-menu-item-type-label {\n    background-image: url(\/rsrc\/image\/sprite-gradient-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}",
   "type"    : "repeat-x"
 }

resources/sprite/manifest/menu.json

@@ -1,6 +1,11 @@
 {
   "version" : 1,
   "sprites" : {
+    "app"              : {
+      "name" : "app",
+      "rule" : ".menu-icon-app",
+      "hash" : "a389f99d9c00f688e625da71579ee90a"
+    },
     "arrow-right"      : {
       "name" : "arrow-right",
       "rule" : ".phabricator-crumb-divider",
@@ -11,6 +16,11 @@
       "rule" : ".phabricator-main-menu-alert-bubble.alert-unread",
       "hash" : "1145ac8a137a2a22517c1945fe22c517"
     },
+    "eye"              : {
+      "name" : "eye",
+      "rule" : ".menu-icon-eye",
+      "hash" : "d598b1acb1933a86eaed3dea3347f7b0"
+    },
     "round_bubble"     : {
       "name" : "round_bubble",
       "rule" : ".phabricator-main-menu-alert-bubble",

scripts/celerity/generate_sprites.php

@@ -204,6 +204,16 @@ $sheets = array(
   'gradient' => $generator->buildGradientSheet(),
 );
 
+list($err) = exec_manual('optipng');
+if ($err) {
+  $have_optipng = false;
+  echo phutil_console_format(
+    "<bg:red> WARNING </bg> `optipng` not found in PATH.\n".
+    "Sprites will not be optimized! Install `optipng`!\n");
+} else {
+  $have_optipng = true;
+}
+
 foreach ($sheets as $name => $sheet) {
   $manifest_path = $root.'/resources/sprite/manifest/'.$name.'.json';
   if (!$args->getArg('force')) {
@@ -226,7 +236,14 @@ foreach ($sheets as $name => $sheet) {
     } else {
       $sheet_name = "sprite-{$name}-X{$scale}.png";
     }
-    $sheet->generateImage("{$webroot}/image/{$sheet_name}", $scale);
+
+    $full_path = "{$webroot}/image/{$sheet_name}";
+    $sheet->generateImage($full_path, $scale);
+
+    if ($have_optipng) {
+      echo "Optimizing...\n";
+      phutil_passthru('optipng -o7 -clobber %s', $full_path);
+    }
   }
 }
 

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -113,6 +113,16 @@ final class CeleritySpriteGenerator {
         'y' => 31,
         'css' => '.phabricator-crumb-divider',
       ),
+      'eye' => array(
+        'x' => 24,
+        'y' => 20,
+        'css' => '.menu-icon-eye',
+      ),
+      'app' => array(
+        'x' => 24,
+        'y' => 20,
+        'css' => '.menu-icon-app',
+      ),
     );
 
     $scales = array(
@@ -177,6 +187,8 @@ final class CeleritySpriteGenerator {
                         'button.grey_active, a.dropdown-open',
       'green-dark' => ', button.green, a.green, a.green:visited',
       'green-light' => ', button.green:active, a.green:active',
+      'dark-menu-label'
+        => ', .phabricator-dark-menu .phabricator-menu-item-type-label',
     );
 
     $sprites = array();
@@ -195,7 +207,8 @@ final class CeleritySpriteGenerator {
     $sheet = $this->buildSheet(
       'gradient',
       PhutilSpriteSheet::TYPE_REPEAT_X,
-      ', button, a.button, a.button:visited, input.inputsubmit');
+      ', button, a.button, a.button:visited, input.inputsubmit, '.
+      '.phabricator-dark-menu .phabricator-menu-item-type-label');
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
     }

src/view/page/menu/PhabricatorMainMenuView.php

@@ -7,7 +7,6 @@ final class PhabricatorMainMenuView extends AphrontView {
   private $controller;
   private $applicationMenu;
 
-
   public function setApplicationMenu(PhabricatorMenuView $application_menu) {
     $this->applicationMenu = $application_menu;
     return $this;
@@ -110,7 +109,9 @@ final class PhabricatorMainMenuView extends AphrontView {
       self::renderSingleView(
         array(
           $this->renderPhabricatorMenuButton($header_id),
-          $this->renderApplicationMenuButton($header_id),
+          $application_menu
+            ? $this->renderApplicationMenuButton($header_id)
+            : null,
           $this->renderPhabricatorLogo(),
           $alerts,
           $phabricator_menu,
@@ -164,7 +165,12 @@ final class PhabricatorMainMenuView extends AphrontView {
           ),
         ),
       ),
-      '');
+      phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-eye',
+        ),
+        ''));
   }
 
   public function renderApplicationMenuButton($header_id) {
@@ -180,7 +186,12 @@ final class PhabricatorMainMenuView extends AphrontView {
           ),
         ),
       ),
-      '');
+      phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-app',
+        ),
+        ''));
   }
 
   private function renderPhabricatorMenu() {
@@ -221,6 +232,23 @@ final class PhabricatorMainMenuView extends AphrontView {
     $search = $this->renderSearch();
     $view->appendChild($search);
 
+    $view
+      ->newLabel(pht('Home'))
+      ->addClass('phabricator-core-item-device');
+    $view->addMenuItem(
+      id(new PhabricatorMenuItemView())
+        ->addClass('phabricator-core-item-device')
+        ->setName(pht('Phabricator Home'))
+        ->setHref('/'));
+    if ($controller->getCurrentApplication()) {
+      $application = $controller->getCurrentApplication();
+      $view->addMenuItem(
+        id(new PhabricatorMenuItemView())
+          ->addClass('phabricator-core-item-device')
+          ->setName(pht('%s Home', $application->getName()))
+          ->setHref($controller->getApplicationURI()));
+    }
+
     if ($core) {
       $view->addMenuItem(
         id(new PhabricatorMenuItemView())

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

@@ -1,4 +1,4 @@
-/**
+<<</**
  * @provides phabricator-main-menu-view
  */
 
@@ -57,8 +57,7 @@
   display: block;
   width: 40px;
   height: 28px;
-  text-align: center;
+  background-color: #22292d;
-  background: #22292d url(/rsrc/image/lines.png) no-repeat 8px 6px;
   border-radius: 6px;
 
   border: 1px solid #111111;
@@ -66,6 +65,14 @@
                     0 1px 0 rgba(255, 255, 255, 0.075);
 }
 
+.phabricator-menu-button-icon {
+  position: absolute;
+  width: 24px;
+  height: 20px;
+  top: 5px;
+  left: 8px;
+}
+
 .phabricator-expand-core-menu {
   left: 10px;
 }
@@ -224,6 +231,20 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
+.device-desktop .phabricator-main-menu-alerts {
+  display: inline-block;
+}
+
+.device-tablet .phabricator-main-menu-alerts,
+.device-phone .phabricator-main-menu-alerts {
+  position: absolute;
+  left: 60px;
+  right: 60px;
+  top: 10px;
+  height: 34px;
+  text-align: center;
+}
+
 .phabricator-main-menu-alert-bubble {
   display: inline-block;
   position: relative;
@@ -240,8 +261,8 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   position: absolute;
   width: 14px;
   height: 14px;
-  top: 4px;
+  top: 5px;
-  left: 5px;
+  left: 6px;
 }
 
 .phabricator-main-menu-alert-count {
@@ -286,17 +307,15 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 .device-tablet .phabricator-dark-menu .phabricator-menu-item-view {
   display: block;
   padding: 4px 0;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: #35383b transparent #282b2d;
 }
 
 .device-phone .phabricator-dark-menu .phabricator-menu-item-type-label,
 .device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label {
   text-transform: uppercase;
   font-size: 11px;
-  background: #151719;
+  background-color: #151719;
-  padding-left: 12px;
+  padding: 0 0 0 12px;
+  height: 24px;
 }
 
 .device-phone .phabricator-dark-menu .phabricator-menu-item-type-spacer,
@@ -304,6 +323,22 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   display: none;
 }
 
+.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label
+  .phabricator-menu-item-name,
+.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label
+  .phabricator-menu-item-name {
+  display: block;
+  padding: 6px 0 0;
+}
+
+.device-phone .phabricator-dark-menu .phabricator-menu-item-type-link,
+.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-link {
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: #34373b transparent #282c2d;
+  background-image: url(/rsrc/image/texture/dark-menu.png);
+}
+
 
 /* - Core Menu -----------------------------------------------------------------
 
@@ -343,7 +378,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 .device-tablet .phabricator-core-menu
    .phabricator-menu-item-type-link .phabricator-menu-item-name {
   margin-left: 40px;
-  line-height: 26px;
+  line-height: 28px;
 }
 
 .device-desktop .phabricator-core-menu {

webroot/rsrc/css/sprite-gradient.css

@@ -3,7 +3,7 @@
  * @generated
  */
 
-.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {
+.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit, .phabricator-dark-menu .phabricator-menu-item-type-label {
   background-image: url(/rsrc/image/sprite-gradient.png);
   background-repeat: repeat-x;
 }
@@ -11,7 +11,7 @@
 @media
 only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-  .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {
+  .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit, .phabricator-dark-menu .phabricator-menu-item-type-label {
     background-image: url(/rsrc/image/sprite-gradient-X2.png);
     background-size: 4px 274px;
   }
@@ -37,7 +37,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: 0px -242px;
 }
 
-.gradient-dark-menu-label {
+.gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label {
   background-position: 0px 0px;
 }
 

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: 47px 101px;
+    background-size: 72px 101px;
   }
 }
 
@@ -40,3 +40,11 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 .phabricator-crumb-divider {
   background-position: 0px -69px;
 }
+
+.menu-icon-eye {
+  background-position: -47px -15px;
+}
+
+.menu-icon-app {
+  background-position: -42px -42px;
+}