Update PHUIActionPanelView

Summary: Making these a little more fun, a little more flexible and better looking. Will have an update for rSAAS in a bit.

Test Plan:
Make lots of them. Click.

{F815658}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

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' => '3ee9afd5',
+    'rsrc/css/phui/phui-action-panel.css' => '714a6c2f',
     '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' => '3ee9afd5',
+    'phui-action-panel-css' => '714a6c2f',
     'phui-badge-view-css' => 'f25c3476',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => '16020a60',

src/applications/uiexample/examples/PHUIActionPanelExample.php

@@ -13,8 +13,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
   public function renderExample() {
 
     $view = id(new AphrontMultiColumnView())
-      ->setFluidLayout(true)
+      ->setFluidLayout(true);
-      ->setBorder(true);
 
     /* Action Panels */
     $panel1 = id(new PHUIActionPanelView())
@@ -22,8 +21,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Read Documentation'))
       ->setHref('#')
       ->setSubHeader(pht('Reading is a common way to learn about things.'))
-      ->setStatus(pht('Carrots help you see better.'))
+      ->setState(PHUIActionPanelView::STATE_INFO);
-      ->setState(PHUIActionPanelView::STATE_NONE);
     $view->addColumn($panel1);
 
     $panel2 = id(new PHUIActionPanelView())
@@ -31,7 +29,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Launch Instance'))
       ->setHref('#')
       ->setSubHeader(pht("Maybe this is what you're likely here for."))
-      ->setStatus(pht('You have no instances.'))
       ->setState(PHUIActionPanelView::STATE_ERROR);
     $view->addColumn($panel2);
 
@@ -40,7 +37,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Code with Friends'))
       ->setHref('#')
       ->setSubHeader(pht('Writing code is much more fun with friends!'))
-      ->setStatus(pht('You need more friends.'))
       ->setState(PHUIActionPanelView::STATE_WARN);
     $view->addColumn($panel3);
 
@@ -49,13 +45,11 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Download Data'))
       ->setHref('#')
       ->setSubHeader(pht('Need a backup of all your kitten memes?'))
-      ->setStatus(pht('Building Download'))
       ->setState(PHUIActionPanelView::STATE_PROGRESS);
     $view->addColumn($panel4);
 
     $view2 = id(new AphrontMultiColumnView())
-      ->setFluidLayout(true)
+      ->setFluidLayout(true);
-      ->setBorder(true);
 
     /* Action Panels */
     $panel1 = id(new PHUIActionPanelView())
@@ -63,33 +57,31 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setHeader(pht('Account Balance'))
       ->setHref('#')
       ->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.'))
-      ->setStatus(pht('Account in good standing.'))
       ->setState(PHUIActionPanelView::STATE_SUCCESS);
     $view2->addColumn($panel1);
 
     $panel2 = id(new PHUIActionPanelView())
-      ->setBigText('148')
+      ->setBigText(true)
       ->setHeader(pht('Instance Users'))
       ->setHref('#')
       ->setSubHeader(
-        pht('You currently have 140 active and 8 inactive accounts'));
+        pht('148'));
     $view2->addColumn($panel2);
 
     $panel3 = id(new PHUIActionPanelView())
-      ->setBigText('March 12')
+      ->setBigText(true)
       ->setHeader(pht('Next Maintenance Window'))
       ->setHref('#')
       ->setSubHeader(
-        pht('At 6:00 am PST, Phacility will conduct weekly maintenence.'))
+        pht('March 12'))
-      ->setStatus(pht('Very Important!'))
       ->setState(PHUIActionPanelView::STATE_ERROR);
     $view2->addColumn($panel3);
 
     $panel4 = id(new PHUIActionPanelView())
-      ->setBigText('1,113,377')
+      ->setBigText(true)
       ->setHeader(pht('Lines of Code'))
       ->setHref('#')
-      ->setSubHeader(pht('Your team has reviewed lots of code!'));
+      ->setSubHeader(pht('1,113,377'));
     $view2->addColumn($panel4);
 
     $view = phutil_tag_div('mlb', $view);

src/view/phui/PHUIActionPanelView.php

@@ -52,29 +52,8 @@ final class PHUIActionPanelView extends AphrontTagView {
     return $this;
   }
 
-  protected function getStateIcon() {
+  protected function getTagName() {
-    $icon = new PHUIIconView();
+    return 'div';
-    switch ($this->state) {
-      case self::STATE_WARN:
-        $icon->setIconFont('fa-exclamation-circle msr');
-      break;
-      case self::STATE_INFO:
-        $icon->setIconFont('fa-info-circle msr');
-      break;
-      case self::STATE_ERROR:
-        $icon->setIconFont('fa-exclamation-triangle msr');
-      break;
-      case self::STATE_PROGRESS:
-        $icon->setIconFont('fa-refresh ph-spin msr');
-      break;
-      case self::STATE_SUCCESS:
-        $icon->setIconFont('fa-check msr');
-      break;
-      case self::STATE_NONE:
-        return null;
-      break;
-    }
-    return $icon;
   }
 
   protected function getTagAttributes() {
@@ -82,43 +61,26 @@ final class PHUIActionPanelView extends AphrontTagView {
 
     $classes = array();
     $classes[] = 'phui-action-panel';
-    if ($this->status) {
+    if ($this->state) {
-      $classes[] = 'phui-action-panel-has-status';
       $classes[] = $this->state;
-
+    }
+    if ($this->bigText) {
+      $classes[] = 'phui-action-panel-bigtext';
     }
 
     return array(
       'class' => implode(' ', $classes),
     );
-
   }
 
   protected function getTagContent() {
 
     $icon = null;
-    if ($this->fontIcon || $this->bigText) {
+    if ($this->fontIcon) {
-      if ($this->fontIcon) {
+      $fonticon = id(new PHUIIconView())
-        $fonticon = id(new PHUIIconView())
+        ->setIconFont($this->fontIcon);
-          ->setIconFont($this->fontIcon);
-      } else {
-        $fonticon = phutil_tag(
-          'span',
-          array(
-            'class' => 'phui-action-panel-bigtext',
-          ),
-          $this->bigText);
-      }
-      if ($this->href) {
-        $fonticon = phutil_tag(
-          'a',
-          array(
-            'href' => $this->href,
-          ),
-          $fonticon);
-      }
       $icon = phutil_tag(
-        'div',
+        'span',
         array(
           'class' => 'phui-action-panel-icon',
         ),
@@ -147,26 +109,39 @@ final class PHUIActionPanelView extends AphrontTagView {
     $subheader = null;
     if ($this->subHeader) {
       $subheader = phutil_tag(
-        'div',
+        'span',
         array(
           'class' => 'phui-action-panel-subheader',
         ),
         $this->subHeader);
     }
 
-    $status = null;
+    $row = phutil_tag(
-    if ($this->status && $this->state) {
+      'span',
-      $state_icon = $this->getStateIcon();
+      array(
-      $status = phutil_tag(
+        'class' => 'phui-action-panel-row',
-        ($this->href) ? 'a' : 'div',
+      ),
-        array(
+      array(
-          'class' => 'phui-action-panel-status',
+        $icon,
-          'href' => ($this->href) ? $this->href : null,
+        $subheader,
-        ),
+      ));
-        array($state_icon, $this->status));
-    }
 
-    return array($icon, $header, $subheader, $status);
+    $table = phutil_tag(
+      'span',
+      array(
+        'class' => 'phui-action-panel-table',
+      ),
+      $row);
+
+    $content = phutil_tag(
+      'a',
+      array(
+        'href' => $this->href,
+        'class' => 'phui-action-panel-hitarea',
+      ),
+      $table);
+
+    return array($header, $content);
 
   }
 

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

@@ -4,23 +4,39 @@
 
 .phui-action-panel {
   position: relative;
+  background-color: {$lightbluebackground};
+  border: 1px solid {$lightgreyborder};
+  border-radius: 3px;
+  margin: 0 8px;
+  min-height: 108px;
 }
 
-.phui-action-panel-has-status.phui-action-panel {
+.phui-action-panel-hitarea {
-  padding-bottom: 44px;
+  display: block;
+}
+
+.phui-action-panel-table {
+  display: table;
+  height: 80px;
+  width: 100%;
+}
+
+.phui-action-panel-row {
+  display: table-row;
 }
 
 .phui-action-panel-icon {
-  height: 128px;
+  width: 64px;
-  line-height: 160px;
   text-align: center;
-  vertical-align: bottom;
+  vertical-align: middle;
+  display: table-cell;
 }
 
-.phui-action-panel-bigtext {
+.phui-action-panel-bigtext .phui-action-panel-subheader {
-  font-size: 40px;
+  font-size: 28px;
-  color: {$lightgreytext};
+  color: {$darkbluetext};
-  line-height: 96px;
+  text-align: center;
+  padding: 0 8px;
 }
 
 .phui-action-panel-icon a {
@@ -37,25 +53,28 @@
 }
 
 .phui-action-panel-icon .phui-icon-view {
-  font-size: 64px;
+  font-size: 36px;
-  color: {$lightgreytext};
+  color: {$lightbluetext};
 }
 
 .phui-action-panel-header {
-  padding: 0 8px 4px 8px;
+  padding: 8px;
-  font-weight: bold;
+  border-bottom: 1px solid {$thinblueborder};
-  font-size: {$biggerfontsize};
-  color: {$darkbluetext};
 }
 
 .phui-action-panel-header a {
-  color: {$blue};
+  color: {$darkbluetext};
 }
 
 .phui-action-panel-subheader {
-  padding: 0 8px 4px 8px;
+  display: table-cell;
-  font-size: {$normalfontsize};
+  vertical-align: middle;
-  color: {$bluetext};
+  color: {$darkbluetext};
+  padding: 0 8px 0 0;
+}
+
+.phui-action-panel-subheader a {
+  text-decoraction: none;
 }
 
 .phui-action-panel-status {
@@ -80,52 +99,67 @@
   color: {$greytext};
 }
 
-.phui-action-panel-warn .phui-action-panel-status {
+.phui-action-panel-warn {
-  background-color: {$lightyellow};
+  background-color: {$sh-yellowbackground};
-  border-left: 4px solid #bc7837;
+  border-color: {$sh-yellowborder};
-  color: #bc7837;
 }
 
-.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view {
-  color: #bc7837;
+  color: {$sh-yellowicon};
 }
 
-.phui-action-panel-error .phui-action-panel-status {
+.phui-action-panel-warn .phui-action-panel-header {
-  background-color: {$lightred};
+  border-color: {$sh-lightyellowborder};
-  border-left: 4px solid {$red};
-  color: {$red};
 }
 
-.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-error {
-  color: {$red};
+  background-color: {$sh-redbackground};
+  border-color: {$sh-redborder};
 }
 
-.phui-action-panel-info .phui-action-panel-status {
+.phui-action-panel-error .phui-action-panel-icon .phui-icon-view {
-  background-color: {$lightblue};
+  color: {$sh-redicon};
-  border-left: 4px solid {$blue};
-  color: {$blue};
 }
 
-.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-error .phui-action-panel-header {
-  color: {$blue};
+  border-color: {$sh-lightredborder};
 }
 
-.phui-action-panel-success .phui-action-panel-status {
+.phui-action-panel-info {
-  background-color: {$lightgreen};
+  background-color: {$sh-bluebackground};
-  color: {$green};
+  border-color: {$sh-blueborder};
-  border-left: 4px solid {$green};
 }
 
-.phui-action-panel-success .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-info .phui-action-panel-icon .phui-icon-view {
-  color: {$green};
+  color: {$sh-blueicon};
 }
 
-.phui-action-panel-progress .phui-action-panel-status {
+.phui-action-panel-info .phui-action-panel-header {
-  background-color: {$lightblue};
+  border-color: {$sh-lightblueborder};
-  color: {$blue};
-  border-left: 4px solid {$blue};
 }
 
-.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
+.phui-action-panel-success {
-  color: {$blue};
+  background-color: {$sh-greenbackground};
+  border-color: {$sh-greenborder};
+}
+
+.phui-action-panel-success .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-greenicon};
+}
+
+.phui-action-panel-success .phui-action-panel-header {
+  border-color: {$sh-lightgreenborder};
+}
+
+.phui-action-panel-progress {
+  background-color: {$sh-violetbackground};
+  border-color: {$sh-violetborder};
+}
+
+.phui-action-panel-progress .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-violeticon};
+}
+
+.phui-action-panel-progress .phui-action-panel-header {
+  border-color: {$sh-lightvioletborder};
 }