Add bigtext option to PHUIActionPanelView

Summary: Adds option for setting large text instead of icons. Adds success state.

Test Plan:
Built some more examples.

{F286388}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -122,7 +122,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
     'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
     'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
-    'rsrc/css/phui/phui-action-panel.css' => '43989d50',
+    'rsrc/css/phui/phui-action-panel.css' => '4bcb288d',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => '008ba5e2',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
@@ -766,7 +766,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
     'phui-action-header-view-css' => '89c497e7',
-    'phui-action-panel-css' => '43989d50',
+    'phui-action-panel-css' => '4bcb288d',
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => '008ba5e2',
     'phui-calendar-css' => '8675968e',

src/applications/uiexample/examples/PHUIActionPanelExample.php

@@ -53,7 +53,47 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
       ->setState(PHUIActionPanelView::STATE_PROGRESS);
     $view->addColumn($panel4);
 
+    $view2 = id(new AphrontMultiColumnView())
+      ->setFluidLayout(true)
+      ->setBorder(true);
 
-    return phutil_tag_div('ml', $view);
+    /* Action Panels */
+    $panel1 = id(new PHUIActionPanelView())
+      ->setFontIcon('fa-credit-card')
+      ->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')
+      ->setHeader(pht('Instance Users'))
+      ->setHref('#')
+      ->setSubHeader(
+        pht('You currently have 140 active and 8 inactive accounts'));
+    $view2->addColumn($panel2);
+
+    $panel3 = id(new PHUIActionPanelView())
+      ->setBigText('March 12')
+      ->setHeader(pht('Next Maintenance Window'))
+      ->setHref('#')
+      ->setSubHeader(
+        pht('At 6:00 am PST, Phacility will conduct weekly maintenence.'))
+      ->setStatus(pht('Very Important!'))
+      ->setState(PHUIActionPanelView::STATE_ERROR);
+    $view2->addColumn($panel3);
+
+    $panel4 = id(new PHUIActionPanelView())
+      ->setBigText('1,113,377')
+      ->setHeader(pht('Lines of Code'))
+      ->setHref('#')
+      ->setSubHeader(pht('Your team has reviewed lots of code!'));
+    $view2->addColumn($panel4);
+
+    $view = phutil_tag_div('mlb', $view);
+
+    return phutil_tag_div('ml', array($view, $view2));
   }
 }

src/view/phui/PHUIActionPanelView.php

@@ -6,12 +6,14 @@ final class PHUIActionPanelView extends AphrontTagView {
   private $fontIcon;
   private $header;
   private $subHeader;
+  private $bigText;
   private $state;
   private $status;
 
   const STATE_WARN = 'phui-action-panel-warn';
   const STATE_INFO = 'phui-action-panel-info';
   const STATE_ERROR = 'phui-action-panel-error';
+  const STATE_SUCCESS = 'phui-action-panel-success';
   const STATE_PROGRESS = 'phui-action-panel-progress';
   const STATE_NONE = 'phui-action-panel-none';
 
@@ -25,6 +27,11 @@ final class PHUIActionPanelView extends AphrontTagView {
     return $this;
   }
 
+  public function setBigText($text) {
+    $this->bigText = $text;
+    return $this;
+  }
+
   public function setHeader($header) {
     $this->header = $header;
     return $this;
@@ -60,8 +67,11 @@ final class PHUIActionPanelView extends AphrontTagView {
       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:
-        $icon->setIconFont('fa-info-circle msr');
+        return null;
       break;
     }
     return $icon;
@@ -85,9 +95,18 @@ final class PHUIActionPanelView extends AphrontTagView {
   protected function getTagContent() {
 
     $icon = null;
-    if ($this->fontIcon) {
+    if ($this->fontIcon || $this->bigText) {
-      $fonticon = id(new PHUIIconView())
+      if ($this->fontIcon) {
-        ->setIconFont($this->fontIcon);
+        $fonticon = id(new PHUIIconView())
+          ->setIconFont($this->fontIcon);
+      } else {
+        $fonticon = phutil_tag(
+          'span',
+          array(
+            'class' => 'phui-action-panel-bigtext',
+          ),
+          $this->bigText);
+      }
       if ($this->href) {
         $fonticon = phutil_tag(
           'a',

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

@@ -14,10 +14,25 @@
   vertical-align: bottom;
 }
 
-.phui-action-panel-icon a:hover .phui-icon-view {
+.phui-action-panel-bigtext {
+  font-size: 40px;
+  color: {$lightgreytext};
+  line-height: 96px;
+}
+
+.phui-action-panel-icon a {
+  display: block;
+}
+
+.phui-action-panel-icon a:hover .phui-icon-view,
+.phui-action-panel-icon a:hover .phui-action-panel-bigtext {
   color: {$blue};
 }
 
+.phui-action-panel-icon a:hover {
+  text-decoration: none;
+}
+
 .phui-action-panel-icon .phui-icon-view {
   font-size: 64px;
   color: {$lightgreytext};
@@ -88,6 +103,16 @@
   color: {$blue};
 }
 
+.phui-action-panel-success .phui-action-panel-status {
+  background-color: {$lightgreen};
+  color: {$green};
+  border-left: 4px solid {$green};
+}
+
+.phui-action-panel-success .phui-action-panel-status .phui-icon-view {
+  color: {$green};
+}
+
 .phui-action-panel-progress .phui-action-panel-status {
   background-color: {$lightblue};
   color: {$blue};