Adds status colors to navbar tabs

Summary: Adds the abilit to set a status color of warning or fail to navbar tab lists (for objectheaders)

Test Plan: uiexamples, photoshop

Reviewers: epriestley

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

src/__celerity_resource_map__.php

@@ -3796,7 +3796,7 @@ celerity_register_resource_map(array(
   ),
   'phui-list-view-css' =>
   array(
-    'uri' => '/res/3235e888/rsrc/css/phui/phui-list.css',
+    'uri' => '/res/c748be1f/rsrc/css/phui/phui-list.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4184,7 +4184,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'c98eaabf' =>
+    93500898 =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4233,7 +4233,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/c98eaabf/core.pkg.css',
+      'uri' => '/res/pkg/93500898/core.pkg.css',
       'type' => 'css',
     ),
     '64eeda79' =>
@@ -4425,15 +4425,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => 'c98eaabf',
-    'aphront-error-view-css' => 'c98eaabf',
-    'aphront-list-filter-view-css' => 'c98eaabf',
-    'aphront-pager-view-css' => 'c98eaabf',
-    'aphront-panel-view-css' => 'c98eaabf',
-    'aphront-table-view-css' => 'c98eaabf',
-    'aphront-tokenizer-control-css' => 'c98eaabf',
-    'aphront-tooltip-css' => 'c98eaabf',
-    'aphront-typeahead-control-css' => 'c98eaabf',
+    'aphront-dialog-view-css' => '93500898',
+    'aphront-error-view-css' => '93500898',
+    'aphront-list-filter-view-css' => '93500898',
+    'aphront-pager-view-css' => '93500898',
+    'aphront-panel-view-css' => '93500898',
+    'aphront-table-view-css' => '93500898',
+    'aphront-tokenizer-control-css' => '93500898',
+    'aphront-tooltip-css' => '93500898',
+    'aphront-typeahead-control-css' => '93500898',
     'differential-changeset-view-css' => '4dc2311c',
     'differential-core-view-css' => '4dc2311c',
     'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4447,7 +4447,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '4dc2311c',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'c98eaabf',
+    'global-drag-and-drop-css' => '93500898',
     'inline-comment-summary-css' => '4dc2311c',
     'javelin-aphlict' => '64eeda79',
     'javelin-behavior' => '9564fa17',
@@ -4522,56 +4522,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '9564fa17',
     'javelin-vector' => '9564fa17',
     'javelin-workflow' => '9564fa17',
-    'lightbox-attachment-css' => 'c98eaabf',
+    'lightbox-attachment-css' => '93500898',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => 'c98eaabf',
-    'phabricator-application-launch-view-css' => 'c98eaabf',
+    'phabricator-action-list-view-css' => '93500898',
+    'phabricator-application-launch-view-css' => '93500898',
     'phabricator-busy' => '64eeda79',
     'phabricator-content-source-view-css' => '4dc2311c',
-    'phabricator-core-css' => 'c98eaabf',
-    'phabricator-crumbs-view-css' => 'c98eaabf',
+    'phabricator-core-css' => '93500898',
+    'phabricator-crumbs-view-css' => '93500898',
     'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
     'phabricator-dropdown-menu' => '64eeda79',
     'phabricator-file-upload' => '64eeda79',
-    'phabricator-filetree-view-css' => 'c98eaabf',
-    'phabricator-flag-css' => 'c98eaabf',
+    'phabricator-filetree-view-css' => '93500898',
+    'phabricator-flag-css' => '93500898',
     'phabricator-hovercard' => '64eeda79',
-    'phabricator-jump-nav' => 'c98eaabf',
+    'phabricator-jump-nav' => '93500898',
     'phabricator-keyboard-shortcut' => '64eeda79',
     'phabricator-keyboard-shortcut-manager' => '64eeda79',
-    'phabricator-main-menu-view' => 'c98eaabf',
+    'phabricator-main-menu-view' => '93500898',
     'phabricator-menu-item' => '64eeda79',
-    'phabricator-nav-view-css' => 'c98eaabf',
+    'phabricator-nav-view-css' => '93500898',
     'phabricator-notification' => '64eeda79',
-    'phabricator-notification-css' => 'c98eaabf',
-    'phabricator-notification-menu-css' => 'c98eaabf',
+    'phabricator-notification-css' => '93500898',
+    'phabricator-notification-menu-css' => '93500898',
     'phabricator-object-selector-css' => '4dc2311c',
     'phabricator-phtize' => '64eeda79',
     'phabricator-prefab' => '64eeda79',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-property-list-view-css' => 'c98eaabf',
-    'phabricator-remarkup-css' => 'c98eaabf',
+    'phabricator-property-list-view-css' => '93500898',
+    'phabricator-remarkup-css' => '93500898',
     'phabricator-shaped-request' => '5e9e5c4e',
-    'phabricator-side-menu-view-css' => 'c98eaabf',
-    'phabricator-standard-page-view' => 'c98eaabf',
-    'phabricator-tag-view-css' => 'c98eaabf',
+    'phabricator-side-menu-view-css' => '93500898',
+    'phabricator-standard-page-view' => '93500898',
+    'phabricator-tag-view-css' => '93500898',
     'phabricator-textareautils' => '64eeda79',
     'phabricator-tooltip' => '64eeda79',
-    'phabricator-transaction-view-css' => 'c98eaabf',
-    'phabricator-zindex-css' => 'c98eaabf',
-    'phui-button-css' => 'c98eaabf',
-    'phui-form-css' => 'c98eaabf',
-    'phui-form-view-css' => 'c98eaabf',
-    'phui-header-view-css' => 'c98eaabf',
-    'phui-icon-view-css' => 'c98eaabf',
-    'phui-list-view-css' => 'c98eaabf',
-    'phui-object-item-list-view-css' => 'c98eaabf',
-    'phui-spacing-css' => 'c98eaabf',
-    'sprite-apps-large-css' => 'c98eaabf',
-    'sprite-gradient-css' => 'c98eaabf',
-    'sprite-icons-css' => 'c98eaabf',
-    'sprite-menu-css' => 'c98eaabf',
-    'sprite-status-css' => 'c98eaabf',
-    'syntax-highlighting-css' => 'c98eaabf',
+    'phabricator-transaction-view-css' => '93500898',
+    'phabricator-zindex-css' => '93500898',
+    'phui-button-css' => '93500898',
+    'phui-form-css' => '93500898',
+    'phui-form-view-css' => '93500898',
+    'phui-header-view-css' => '93500898',
+    'phui-icon-view-css' => '93500898',
+    'phui-list-view-css' => '93500898',
+    'phui-object-item-list-view-css' => '93500898',
+    'phui-spacing-css' => '93500898',
+    'sprite-apps-large-css' => '93500898',
+    'sprite-gradient-css' => '93500898',
+    'sprite-icons-css' => '93500898',
+    'sprite-menu-css' => '93500898',
+    'sprite-status-css' => '93500898',
+    'syntax-highlighting-css' => '93500898',
   ),
 ));

src/applications/uiexample/examples/PHUIListExample.php

@@ -150,6 +150,45 @@ final class PHUIListExample extends PhabricatorUIExample {
       ->setHref('#')
       ->setType(PHUIListItemView::TYPE_LINK);
 
+        $item1 = id(new PHUIListItemView())
+      ->setName('Installation')
+      ->setHref('#')
+      ->setSelected(true)
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item2 = id(new PHUIListItemView())
+      ->setName('Webserver Config')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $details1 = id(new PHUIListItemView())
+      ->setName('Details')
+      ->setHref('#')
+      ->setSelected(true)
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $details2 = id(new PHUIListItemView())
+      ->setName('Lint (OK)')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $details3 = id(new PHUIListItemView())
+      ->setName('Unit (5/5)')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $details4 = id(new PHUIListItemView())
+      ->setName('Lint (Warn)')
+      ->setHref('#')
+      ->setStatusColor(PHUIListItemView::STATUS_WARN)
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $details5 = id(new PHUIListItemView())
+      ->setName('Unit (3/5)')
+      ->setHref('#')
+      ->setStatusColor(PHUIListItemView::STATUS_FAIL)
+      ->setType(PHUIListItemView::TYPE_LINK);
+
     $topnav = id(new PHUIListView())
       ->setType(PHUIListView::NAVBAR_LIST)
       ->addMenuItem($home)
@@ -158,6 +197,14 @@ final class PHUIListExample extends PhabricatorUIExample {
       ->addMenuItem($item3)
       ->addMenuItem($item4);
 
+    $statustabs = id(new PHUIListView())
+      ->setType(PHUIListView::NAVBAR_LIST)
+      ->addMenuItem($details1)
+      ->addMenuItem($details2)
+      ->addMenuItem($details3)
+      ->addMenuItem($details4)
+      ->addMenuItem($details5);
+
     $layout1 =
       array(
         id(new PHUIBoxView())
@@ -187,6 +234,13 @@ final class PHUIListExample extends PhabricatorUIExample {
           ->addMargin(PHUI::MARGIN_MEDIUM)
           ->setShadow(true));
 
+    $layout5 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($statustabs)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->setShadow(true));
+
     $head1 = id(new PHUIHeaderView())
       ->setHeader(pht('Unstyled'));
 
@@ -199,6 +253,9 @@ final class PHUIListExample extends PhabricatorUIExample {
     $head4 = id(new PHUIHeaderView())
       ->setHeader(pht('Action Menu'));
 
+    $head5 = id(new PHUIHeaderView())
+      ->setHeader(pht('Status Tabs'));
+
     $wrap1 = id(new PHUIBoxView())
       ->appendChild($layout1)
       ->addMargin(PHUI::MARGIN_LARGE);
@@ -215,6 +272,10 @@ final class PHUIListExample extends PhabricatorUIExample {
       ->appendChild($layout4)
       ->addMargin(PHUI::MARGIN_LARGE);
 
+    $wrap5 = id(new PHUIBoxView())
+      ->appendChild($layout5)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
     return phutil_tag(
       'div',
         array(
@@ -227,6 +288,8 @@ final class PHUIListExample extends PhabricatorUIExample {
           $wrap2,
           $head3,
           $wrap3,
+          $head5,
+          $wrap5,
           $head4,
           $wrap4
         ));

src/view/phui/PHUIListItemView.php

@@ -10,6 +10,9 @@ final class PHUIListItemView extends AphrontTagView {
   const TYPE_DIVIDER  = 'type-divider';
   const TYPE_ICON     = 'type-icon';
 
+  const STATUS_WARN   = 'phui-list-item-warn';
+  const STATUS_FAIL   = 'phui-list-item-fail';
+
   private $name;
   private $href;
   private $type = self::TYPE_LINK;
@@ -19,6 +22,7 @@ final class PHUIListItemView extends AphrontTagView {
   private $selected;
   private $disabled;
   private $renderNameAsTooltip;
+  private $statusColor;
 
   public function setRenderNameAsTooltip($render_name_as_tooltip) {
     $this->renderNameAsTooltip = $render_name_as_tooltip;
@@ -92,6 +96,11 @@ final class PHUIListItemView extends AphrontTagView {
     return $this->isExternal;
   }
 
+  public function setStatusColor($color) {
+    $this->statusColor = $color;
+    return $this;
+  }
+
   protected function getTagName() {
     return 'li';
   }
@@ -109,6 +118,10 @@ final class PHUIListItemView extends AphrontTagView {
       $classes[] = 'phui-list-item-selected';
     }
 
+    if ($this->statusColor) {
+      $classes[] = $this->statusColor;
+    }
+
     return array(
       'class' => $classes,
     );

webroot/rsrc/css/phui/phui-list.css

@@ -127,3 +127,37 @@
   float: none;
   border: none;
 }
+
+/* - Status Colors -------------------------------------------------------------
+
+  Colors for navbars
+
+*/
+
+.phui-list-item-warn .phui-list-item-href {
+  color: #bc7837;
+}
+
+.phui-list-item-fail .phui-list-item-href {
+  color: {$red};
+}
+
+.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
+.phui-list-item-warn .phui-list-item-href:hover {
+  background: {$lightyellow};
+  color: #bc7837;
+}
+
+.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
+.phui-list-item-fail .phui-list-item-href:hover {
+  background: {$lightred};
+  color: {$red};
+}
+
+.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
+  background: #fcf0bd;
+}
+
+.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
+  background: #f5d3d0;
+}