Redesign sidenav, crumbs

resources/sprite/manifest/gradient.json

@@ -16,11 +16,6 @@
       "rule" : ".gradient-dark-grey-header",
       "hash" : "e8762dd2849410a7e4fba8f972f946ff"
     },
-    "gradient-dark-menu-label"  : {
-      "name" : "gradient-dark-menu-label",
-      "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label",
-      "hash" : "8a11efa454f788aa2419ed8c745dece2"
-    },
     "gradient-green-header"     : {
       "name" : "gradient-green-header",
       "rule" : ".gradient-green-header",
@@ -36,11 +31,6 @@
       "rule" : ".gradient-lightblue-header",
       "hash" : "e7753a6ce63c6822a559266eef9e255b"
     },
-    "gradient-menu-label"       : {
-      "name" : "gradient-menu-label",
-      "rule" : ".gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label",
-      "hash" : "e2aa8e74c3b2c0b18de34d336d318b5c"
-    },
     "gradient-red-header"       : {
       "name" : "gradient-red-header",
       "rule" : ".gradient-red-header",
@@ -55,6 +45,6 @@
   "scales"  : [
     1
   ],
-  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n\n",
+  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n\n",
   "type"    : "repeat-x"
 }

src/applications/home/controller/PhabricatorHomeController.php

@@ -111,10 +111,6 @@ abstract class PhabricatorHomeController extends PhabricatorController {
               idx($status, get_class($application), array()))
             ->setUser($user);
 
-          if ($tile_display == PhabricatorApplication::TILE_FULL) {
-            $tile->setFullWidth(true);
-          }
-
           $tiles[] = $tile;
         }
 

src/applications/meta/view/PhabricatorApplicationLaunchView.php

@@ -4,12 +4,6 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
 
   private $application;
   private $status;
-  private $fullWidth;
-
-  public function setFullWidth($full_width) {
-    $this->fullWidth = $full_width;
-    return $this;
-  }
 
   public function setApplication(PhabricatorApplication $application) {
     $this->application = $application;
@@ -48,14 +42,12 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
           "\xCE\xB2");
       }
 
-      if ($this->fullWidth) {
+      $content[] = phutil_tag(
-        $content[] = phutil_tag(
+        'span',
-          'span',
+        array(
-          array(
+          'class' => 'phabricator-application-launch-description',
-            'class' => 'phabricator-application-launch-description',
+        ),
-          ),
+        $application->getShortDescription());
-          $application->getShortDescription());
-      }
 
       $counts = array();
       $text = array();
@@ -116,7 +108,7 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
       } else {
         $icon = $application->getIconName();
         $classes[] = 'sprite-apps-large';
-        $classes[] = 'apps-'.$icon.'-light-large';
+        $classes[] = 'apps-'.$icon.'-dark-large';
       }
 
       $icon = phutil_tag(
@@ -130,21 +122,13 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
 
     $classes = array();
     $classes[] = 'phabricator-application-launch-container';
-    if ($this->fullWidth) {
+    $classes[] = 'application-tile-full';
-      $classes[] = 'application-tile-full';
-    }
-
-    $title = null;
-    if ($application && !$this->fullWidth) {
-      $title = $application->getShortDescription();
-    }
 
     $app_button = phutil_tag(
       $application ? 'a' : 'div',
       array(
         'class' => implode(' ', $classes),
         'href'  => $application ? $application->getBaseURI() : null,
-        'title' => $title,
       ),
       array(
         $icon,

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -453,9 +453,7 @@ final class CeleritySpriteGenerator {
     $template = new PhutilSprite();
 
     $unusual_heights = array(
-      'dark-menu-label' => 25,
       'breadcrumbs'     => 31,
-      'menu-label'      => 24,
       'red-header'      => 70,
       'blue-header'     => 70,
       'green-header'    => 70,
@@ -465,20 +463,13 @@ final class CeleritySpriteGenerator {
       'lightblue-header' => 240,
     );
 
-    $extra_css = array(
-      'dark-menu-label' =>
-        ', .phabricator-dark-menu .phui-list-item-type-label',
-      'menu-label' =>
-        ', .phabricator-side-menu .phui-list-item-type-label',
-    );
-
     $sprites = array();
     foreach ($gradients as $gradient) {
       $path = $this->getPath('gradients/'.$gradient.'.png');
       $sprite = id(clone $template)
         ->setName('gradient-'.$gradient)
         ->setSourceFile($path)
-        ->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient));
+        ->setTargetCSS('.gradient-'.$gradient);
 
       $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
 
@@ -488,9 +479,7 @@ final class CeleritySpriteGenerator {
     $sheet = $this->buildSheet(
       'gradient',
       false,
-      PhutilSpriteSheet::TYPE_REPEAT_X,
+      PhutilSpriteSheet::TYPE_REPEAT_X);
-      ', .phabricator-dark-menu .phui-list-item-type-label, '.
-      '.phabricator-side-menu .phui-list-item-type-label');
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
     }

webroot/rsrc/css/aphront/phabricator-nav-view.css

@@ -22,9 +22,9 @@
      then draw with the texture after the action completes. Just make the
      element extend off the bottom of the screen to prevent this. */
   bottom: -480px;
-  width: 205px;
+  width: 204px;
-  background: #303539;
+  background: rgba(205, 207, 211, 0.5);
-  box-shadow: inset -3px 0 3px rgba(0, 0, 0, 0.5);
+  border-right: 1px solid rgba(205, 207, 211, 1);
 }
 
 .phabricator-nav-column-background,
@@ -49,7 +49,6 @@
   position: absolute;
   left: 0;
   white-space: nowrap;
-
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -82,16 +81,6 @@
   margin-left: 205px;
 }
 
-.phabricator-side-menu-home .phabricator-nav-column-background,
-.phabricator-side-menu-home .phabricator-nav-local {
-  width: 240px;
-}
-
-.device-desktop .phabricator-side-menu-home .phabricator-nav-content,
-.device-tablet .phabricator-side-menu-home .phabricator-nav-content {
-  margin-left: 240px;
-}
-
 .device-phone .phabricator-side-menu-home .phabricator-nav-content {
   display: none;
 }

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

@@ -14,7 +14,6 @@
   background: #2d3236;
   background-repeat: repeat-x;
   position: relative;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
   min-height: 44px;
 }
 

webroot/rsrc/css/application/base/phabricator-application-launch-view.css

@@ -25,21 +25,12 @@ a.phabricator-application-launch-container,
 div.phabricator-application-launch-container {
   display: block;
   float: left;
-  width: 78px;
-  height: 66px;
   overflow: hidden;
   position: relative;
-  border: 1px solid #1c1e22;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
-}
-
-a.application-tile-full {
   width: 100%;
-  height: 48px;
+  height: 46px;
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
 }
 
 .device-phone div.phabricator-application-launch-container {
@@ -49,52 +40,40 @@ a.application-tile-full {
 .phabricator-application-launch-icon {
   display: block;
   position: absolute;
-  left: 25px;
-  top: 10px;
   width: 28px;
   height: 28px;
-}
+  top: 8px;
-
+  left: 8px;
-.application-tile-full .phabricator-application-launch-icon {
-  top: 10px;
-  left: 10px;
 }
 
 .device-desktop a.phabricator-application-launch-container:hover {
-  background-color: #1e2225;
+  background-color: #C5C8CF;
   text-decoration: none;
 }
 
 .phabricator-application-launch-name {
   display: block;
-  margin-top: 42px;
   font-weight: bold;
-  font-size: 11px;
+  color: {$darkbluetext};
-  text-align: center;
-  color: #ffffff;
-  text-shadow: 0px 1px 1px #000000;
-}
-
-.application-tile-full .phabricator-application-launch-name {
   font-size: 13px;
-  margin-top: 9px;
+  margin-top: 7px;
-  text-align: left;
+  margin-left: 44px;
-  margin-left: 48px;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
-
 }
 
-.application-tile-full .phabricator-application-launch-description {
+.phabricator-application-launch-description {
-  color: #bfbfbf;
+  color: {$darkbluetext};
   font-size: 11px;
   margin-top: 24px;
-  margin-left: 48px;
+  margin-left: 44px;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
 }
 
 .phabricator-application-beta {
   position: absolute;
   top: 4px;
   left: 4px;
-  color: #fff;
+  color: {$bluetext};
   font-size: 11px;
 }
 
@@ -102,20 +81,20 @@ a.application-tile-full {
   position: absolute;
   top: 6px;
   right: 4px;
-  color: white;
+  color: {$darkbluetext};
   font-weight: bold;
   font-size: 11px;
 }
 
 .phabricator-application-attention-count {
-  background-color: #1e2225;
+  background-color: rgba(0,0,0,.1);
-  color: {$yellow};
+  color: {$orange};
   border-radius: 2px;
   padding: 1px 6px 2px;
 }
 
 .phabricator-application-warning-count {
-  background-color: #1e2225;
+  background-color: rgba(0,0,0,.1);
   border-radius: 2px;
   padding: 1px 6px 2px;
 }

webroot/rsrc/css/layout/phabricator-crumbs-view.css

@@ -3,14 +3,12 @@
  */
 
 .phabricator-crumbs-view {
-  background-color: #d8dce2;
+  background-color: #ebecee;
+  background-image: none !important;
   height: 31px;
   overflow: hidden;
   vertical-align: top;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid rgba(205, 207, 211, 1);
-
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-
   /* TODO: Position this over the slider for Differential's file tree view.
      Remove this once that gets sorted out. */
   position: relative;

webroot/rsrc/css/layout/phabricator-side-menu-view.css

@@ -7,52 +7,36 @@
   white-space: nowrap;
   text-decoration: none;
   font-size: 13px;
+  -webkit-font-smoothing: antialiased;
 }
 
 .phabricator-side-menu .phui-list-item-href {
   display: block;
   padding: 6px 8px 6px 24px;
-  color: #e1e2e5;
+  color: {$darkbluetext};
-  text-shadow: rgba(0, 0, 0, 1) 0px 1px 1px;
 }
 
 .phabricator-side-menu .phui-list-item-selected,
 .device-desktop .phui-side-menu
  .phui-list-item-selected.phui-list-item-href:hover {
-  background-color: #305c85;
+  background-color: #C5C8CF;
-  color: #fff;
+  border-left: 4px solid {$blue};
+}
+
+.phabricator-side-menu .phui-list-item-selected .phui-list-item-href {
+  padding-left: 20px;
 }
 
 .phabricator-side-menu .phui-list-item-type-label {
   padding: 6px 8px 4px 12px;
-  color: #f7f7f7;
+  color: {$darkbluetext};
   text-transform: uppercase;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: bold;
   border-style: solid;
-  background-color: #000;
-}
-
-.phabricator-dark-menu .phui-list-item-type-button,
-.phabricator-side-menu .phui-list-item-type-button {
-  width: 50%;
-  padding: 5px 8px;
-  display: block;
-  border-radius: 4px;
-  border: 2px solid #000;
-  margin: 10px auto;
-  color: #fff;
-  font-size: 14px;
-  text-shadow: 0px 1px 1px #000000;
-  font-weight: bold;
-  text-align: center;
-}
-
-.phabricator-side-menu .phui-list-item-type-button:hover {
-  background-color: #1e2225;
 }
 
 .device-desktop .phabricator-side-menu a.phui-list-item-href:hover {
   text-decoration: none;
-  background-color: #1e2225;
+  background-color: #C5C8CF;
 }

webroot/rsrc/css/sprite-gradient.css

@@ -3,7 +3,7 @@
  * @generated
  */
 
-.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {
+.sprite-gradient {
   background-image: url(/rsrc/image/sprite-gradient.png);
   background-repeat: repeat-x;
 }
@@ -12,41 +12,33 @@
 
 
 .gradient-blue-header {
-  background-position: 0px -83px;
+  background-position: 0px -32px;
 }
 
 .gradient-breadcrumbs {
-  background-position: 0px -51px;
-}
-
-.gradient-dark-grey-header {
-  background-position: 0px -154px;
-}
-
-.gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label {
-  background-position: 0px -25px;
-}
-
-.gradient-green-header {
-  background-position: 0px -225px;
-}
-
-.gradient-grey-header {
-  background-position: 0px -296px;
-}
-
-.gradient-lightblue-header {
-  background-position: 0px -509px;
-}
-
-.gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label {
   background-position: 0px 0px;
 }
 
+.gradient-dark-grey-header {
+  background-position: 0px -103px;
+}
+
+.gradient-green-header {
+  background-position: 0px -174px;
+}
+
+.gradient-grey-header {
+  background-position: 0px -245px;
+}
+
+.gradient-lightblue-header {
+  background-position: 0px -458px;
+}
+
 .gradient-red-header {
-  background-position: 0px -367px;
+  background-position: 0px -316px;
 }
 
 .gradient-yellow-header {
-  background-position: 0px -438px;
+  background-position: 0px -387px;
 }