Use shinier menu icons

Summary:
  - Use @chad's nice gradient overlay icons.
  - Show selected states.
  - Use profile picture for profile item (not sure about this treatment?)
  - Workflow the logout link

Test Plan: Will add screenshots.

Reviewers: alanh, btrahan, chad

Reviewed By: btrahan

CC: aran

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

src/applications/auth/application/PhabricatorApplicationAuth.php

@@ -28,12 +28,17 @@ final class PhabricatorApplicationAuth extends PhabricatorApplication {
 
     $items = array();
 
-    if ($user->isLoggedIn()) {
-      require_celerity_resource('phabricator-glyph-css');
+    if ($controller instanceof PhabricatorLogoutController) {
+      $class = 'main-menu-item-icon-logout-selected';
+    } else {
+      $class = 'main-menu-item-icon-logout';
+    }
 
+    if ($user->isLoggedIn()) {
       $item = new PhabricatorMainMenuIconView();
       $item->setName(pht('Log Out'));
-      $item->addClass('glyph glyph-logout');
+      $item->addClass('main-menu-item-icon '.$class);
+      $item->setWorkflow(true);
       $item->setHref('/logout/');
       $item->setSortOrder(1.0);
       $items[] = $item;

src/applications/people/application/PhabricatorApplicationPeople.php

@@ -50,11 +50,21 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
 
     $items = array();
 
+    if (($controller instanceof PhabricatorPeopleProfileController) &&
+        ($controller->getProfileUser()) &&
+        ($controller->getProfileUser()->getPHID() == $user->getPHID())) {
+      $class = 'main-menu-item-icon-profile-selected';
+    } else {
+      $class = 'main-menu-item-icon-profile-not-selected';
+    }
+
     if ($user->isLoggedIn()) {
-      require_celerity_resource('phabricator-glyph-css');
+      $image = $user->loadProfileImageURI();
+
       $item = new PhabricatorMainMenuIconView();
       $item->setName($user->getUsername());
-      $item->addClass('glyph glyph-profile');
+      $item->addClass('main-menu-item-icon-profile '.$class);
+      $item->addStyle('background-image: url('.$image.')');
       $item->setHref('/p/'.$user->getUsername().'/');
       $item->setSortOrder(0.0);
       $items[] = $item;

src/applications/people/application/PhabricatorApplicationSettings.php

@@ -44,12 +44,16 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
 
     $items = array();
 
-    if ($user->isLoggedIn()) {
-      require_celerity_resource('phabricator-glyph-css');
+    if ($controller instanceof PhabricatorUserSettingsController) {
+      $class = 'main-menu-item-icon-settings-selected';
+    } else {
+      $class = 'main-menu-item-icon-settings';
+    }
 
+    if ($user->isLoggedIn()) {
       $item = new PhabricatorMainMenuIconView();
       $item->setName(pht('Settings'));
-      $item->addClass('glyph glyph-settings');
+      $item->addClass('main-menu-item-icon '.$class);
       $item->setHref('/settings/');
       $item->setSortOrder(0.90);
       $items[] = $item;

src/applications/people/controller/PhabricatorPeopleProfileController.php

@@ -21,12 +21,17 @@ final class PhabricatorPeopleProfileController
 
   private $username;
   private $page;
+  private $profileUser;
 
   public function willProcessRequest(array $data) {
     $this->username = idx($data, 'username');
     $this->page = idx($data, 'page');
   }
 
+  public function getProfileUser() {
+    return $this->profileUser;
+  }
+
   public function processRequest() {
 
     $viewer = $this->getRequest()->getUser();
@@ -38,6 +43,8 @@ final class PhabricatorPeopleProfileController
       return new Aphront404Response();
     }
 
+    $this->profileUser = $user;
+
     require_celerity_resource('phabricator-profile-css');
 
     $profile = id(new PhabricatorUserProfile())->loadOneWhere(

src/view/page/menu/PhabricatorMainMenuIconView.php

@@ -22,12 +22,19 @@ final class PhabricatorMainMenuIconView extends AphrontView {
   private $href;
   private $name;
   private $sortOrder = 0.5;
+  private $workflow;
+  private $style;
 
   public function setName($name) {
     $this->name = $name;
     return $this;
   }
 
+  public function setWorkflow($workflow) {
+    $this->workflow = $workflow;
+    return $this;
+  }
+
   public function getName() {
     return $this->name;
   }
@@ -46,6 +53,11 @@ final class PhabricatorMainMenuIconView extends AphrontView {
     return $this;
   }
 
+  public function addStyle($style) {
+    $this->style = $style;
+    return $this;
+  }
+
   /**
    * Provide a float, where 0.0 is the profile item and 1.0 is the logout
    * item. Normally you should pick something between the two.
@@ -82,6 +94,8 @@ final class PhabricatorMainMenuIconView extends AphrontView {
       array(
         'href' => $href,
         'class' => implode(' ', $classes),
+        'style' => $this->style,
+        'sigil' => $this->workflow ? 'workflow' : null,
       ),
       '');
 

webroot/rsrc/css/application/base/glyph.css

@@ -1,50 +0,0 @@
-/**
- * @provides phabricator-glyph-css
- */
-
-.glyph {
-  background-size: 26px auto;
-  background-image: url(/rsrc/image/glyph_sprite.png);
-}
-
-@media only screen and (min-device-pixel-ratio: 2.0) {
-  .glyph {
-    background-image: url(/rsrc/image/glyph_sprite2x.png);
-  }
-}
-
-.glyph-profile {
-  background-position: 0 0;
-}
-
-.glyph-profile-active {
-  background-position: 0 -26px;
-}
-
-.glyph-profile:hover {
-  background-position: 0 -130px;
-}
-
-.glyph-settings {
-  background-position: 0px -26px;
-}
-
-.glyph-settings-active {
-  background-position: 0 0;
-}
-
-.glyph-settings:hover {
-  background-position: 0 -156px;
-}
-
-.glyph-logout {
-  background-position: 0 -52px;
-}
-
-.glyph-logout-active {
-  background-position: 0 -52px;
-}
-
-.glyph-logout:hover {
-  background-position: 0 -182px;
-}

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

@@ -146,7 +146,7 @@
 .phabricator-main-menu-icon {
   width: 26px;
   height: 26px;
-  margin: 9px 4px;
+  margin: 9px 6px;
   display: inline-block;
   background-repeat: no-repeat;
 }
@@ -173,6 +173,57 @@
   position: absolute;
 }
 
+.main-menu-item-icon {
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+}
+
+.main-menu-item-icon-settings {
+  background-image: url(/rsrc/image/menu/icon_settings.png);
+}
+
+.main-menu-item-icon-settings:hover {
+  background-image: url(/rsrc/image/menu/icon_settings_hover.png);
+}
+
+.main-menu-item-icon-settings-selected {
+  background-image: url(/rsrc/image/menu/icon_settings_selected.png);
+}
+
+.main-menu-item-icon-logout {
+  background-image: url(/rsrc/image/menu/icon_logout.png);
+}
+
+.main-menu-item-icon-logout:hover {
+  background-image: url(/rsrc/image/menu/icon_logout_hover.png);
+}
+
+.main-menu-item-icon-logout-selected {
+  background-image: url(/rsrc/image/menu/icon_logout_selected.png);
+}
+
+.main-menu-item-icon-profile {
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+}
+
+.device-desktop .main-menu-item-icon-profile {
+  background-position: 12px 9px;
+  margin: 0 6px;
+  padding: 0 12px;
+  height: 44px;
+  border-width: 0 1px;
+  border-style: solid;
+  border-color: #44494d;
+}
+
+.main-menu-item-icon-profile-not-selected:hover {
+  background-color: #44494d;
+}
+
+.main-menu-item-icon-profile-selected {
+  background-color: #44494d;
+}
 
 /* - Search --------------------------------------------------------------------