[Redesign] ObjectBoxView colors

Summary: Removes setting colors on the headers and adds setting colors on an ObjectBoxView (which sets the headers). Ref T8099

Test Plan:
Tested each color, fixed workboard colors, added color to important setup issues.

{F410658}

{F410659}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '420ee9bd',
+    'core.pkg.css' => 'bd0be091',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -128,7 +128,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => 'b995182d',
     'rsrc/css/phui/phui-crumbs-view.css' => 'aeff7a21',
-    'rsrc/css/phui/phui-document.css' => '08059961',
+    'rsrc/css/phui/phui-document.css' => '27a9bb7e',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '489a1341',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
@@ -139,7 +139,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33595731',
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
-    'rsrc/css/phui/phui-object-box.css' => '23e36d6b',
+    'rsrc/css/phui/phui-object-box.css' => '8c1cf7c0',
     'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f',
     'rsrc/css/phui/phui-pinboard-view.css' => 'eaab2b1b',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
@@ -150,7 +150,7 @@ return array(
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
     'rsrc/css/phui/phui-timeline-view.css' => 'a85542c8',
     'rsrc/css/phui/phui-workboard-view.css' => '38446bc3',
-    'rsrc/css/phui/phui-workpanel-view.css' => '266038ce',
+    'rsrc/css/phui/phui-workpanel-view.css' => 'e6435408',
     'rsrc/css/sprite-gradient.css' => '4bdb98a7',
     'rsrc/css/sprite-login.css' => 'a3526809',
     'rsrc/css/sprite-main-header.css' => '28d01b0b',
@@ -761,7 +761,7 @@ return array(
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => '75e6a2ee',
     'phui-crumbs-view-css' => 'aeff7a21',
-    'phui-document-view-css' => '08059961',
+    'phui-document-view-css' => '27a9bb7e',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '489a1341',
@@ -774,7 +774,7 @@ return array(
     'phui-info-view-css' => '33595731',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => 'e448b6ba',
-    'phui-object-box-css' => '23e36d6b',
+    'phui-object-box-css' => '8c1cf7c0',
     'phui-object-item-list-view-css' => '4be0645f',
     'phui-pinboard-view-css' => 'eaab2b1b',
     'phui-property-list-view-css' => 'd2d143ea',
@@ -785,7 +785,7 @@ return array(
     'phui-text-css' => 'cf019f54',
     'phui-timeline-view-css' => 'a85542c8',
     'phui-workboard-view-css' => '38446bc3',
-    'phui-workpanel-view-css' => '266038ce',
+    'phui-workpanel-view-css' => 'e6435408',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
     'phuix-dropdown-menu' => 'bd4c8dca',

src/applications/config/controller/PhabricatorConfigIssueListController.php

@@ -27,6 +27,7 @@ final class PhabricatorConfigIssueListController
     if ($important) {
       $setup_issues[] = id(new PHUIObjectBoxView())
         ->setHeaderText(pht('Important Setup Issues'))
+        ->setColor(PHUIObjectBoxView::COLOR_RED)
         ->appendChild($important);
     }
 

src/view/phui/PHUIHeaderView.php

@@ -10,7 +10,6 @@ final class PHUIHeaderView extends AphrontTagView {
   private $image;
   private $imageURL = null;
   private $subheader;
-  private $headerColor;
   private $headerIcon;
   private $noBackground;
   private $bleedHeader;
@@ -61,11 +60,6 @@ final class PHUIHeaderView extends AphrontTagView {
     return $this;
   }
 
-  public function setHeaderColor($color) {
-    $this->headerColor = $color;
-    return $this;
-  }
-
   public function setHeaderIcon($icon) {
     $this->headerIcon = $icon;
     return $this;
@@ -153,10 +147,6 @@ final class PHUIHeaderView extends AphrontTagView {
       $classes[] = 'phui-bleed-header';
     }
 
-    if ($this->headerColor) {
-      $classes[] = 'phui-header-'.$this->headerColor;
-    }
-
     if ($this->properties || $this->policyObject || $this->subheader) {
       $classes[] = 'phui-header-tall';
     }

src/view/phui/PHUIObjectBoxView.php

@@ -3,7 +3,7 @@
 final class PHUIObjectBoxView extends AphrontView {
 
   private $headerText;
-  private $headerColor;
+  private $color;
   private $formErrors = null;
   private $formSaved = false;
   private $infoView;
@@ -20,6 +20,11 @@ final class PHUIObjectBoxView extends AphrontView {
   private $tabs = array();
   private $propertyLists = array();
 
+  const COLOR_RED = 'red';
+  const COLOR_BLUE = 'blue';
+  const COLOR_GREEN = 'green';
+  const COLOR_YELLOW = 'yellow';
+
   public function addSigil($sigil) {
     $this->sigils[] = $sigil;
     return $this;
@@ -87,8 +92,8 @@ final class PHUIObjectBoxView extends AphrontView {
     return $this;
   }
 
-  public function setHeaderColor($color) {
+  public function setColor($color) {
-    $this->headerColor = $color;
+    $this->color = $color;
     return $this;
   }
 
@@ -154,19 +159,10 @@ final class PHUIObjectBoxView extends AphrontView {
 
     require_celerity_resource('phui-object-box-css');
 
-    $header_color = null;
-    if ($this->headerColor) {
-      $header_color = $this->headerColor;
-    }
-
-    $header = null;
-    if ($this->header) {
     $header = $this->header;
-      $header->setHeaderColor($header_color);
+    if ($this->headerText) {
-    } else if ($this->headerText) {
       $header = id(new PHUIHeaderView())
-        ->setHeader($this->headerText)
+        ->setHeader($this->headerText);
-        ->setHeaderColor($header_color);
     }
 
     if ($this->actionListID) {
@@ -293,6 +289,10 @@ final class PHUIObjectBoxView extends AphrontView {
       ->addMargin(PHUI::MARGIN_LARGE_RIGHT)
       ->addClass('phui-object-box');
 
+    if ($this->color) {
+      $content->addClass('phui-object-box-'.$this->color);
+    }
+
     if ($this->tabs) {
       $content->addSigil('phui-object-box');
       $content->setMetadata(
@@ -305,8 +305,6 @@ final class PHUIObjectBoxView extends AphrontView {
       $content->addClass('phui-object-box-flush');
     }
 
-    $content->addClass('phui-object-box-'.$header_color);
-
     foreach ($this->sigils as $sigil) {
       $content->addSigil($sigil);
     }

src/view/phui/PHUIWorkpanelView.php

@@ -6,7 +6,6 @@ final class PHUIWorkpanelView extends AphrontTagView {
   private $header;
   private $subheader = null;
   private $footerAction;
-  private $headerColor;
   private $headerActions = array();
   private $headerTag;
   private $headerIcon;
@@ -40,11 +39,6 @@ final class PHUIWorkpanelView extends AphrontTagView {
     return $this;
   }
 
-  public function setHeaderColor($header_color) {
-    $this->headerColor = $header_color;
-    return $this;
-  }
-
   public function addHeaderAction(PHUIIconView $action) {
     $this->headerActions[] = $action;
     return $this;
@@ -79,8 +73,7 @@ final class PHUIWorkpanelView extends AphrontTagView {
 
     $header = id(new PHUIHeaderView())
       ->setHeader($this->header)
-      ->setSubheader($this->subheader)
+      ->setSubheader($this->subheader);
-      ->setHeaderColor($this->headerColor);
 
     if ($this->headerIcon) {
       $header->setHeaderIcon($this->headerIcon);
@@ -94,8 +87,6 @@ final class PHUIWorkpanelView extends AphrontTagView {
       $header->addActionIcon($action);
     }
 
-    $classes[] = 'phui-workpanel-'.$this->headerColor;
-
     $body = phutil_tag(
       'div',
         array(

src/view/widget/hovercard/PhabricatorHovercardView.php

@@ -17,7 +17,6 @@ final class PhabricatorHovercardView extends AphrontView {
   private $fields = array();
   private $actions = array();
 
-  private $color = 'lightblue';
   public function setObjectHandle(PhabricatorObjectHandle $handle) {
     $this->handle = $handle;
     return $this;
@@ -55,11 +54,6 @@ final class PhabricatorHovercardView extends AphrontView {
     return $this;
   }
 
-  public function setColor($color) {
-    $this->color = $color;
-    return $this;
-  }
-
   public function render() {
     if (!$this->handle) {
       throw new PhutilInvalidStateException('setObjectHandle');
@@ -74,7 +68,6 @@ final class PhabricatorHovercardView extends AphrontView {
       $this->title ? $this->title : $handle->getName());
 
     $header = new PHUIHeaderView();
-    $header->setHeaderColor($this->color);
     $header->setHeader($title);
     if ($this->tags) {
       foreach ($this->tags as $tag) {

webroot/rsrc/css/phui/phui-document.css

@@ -98,11 +98,6 @@
   font-size: 15px;
 }
 
-.phui-document-content h1.phui-header-view {
-  font-weight: normal;
-  color: #000;
-}
-
 .phui-document-content .phui-property-list-container {
   border-color: {$thinblueborder};
 }

webroot/rsrc/css/phui/phui-object-box.css

@@ -33,40 +33,42 @@ div.phui-object-box.phui-object-box-flush {
   margin: 8px 8px 0 8px;
 }
 
-.phui-box-border.phui-object-box-lightgreen {
+/* - Object Box Colors ------------------------------------------------------ */
-  border: 1px solid {$lightgreenborder};
+
-  border-bottom: 1px solid {$greenborder};
+.phui-box-border.phui-object-box-green {
+  border: 1px solid {$green};
 }
 
-.phui-box-border.phui-object-box-lightgreen .phui-header-shell {
+.phui-box-border.phui-object-box-green .phui-header-view {
-  border-bottom: 1px solid {$lightgreenborder};
+  color: {$green};
 }
 
-.phui-box-border.phui-object-box-lightblue {
+.phui-box-border.phui-object-box-green .phui-header-shell {
-  border: 1px solid {$lightblueborder};
+  border-bottom-color: {$lightgreen};
-  border-bottom: 1px solid {$blueborder};
 }
 
-.phui-box-border.phui-object-box-lightblue .phui-header-shell {
+.phui-box-border.phui-object-box-blue {
-  border-bottom: 1px solid {$lightblueborder};
+  border: 1px solid {$blue};
 }
 
-.phui-box-border.phui-object-box-lightred {
+.phui-box-border.phui-object-box-blue .phui-header-view {
-  border: 1px solid {$lightredborder};
+  color: {$blue};
-  border-bottom: 1px solid {$redborder};
 }
 
-.phui-box-border.phui-object-box-lightred .phui-header-shell {
+.phui-box-border.phui-object-box-blue .phui-header-shell {
-  border-bottom: 1px solid {$lightredborder};
+  border-bottom-color: {$lightblue};
 }
 
-.phui-box-border.phui-object-box-lightviolet {
+.phui-box-border.phui-object-box-red {
-  border: 1px solid {$lightvioletborder};
+  border: 1px solid {$red};
-  border-bottom: 1px solid {$violetborder};
 }
 
-.phui-box-border.phui-object-box-lightviolet .phui-header-shell {
+.phui-box-border.phui-object-box-red .phui-header-view {
-  border-bottom: 1px solid {$lightvioletborder};
+  color: {$red};
+}
+
+.phui-box-border.phui-object-box-red .phui-header-shell {
+  border-bottom-color: {$lightred};
 }
 
 /* - Double Object Box Override --------------------------------------------- */

webroot/rsrc/css/phui/phui-workpanel-view.css

@@ -94,7 +94,7 @@
 }
 
 .phui-workpanel-body .phui-object-item-list-view {
-  min-height: 49px;
+  min-height: 54px;
 }
 
 .device .aphront-multi-column-outer
@@ -121,11 +121,12 @@
   background: rgba(255,255,255,.7);
 }
 
-.project-panel-over-limit .phui-action-header {
+.project-panel-over-limit .phui-header-view {
-  border-top: 1px solid {$redborder};
+  color: {$red};
-  border-left: 1px solid {$redborder};
+}
-  border-right: 1px solid {$redborder};
+
-  background: {$lightredbackground};
+.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
+  border-color: {$sh-redborder};
 }
 
 /* - Workpanel Cards -----------------------------------------------------------