More ActionPanel colors, hardening

Summary: Adds full ROYGBIVP color spectrum, adds basic overflow, collapse protection.

Test Plan: Review small and large panels are various breakpoints.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -121,7 +121,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0',
     'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
-    'rsrc/css/phui/phui-action-panel.css' => '714a6c2f',
+    'rsrc/css/phui/phui-action-panel.css' => 'bac94b03',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
@@ -764,7 +764,7 @@ return array(
     'phortune-css' => '9149f103',
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => 'd1861e06',
-    'phui-action-panel-css' => '714a6c2f',
+    'phui-action-panel-css' => 'bac94b03',
     'phui-badge-view-css' => 'f25c3476',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => '16020a60',

src/applications/uiexample/examples/PHUIActionPanelExample.php

@@ -21,7 +21,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Read Documentation'))
       ->setHref('#')
       ->setSubHeader(pht('Reading is a common way to learn about things.'))
-      ->setState(PHUIActionPanelView::STATE_INFO);
+      ->setState(PHUIActionPanelView::COLOR_BLUE);
     $view->addColumn($panel1);
 
     $panel2 = id(new PHUIActionPanelView())
@@ -29,7 +29,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Launch Instance'))
       ->setHref('#')
       ->setSubHeader(pht("Maybe this is what you're likely here for."))
-      ->setState(PHUIActionPanelView::STATE_ERROR);
+      ->setState(PHUIActionPanelView::COLOR_RED);
     $view->addColumn($panel2);
 
     $panel3 = id(new PHUIActionPanelView())
@@ -37,7 +37,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Code with Friends'))
       ->setHref('#')
       ->setSubHeader(pht('Writing code is much more fun with friends!'))
-      ->setState(PHUIActionPanelView::STATE_WARN);
+      ->setState(PHUIActionPanelView::COLOR_YELLOW);
     $view->addColumn($panel3);
 
     $panel4 = id(new PHUIActionPanelView())
@@ -45,7 +45,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Download Data'))
       ->setHref('#')
       ->setSubHeader(pht('Need a backup of all your kitten memes?'))
-      ->setState(PHUIActionPanelView::STATE_PROGRESS);
+      ->setState(PHUIActionPanelView::COLOR_PINK);
     $view->addColumn($panel4);
 
     $view2 = id(new AphrontMultiColumnView())
@@ -57,7 +57,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Account Balance'))
       ->setHref('#')
       ->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.'))
-      ->setState(PHUIActionPanelView::STATE_SUCCESS);
+      ->setState(PHUIActionPanelView::COLOR_GREEN);
     $view2->addColumn($panel1);
 
     $panel2 = id(new PHUIActionPanelView())
@@ -74,14 +74,15 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHref('#')
       ->setSubHeader(
         pht('March 12'))
-      ->setState(PHUIActionPanelView::STATE_ERROR);
+      ->setState(PHUIActionPanelView::COLOR_ORANGE);
     $view2->addColumn($panel3);
 
     $panel4 = id(new PHUIActionPanelView())
       ->setBigText(true)
       ->setHeader(pht('Lines of Code'))
       ->setHref('#')
-      ->setSubHeader(pht('1,113,377'));
+      ->setSubHeader(pht('1,113,377'))
+      ->setState(PHUIActionPanelView::COLOR_INDIGO);
     $view2->addColumn($panel4);
 
     $view = phutil_tag_div('mlb', $view);

src/view/phui/PHUIActionPanelView.php

@@ -10,12 +10,14 @@ final class PHUIActionPanelView extends AphrontTagView {
   private $state;
   private $status;
 
-  const STATE_WARN = 'phui-action-panel-warn';
+  const COLOR_RED = 'phui-action-panel-red';
-  const STATE_INFO = 'phui-action-panel-info';
+  const COLOR_ORANGE = 'phui-action-panel-orange';
-  const STATE_ERROR = 'phui-action-panel-error';
+  const COLOR_YELLOW = 'phui-action-panel-yellow';
-  const STATE_SUCCESS = 'phui-action-panel-success';
+  const COLOR_GREEN = 'phui-action-panel-green';
-  const STATE_PROGRESS = 'phui-action-panel-progress';
+  const COLOR_BLUE = 'phui-action-panel-blue';
-  const STATE_NONE = 'phui-action-panel-none';
+  const COLOR_INDIGO = 'phui-action-panel-indigo';
+  const COLOR_VIOLET = 'phui-action-panel-violet';
+  const COLOR_PINK = 'phui-action-panel-pink';
 
   public function setHref($href) {
     $this->href = $href;

webroot/rsrc/css/phui/phui-action-panel.css

@@ -4,11 +4,16 @@
 
 .phui-action-panel {
   position: relative;
-  background-color: {$lightbluebackground};
+  background-color: #fff;
-  border: 1px solid {$lightgreyborder};
+  border: 1px solid {$lightblueborder};
   border-radius: 3px;
   margin: 0 8px;
   min-height: 108px;
+  overflow: hidden;
+}
+
+.device .phui-action-panel {
+  margin: 0;
 }
 
 .phui-action-panel-hitarea {
@@ -60,6 +65,9 @@
 .phui-action-panel-header {
   padding: 8px;
   border-bottom: 1px solid {$thinblueborder};
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .phui-action-panel-header a {
@@ -70,7 +78,7 @@
   display: table-cell;
   vertical-align: middle;
   color: {$darkbluetext};
-  padding: 0 8px 0 0;
+  padding: 8px 8px 8px 0;
 }
 
 .phui-action-panel-subheader a {
@@ -89,77 +97,122 @@
   text-decoration: none;
 }
 
-.phui-action-panel-none .phui-action-panel-status {
+/* - Red -------------------------------------------------------------------- */
-  background-color: {$lightgreybackground};
-  border-left: 4px solid {$greyborder};
-  color: {$greytext};
-}
 
-.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-red {
-  color: {$greytext};
-}
-
-.phui-action-panel-warn {
-  background-color: {$sh-yellowbackground};
-  border-color: {$sh-yellowborder};
-}
-
-.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view {
-  color: {$sh-yellowicon};
-}
-
-.phui-action-panel-warn .phui-action-panel-header {
-  border-color: {$sh-lightyellowborder};
-}
-
-.phui-action-panel-error {
   background-color: {$sh-redbackground};
   border-color: {$sh-redborder};
 }
 
-.phui-action-panel-error .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-red .phui-action-panel-icon .phui-icon-view {
   color: {$sh-redicon};
 }
 
-.phui-action-panel-error .phui-action-panel-header {
+.phui-action-panel-red .phui-action-panel-header {
   border-color: {$sh-lightredborder};
 }
 
-.phui-action-panel-info {
+/* - Orange ----------------------------------------------------------------- */
-  background-color: {$sh-bluebackground};
+
-  border-color: {$sh-blueborder};
+.phui-action-panel-orange {
+  background-color: {$sh-orangebackground};
+  border-color: {$sh-orangeborder};
 }
 
-.phui-action-panel-info .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-orange .phui-action-panel-icon .phui-icon-view {
-  color: {$sh-blueicon};
+  color: {$sh-orangeicon};
 }
 
-.phui-action-panel-info .phui-action-panel-header {
+.phui-action-panel-orange .phui-action-panel-header {
-  border-color: {$sh-lightblueborder};
+  border-color: {$sh-lightorangeborder};
 }
 
-.phui-action-panel-success {
+/* - Yellow ----------------------------------------------------------------- */
+
+.phui-action-panel-yellow {
+  background-color: {$sh-yellowbackground};
+  border-color: {$sh-yellowborder};
+}
+
+.phui-action-panel-yellow .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-yellowicon};
+}
+
+.phui-action-panel-yellow .phui-action-panel-header {
+  border-color: {$sh-lightyellowborder};
+}
+
+/* - Green ------------------------------------------------------------------ */
+
+.phui-action-panel-green {
   background-color: {$sh-greenbackground};
   border-color: {$sh-greenborder};
 }
 
-.phui-action-panel-success .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-green .phui-action-panel-icon .phui-icon-view {
   color: {$sh-greenicon};
 }
 
-.phui-action-panel-success .phui-action-panel-header {
+.phui-action-panel-green .phui-action-panel-header {
   border-color: {$sh-lightgreenborder};
 }
 
-.phui-action-panel-progress {
+/* - Blue ------------------------------------------------------------------- */
+
+.phui-action-panel-blue {
+  background-color: {$sh-bluebackground};
+  border-color: {$sh-blueborder};
+}
+
+.phui-action-panel-blue .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-blueicon};
+}
+
+.phui-action-panel-blue .phui-action-panel-header {
+  border-color: {$sh-lightblueborder};
+}
+
+/* - Indigo ----------------------------------------------------------------- */
+
+.phui-action-panel-indigo {
+  background-color: {$sh-indigobackground};
+  border-color: {$sh-indigoborder};
+}
+
+.phui-action-panel-indigo .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-indigoicon};
+}
+
+.phui-action-panel-indigo .phui-action-panel-header {
+  border-color: {$sh-lightindigoborder};
+}
+
+/* - Violet ----------------------------------------------------------------- */
+
+.phui-action-panel-violet {
   background-color: {$sh-violetbackground};
   border-color: {$sh-violetborder};
 }
 
-.phui-action-panel-progress .phui-action-panel-icon .phui-icon-view {
+.phui-action-panel-violet .phui-action-panel-icon .phui-icon-view {
   color: {$sh-violeticon};
 }
 
-.phui-action-panel-progress .phui-action-panel-header {
+.phui-action-panel-violet .phui-action-panel-header {
   border-color: {$sh-lightvioletborder};
 }
+
+/* - Pink ------------------------------------------------------------------- */
+
+.phui-action-panel-pink {
+  background-color: {$sh-pinkbackground};
+  border-color: {$sh-violetborder};
+}
+
+.phui-action-panel-pink .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-pinkicon};
+}
+
+.phui-action-panel-pink .phui-action-panel-header {
+  border-color: {$sh-lightpinkborder};
+}