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
2015-09-15 18:32:01 -07:00
parent 0449a07f53
commit a62337dcd8
4 changed files with 130 additions and 129 deletions
--- a/resources/celerity/map.php
+++ b/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',
--- a/src/applications/uiexample/examples/PHUIActionPanelExample.php
+++ b/src/applications/uiexample/examples/PHUIActionPanelExample.php
@@ -13,8 +13,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample {
  public function renderExample() {

    $view = id(new AphrontMultiColumnView())
-      ->setFluidLayout(true)
-      ->setBorder(true);
+      ->setFluidLayout(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_NONE);
+      ->setState(PHUIActionPanelView::STATE_INFO);
    $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)
-      ->setBorder(true);
+      ->setFluidLayout(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.'))
-      ->setStatus(pht('Very Important!'))
+        pht('March 12'))
      ->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);
--- a/src/view/phui/PHUIActionPanelView.php
+++ b/src/view/phui/PHUIActionPanelView.php
@@ -52,29 +52,8 @@ final class PHUIActionPanelView extends AphrontTagView {
    return $this;
  }

-  protected function getStateIcon() {
-    $icon = new PHUIIconView();
-    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 getTagName() {
+    return 'div';
  }

  protected function getTagAttributes() {
@@ -82,43 +61,26 @@ final class PHUIActionPanelView extends AphrontTagView {

    $classes = array();
    $classes[] = 'phui-action-panel';
-    if ($this->status) {
-      $classes[] = 'phui-action-panel-has-status';
+    if ($this->state) {
      $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) {
-        $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',
-          array(
-            'href' => $this->href,
-          ),
-          $fonticon);
-      }
+    if ($this->fontIcon) {
+      $fonticon = id(new PHUIIconView())
+        ->setIconFont($this->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;
-    if ($this->status && $this->state) {
-      $state_icon = $this->getStateIcon();
-      $status = phutil_tag(
-        ($this->href) ? 'a' : 'div',
-        array(
-          'class' => 'phui-action-panel-status',
-          'href' => ($this->href) ? $this->href : null,
-        ),
-        array($state_icon, $this->status));
-    }
+    $row = phutil_tag(
+      'span',
+      array(
+        'class' => 'phui-action-panel-row',
+      ),
+      array(
+        $icon,
+        $subheader,
+      ));

-    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);

  }

--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/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 {
-  padding-bottom: 44px;
+.phui-action-panel-hitarea {
+  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;
-  line-height: 160px;
+  width: 64px;
  text-align: center;
-  vertical-align: bottom;
+  vertical-align: middle;
+  display: table-cell;
 }

-.phui-action-panel-bigtext {
-  font-size: 40px;
-  color: {$lightgreytext};
-  line-height: 96px;
+.phui-action-panel-bigtext .phui-action-panel-subheader {
+  font-size: 28px;
+  color: {$darkbluetext};
+  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;
-  color: {$lightgreytext};
+  font-size: 36px;
+  color: {$lightbluetext};
 }

 .phui-action-panel-header {
-  padding: 0 8px 4px 8px;
-  font-weight: bold;
-  font-size: {$biggerfontsize};
-  color: {$darkbluetext};
+  padding: 8px;
+  border-bottom: 1px solid {$thinblueborder};
 }

 .phui-action-panel-header a {
-  color: {$blue};
+  color: {$darkbluetext};
 }

 .phui-action-panel-subheader {
-  padding: 0 8px 4px 8px;
-  font-size: {$normalfontsize};
-  color: {$bluetext};
+  display: table-cell;
+  vertical-align: middle;
+  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 {
-  background-color: {$lightyellow};
-  border-left: 4px solid #bc7837;
-  color: #bc7837;
+.phui-action-panel-warn {
+  background-color: {$sh-yellowbackground};
+  border-color: {$sh-yellowborder};
 }

-.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
-  color: #bc7837;
+.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-yellowicon};
 }

-.phui-action-panel-error .phui-action-panel-status {
-  background-color: {$lightred};
-  border-left: 4px solid {$red};
-  color: {$red};
+.phui-action-panel-warn .phui-action-panel-header {
+  border-color: {$sh-lightyellowborder};
 }

-.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
-  color: {$red};
+.phui-action-panel-error {
+  background-color: {$sh-redbackground};
+  border-color: {$sh-redborder};
 }

-.phui-action-panel-info .phui-action-panel-status {
-  background-color: {$lightblue};
-  border-left: 4px solid {$blue};
-  color: {$blue};
+.phui-action-panel-error .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-redicon};
 }

-.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
-  color: {$blue};
+.phui-action-panel-error .phui-action-panel-header {
+  border-color: {$sh-lightredborder};
 }

-.phui-action-panel-success .phui-action-panel-status {
-  background-color: {$lightgreen};
-  color: {$green};
-  border-left: 4px solid {$green};
+.phui-action-panel-info {
+  background-color: {$sh-bluebackground};
+  border-color: {$sh-blueborder};
 }

-.phui-action-panel-success .phui-action-panel-status .phui-icon-view {
-  color: {$green};
+.phui-action-panel-info .phui-action-panel-icon .phui-icon-view {
+  color: {$sh-blueicon};
 }

-.phui-action-panel-progress .phui-action-panel-status {
-  background-color: {$lightblue};
-  color: {$blue};
-  border-left: 4px solid {$blue};
+.phui-action-panel-info .phui-action-panel-header {
+  border-color: {$sh-lightblueborder};
 }

-.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
-  color: {$blue};
+.phui-action-panel-success {
+  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};
 }