PHUIActionPanelView

Summary: Super duper sized panels for singluar actions.

Test Plan:
UIExamples, will need more testing in Phacility.

{F286098}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -122,6 +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-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => '008ba5e2',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
@@ -765,6 +766,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
     'phui-action-header-view-css' => '89c497e7',
+    'phui-action-panel-css' => '43989d50',
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => '008ba5e2',
     'phui-calendar-css' => '8675968e',

src/__phutil_library_map__.php

@@ -1122,6 +1122,8 @@ phutil_register_library_map(array(
     'PHUI' => 'view/phui/PHUI.php',
     'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php',
     'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php',
+    'PHUIActionPanelExample' => 'applications/uiexample/examples/PHUIActionPanelExample.php',
+    'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
     'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
@@ -4318,6 +4320,8 @@ phutil_register_library_map(array(
     'PHIDQueryConduitAPIMethod' => 'PHIDConduitAPIMethod',
     'PHUIActionHeaderExample' => 'PhabricatorUIExample',
     'PHUIActionHeaderView' => 'AphrontView',
+    'PHUIActionPanelExample' => 'PhabricatorUIExample',
+    'PHUIActionPanelView' => 'AphrontTagView',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
     'PHUIButtonBarExample' => 'PhabricatorUIExample',

src/applications/uiexample/examples/PHUIActionPanelExample.php

@@ -0,0 +1,59 @@
+<?php
+
+final class PHUIActionPanelExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Action Panel';
+  }
+
+  public function getDescription() {
+    return 'A panel with strong tendencies for inciting ACTION!';
+  }
+
+  public function renderExample() {
+
+    $view = id(new AphrontMultiColumnView())
+      ->setFluidLayout(true)
+      ->setBorder(true);
+
+    /* Action Panels */
+    $panel1 = id(new PHUIActionPanelView())
+      ->setFontIcon('fa-book')
+      ->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);
+    $view->addColumn($panel1);
+
+    $panel2 = id(new PHUIActionPanelView())
+      ->setFontIcon('fa-server')
+      ->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);
+
+    $panel3 = id(new PHUIActionPanelView())
+      ->setFontIcon('fa-group')
+      ->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);
+
+    $panel4 = id(new PHUIActionPanelView())
+      ->setFontIcon('fa-cloud-download')
+      ->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);
+
+
+    return phutil_tag_div('ml', $view);
+  }
+}

src/view/phui/PHUIActionPanelView.php

@@ -0,0 +1,151 @@
+<?php
+
+final class PHUIActionPanelView extends AphrontTagView {
+
+  private $href;
+  private $fontIcon;
+  private $header;
+  private $subHeader;
+  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_PROGRESS = 'phui-action-panel-progress';
+  const STATE_NONE = 'phui-action-panel-none';
+
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
+  public function setFontIcon($image) {
+    $this->fontIcon = $image;
+    return $this;
+  }
+
+  public function setHeader($header) {
+    $this->header = $header;
+    return $this;
+  }
+
+  public function setSubHeader($sub) {
+    $this->subHeader = $sub;
+    return $this;
+  }
+
+  public function setState($state) {
+    $this->state = $state;
+    return $this;
+  }
+
+  public function setStatus($text) {
+    $this->status = $text;
+    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_NONE:
+        $icon->setIconFont('fa-info-circle msr');
+      break;
+    }
+    return $icon;
+  }
+
+  protected function getTagAttributes() {
+    require_celerity_resource('phui-action-panel-css');
+
+    $classes = array();
+    $classes[] = 'phui-action-panel';
+    if ($this->state) {
+      $classes[] = $this->state;
+    }
+
+    return array(
+      'class' => implode(' ', $classes),
+    );
+
+  }
+
+  protected function getTagContent() {
+
+    $icon = null;
+    if ($this->fontIcon) {
+      $fonticon = id(new PHUIIconView())
+        ->setIconFont($this->fontIcon);
+      if ($this->href) {
+        $fonticon = phutil_tag(
+          'a',
+          array(
+            'href' => $this->href,
+          ),
+          $fonticon);
+      }
+      $icon = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-action-panel-icon',
+        ),
+        $fonticon);
+    }
+
+    $header = null;
+    if ($this->header) {
+      $header = $this->header;
+      if ($this->href) {
+        $header = phutil_tag(
+          'a',
+          array(
+            'href' => $this->href,
+          ),
+          $this->header);
+      }
+      $header = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-action-panel-header',
+        ),
+        $header);
+    }
+
+    $subheader = null;
+    if ($this->subHeader) {
+      $subheader = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-action-panel-subheader',
+        ),
+        $this->subHeader);
+    }
+
+    $status = null;
+    if ($this->status && $this->state) {
+      $state_icon = $this->getStateIcon();
+      $status = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-action-panel-status',
+        ),
+        array($state_icon, $this->status));
+    }
+
+    return array($icon, $header, $subheader, $status);
+
+  }
+
+}

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

@@ -0,0 +1,99 @@
+/**
+ * @provides phui-action-panel-css
+ */
+
+.phui-action-panel {
+  position: relative;
+  padding-bottom: 44px;
+}
+
+.phui-action-panel-icon {
+  height: 128px;
+  line-height: 160px;
+  text-align: center;
+  vertical-align: bottom;
+}
+
+.phui-action-panel-icon a:hover .phui-icon-view {
+  color: {$blue};
+}
+
+.phui-action-panel-icon .phui-icon-view {
+  font-size: 64px;
+  color: {$lightgreytext};
+}
+
+.phui-action-panel-header {
+  padding: 0 8px 4px 8px;
+  font-weight: bold;
+  font-size: 14px;
+  color: {$darkbluetext};
+}
+
+.phui-action-panel-header a {
+  color: {$blue};
+}
+
+.phui-action-panel-subheader {
+  padding: 0 8px 4px 8px;
+  font-size: 13px;
+  color: {$bluetext};
+}
+
+.phui-action-panel-status {
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.phui-action-panel-none .phui-action-panel-status {
+  background-color: {$lightgreybackground};
+  border-left: 4px solid {$greyborder};
+  color: {$greytext};
+}
+
+.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
+  color: {$greytext};
+}
+
+.phui-action-panel-warn .phui-action-panel-status {
+  background-color: {$lightyellow};
+  border-left: 4px solid #bc7837;
+  color: #bc7837;
+}
+
+.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
+  color: #bc7837;
+}
+
+.phui-action-panel-error .phui-action-panel-status {
+  background-color: {$lightred};
+  border-left: 4px solid {$red};
+  color: {$red};
+}
+
+.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
+  color: {$red};
+}
+
+.phui-action-panel-info .phui-action-panel-status {
+  background-color: {$lightblue};
+  border-left: 4px solid {$blue};
+  color: {$blue};
+}
+
+.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
+  color: {$blue};
+}
+
+.phui-action-panel-progress .phui-action-panel-status {
+  background-color: {$lightblue};
+  color: {$blue};
+  border-left: 4px solid {$blue};
+}
+
+.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
+  color: {$blue};
+}