Add PHUIStatusListView

Summary: For Diffusion's auditors list, and Differential's reviewers list (eventually). An inline option might make more sense in Differential, but I want to use this in Diffusion first, and we need more information there.

Test Plan: {F51424}

Reviewers: chad, btrahan

Reviewed By: btrahan

CC: aran

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

src/__celerity_resource_map__.php

@@ -3873,6 +3873,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-spacing.css',
   ),
+  'phui-status-list-view-css' =>
+  array(
+    'uri' => '/res/a91b3fbe/rsrc/css/phui/phui-status.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-status.css',
+  ),
   'phui-text-css' =>
   array(
     'uri' => '/res/63e53cac/rsrc/css/phui/phui-text.css',

src/__phutil_library_map__.php

@@ -742,6 +742,8 @@ phutil_register_library_map(array(
     'PHUIListView' => 'view/phui/PHUIListView.php',
     'PHUIListViewTestCase' => 'view/layout/__tests__/PHUIListViewTestCase.php',
     'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php',
+    'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
+    'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
     'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
     'PHUITextView' => 'view/phui/PHUITextView.php',
     'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
@@ -1636,6 +1638,7 @@ phutil_register_library_map(array(
     'PhabricatorUIListFilterExample' => 'applications/uiexample/examples/PhabricatorUIListFilterExample.php',
     'PhabricatorUINotificationExample' => 'applications/uiexample/examples/PhabricatorUINotificationExample.php',
     'PhabricatorUIPagerExample' => 'applications/uiexample/examples/PhabricatorUIPagerExample.php',
+    'PhabricatorUIStatusExample' => 'applications/uiexample/examples/PhabricatorUIStatusExample.php',
     'PhabricatorUITooltipExample' => 'applications/uiexample/examples/PhabricatorUITooltipExample.php',
     'PhabricatorUnitsTestCase' => 'view/__tests__/PhabricatorUnitsTestCase.php',
     'PhabricatorUser' => 'applications/people/storage/PhabricatorUser.php',
@@ -2722,6 +2725,8 @@ phutil_register_library_map(array(
     'PHUIListView' => 'AphrontTagView',
     'PHUIListViewTestCase' => 'PhabricatorTestCase',
     'PHUIPagedFormView' => 'AphrontTagView',
+    'PHUIStatusItemView' => 'AphrontTagView',
+    'PHUIStatusListView' => 'AphrontTagView',
     'PHUITextExample' => 'PhabricatorUIExample',
     'PHUITextView' => 'AphrontTagView',
     'PackageCreateMail' => 'PackageMail',
@@ -3661,6 +3666,7 @@ phutil_register_library_map(array(
     'PhabricatorUIListFilterExample' => 'PhabricatorUIExample',
     'PhabricatorUINotificationExample' => 'PhabricatorUIExample',
     'PhabricatorUIPagerExample' => 'PhabricatorUIExample',
+    'PhabricatorUIStatusExample' => 'PhabricatorUIExample',
     'PhabricatorUITooltipExample' => 'PhabricatorUIExample',
     'PhabricatorUnitsTestCase' => 'PhabricatorTestCase',
     'PhabricatorUser' =>

src/applications/uiexample/examples/PhabricatorUIStatusExample.php

@@ -0,0 +1,79 @@
+<?php
+
+final class PhabricatorUIStatusExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Status List';
+  }
+
+  public function getDescription() {
+    return hsprintf(
+      'Use <tt>PHUIStatusListView</tt> to show relationships with objects.');
+  }
+
+  public function renderExample() {
+
+    $out = array();
+
+    $view = new PHUIStatusListView();
+
+    $view->addItem(
+      id(new PHUIStatusItemView())
+        ->setIcon('accept-green', pht('Yum'))
+        ->setTarget(pht('Apple'))
+        ->setNote(pht('You can eat them.')));
+
+    $view->addItem(
+      id(new PHUIStatusItemView())
+        ->setIcon('add-blue', pht('Has Peel'))
+        ->setTarget(pht('Banana'))
+        ->setNote(pht('Comes in bunches.'))
+        ->setHighlighted(true));
+
+    $view->addItem(
+      id(new PHUIStatusItemView())
+        ->setIcon('warning-dark', pht('Caution'))
+        ->setTarget(pht('Pomegranite'))
+        ->setNote(pht('Lots of seeds. Watch out.')));
+
+    $view->addItem(
+      id(new PHUIStatusItemView())
+        ->setIcon('reject-red', pht('Bleh!'))
+        ->setTarget(pht('Zucchini'))
+        ->setNote(pht('Slimy and gross. Yuck!')));
+
+    $out[] = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Fruit and Vegetable Status'));
+
+    $out[] = id(new PHUIBoxView())
+      ->addMargin(PHUI::MARGIN_LARGE)
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->setShadow(true)
+      ->appendChild($view);
+
+
+    $view = new PHUIStatusListView();
+
+    $manifest = PHUIIconView::getSheetManifest(PHUIIconView::SPRITE_STATUS);
+
+    foreach ($manifest as $sprite) {
+      $name = substr($sprite['name'], strlen('status-'));
+
+      $view->addItem(
+        id(new PHUIStatusItemView())
+          ->setIcon($name)
+          ->setTarget($name));
+    }
+
+    $out[] = id(new PhabricatorHeaderView())
+      ->setHeader(pht('All Icons'));
+
+    $out[] = id(new PHUIBoxView())
+      ->addMargin(PHUI::MARGIN_LARGE)
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->setShadow(true)
+      ->appendChild($view);
+
+    return $out;
+  }
+}

src/view/layout/PhabricatorActionView.php

@@ -161,14 +161,11 @@ final class PhabricatorActionView extends AphrontView {
   }
 
   public static function getAvailableIcons() {
-    $root = dirname(phutil_get_library_root('phabricator'));
-    $path = $root.'/resources/sprite/manifest/icons.json';
-    $data = Filesystem::readFile($path);
-    $manifest = json_decode($data, true);
+    $manifest = PHUIIconView::getSheetManifest(PHUIIconView::SPRITE_ICONS);
 
     $results = array();
     $prefix = 'icons-';
-    foreach ($manifest['sprites'] as $sprite) {
+    foreach ($manifest as $sprite) {
       $name = $sprite['name'];
       if (preg_match('/-(white|grey)$/', $name)) {
         continue;

src/view/phui/PHUIIconView.php

@@ -9,6 +9,7 @@ final class PHUIIconView extends AphrontTagView {
   const SPRITE_PAYMENTS = 'payments';
   const SPRITE_ICONS = 'icons';
   const SPRITE_LOGIN = 'login';
+  const SPRITE_STATUS = 'status';
 
   const HEAD_SMALL = 'phuihead-small';
   const HEAD_MEDIUM = 'phuihead-medium';
@@ -76,4 +77,13 @@ final class PHUIIconView extends AphrontTagView {
       'class' => $classes,
     );
   }
+
+  public static function getSheetManifest($sheet) {
+    $root = dirname(phutil_get_library_root('phabricator'));
+    $path = $root.'/resources/sprite/manifest/'.$sheet.'.json';
+    $data = Filesystem::readFile($path);
+    return idx(json_decode($data, true), 'sprites');
+  }
+
+
 }

src/view/phui/PHUIListItemView.php

@@ -17,11 +17,9 @@ final class PHUIListItemView extends AphrontTagView {
   private $key;
   private $icon;
   private $selected;
-  private $containerAttrs;
   private $disabled;
   private $renderNameAsTooltip;
 
-
   public function setRenderNameAsTooltip($render_name_as_tooltip) {
     $this->renderNameAsTooltip = $render_name_as_tooltip;
     return $this;

src/view/phui/PHUIStatusItemView.php

@@ -0,0 +1,94 @@
+<?php
+
+final class PHUIStatusItemView extends AphrontTagView {
+
+  private $icon;
+  private $iconLabel;
+  private $target;
+  private $note;
+  private $highlighted;
+
+  public function setIcon($icon, $label = null) {
+    $this->icon = $icon;
+    $this->iconLabel = $label;
+    return $this;
+  }
+
+  public function setTarget($target) {
+    $this->target = $target;
+    return $this;
+  }
+
+  public function setNote($note) {
+    $this->note = $note;
+    return $this;
+  }
+
+  public function setHighlighted($highlighted) {
+    $this->highlighted = $highlighted;
+    return $this;
+  }
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  protected function getTagName() {
+    return 'tr';
+  }
+
+  protected function getTagAttributes() {
+    $classes = array();
+    if ($this->highlighted) {
+      $classes[] = 'phui-status-item-highlighted';
+    }
+
+    return array(
+      'class' => $classes,
+    );
+  }
+
+  protected function getTagContent() {
+
+    $icon = null;
+    if ($this->icon) {
+      $icon = id(new PHUIIconView())
+        ->setSpriteSheet(PHUIIconView::SPRITE_STATUS)
+        ->setSpriteIcon($this->icon);
+
+      if ($this->iconLabel) {
+        Javelin::initBehavior('phabricator-tooltips');
+        $icon->addSigil('has-tooltip');
+        $icon->setMetadata(
+          array(
+            'tip' => $this->iconLabel,
+          ));
+      }
+    }
+
+    $icon_cell = phutil_tag(
+      'td',
+      array(),
+      $icon);
+
+    $target_cell = phutil_tag(
+      'td',
+      array(
+        'class' => 'phui-status-item-target',
+      ),
+      $this->target);
+
+    $note_cell = phutil_tag(
+      'td',
+      array(
+        'class' => 'phui-status-item-note',
+      ),
+      $this->note);
+
+    return array(
+      $icon_cell,
+      $target_cell,
+      $note_cell,
+    );
+  }
+}

src/view/phui/PHUIStatusListView.php

@@ -0,0 +1,33 @@
+<?php
+
+final class PHUIStatusListView extends AphrontTagView {
+
+  private $items;
+
+  public function addItem(PHUIStatusItemView $item) {
+    $this->items[] = $item;
+  }
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  public function getTagName() {
+    return 'table';
+  }
+
+  protected function getTagAttributes() {
+    require_celerity_resource('phui-status-list-view-css');
+
+    $classes = array();
+    $classes[] = 'phui-status-list-view';
+
+    return array(
+      'class' => implode(' ', $classes),
+    );
+  }
+
+  protected function getTagContent() {
+    return $this->items;
+  }
+}

webroot/rsrc/css/phui/phui-status.css

@@ -0,0 +1,30 @@
+/**
+ * @provides phui-status-list-view-css
+ */
+
+.phui-status-list-view {
+  width: 100%;
+}
+
+.phui-status-list-view .phui-icon-view {
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 4px 4px;
+}
+
+.phui-status-item-target {
+  padding: 0 12px 0 4px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+.phui-status-item-note {
+  width: 100%;
+  color: #666666;
+  line-height: 22px;
+}
+
+.phui-status-item-highlighted {
+  background-color: {$lightyellow};
+}