Add "state icons" to ObjectItemListView

Summary: They seem to look OK? Test Plan: {F48529} {F48530} Reviewers: chad Reviewed By: chad CC: aran Differential Revision: https://secure.phabricator.com/D6350
2024-12-28 00:10:57 +01:00 · 2013-07-02 16:29:43 -07:00 · 2013-07-02 16:29:43 -07:00 · e70bb28ea0
commit e70bb28ea0
parent d521e60e70
4 changed files with 187 additions and 45 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -3249,7 +3249,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-object-item-list-view-css' =>
  array(
-    'uri' => '/res/a66cc93b/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/8d18c133/rsrc/css/layout/phabricator-object-item-list-view.css',
    'type' => 'css',
    'requires' =>
    array(
@ -4073,7 +4073,7 @@ celerity_register_resource_map(array(
 ), array(
  'packages' =>
  array(
-    'c4be3603' =>
+    'a1d34b1a' =>
    array(
      'name' => 'core.pkg.css',
      'symbols' =>
@ -4121,7 +4121,7 @@ celerity_register_resource_map(array(
        40 => 'phabricator-property-list-view-css',
        41 => 'phabricator-tag-view-css',
      ),
-      'uri' => '/res/pkg/c4be3603/core.pkg.css',
+      'uri' => '/res/pkg/a1d34b1a/core.pkg.css',
      'type' => 'css',
    ),
    'f2ad0683' =>
@ -4315,16 +4315,16 @@ celerity_register_resource_map(array(
  'reverse' =>
  array(
    'aphront-attached-file-view-css' => 'adc3c36d',
-    'aphront-dialog-view-css' => 'c4be3603',
-    'aphront-error-view-css' => 'c4be3603',
-    'aphront-form-view-css' => 'c4be3603',
-    'aphront-list-filter-view-css' => 'c4be3603',
-    'aphront-pager-view-css' => 'c4be3603',
-    'aphront-panel-view-css' => 'c4be3603',
-    'aphront-table-view-css' => 'c4be3603',
-    'aphront-tokenizer-control-css' => 'c4be3603',
-    'aphront-tooltip-css' => 'c4be3603',
-    'aphront-typeahead-control-css' => 'c4be3603',
+    'aphront-dialog-view-css' => 'a1d34b1a',
+    'aphront-error-view-css' => 'a1d34b1a',
+    'aphront-form-view-css' => 'a1d34b1a',
+    'aphront-list-filter-view-css' => 'a1d34b1a',
+    'aphront-pager-view-css' => 'a1d34b1a',
+    'aphront-panel-view-css' => 'a1d34b1a',
+    'aphront-table-view-css' => 'a1d34b1a',
+    'aphront-tokenizer-control-css' => 'a1d34b1a',
+    'aphront-tooltip-css' => 'a1d34b1a',
+    'aphront-typeahead-control-css' => 'a1d34b1a',
    'differential-changeset-view-css' => 'dd27a69b',
    'differential-core-view-css' => 'dd27a69b',
    'differential-inline-comment-editor' => '9488bb69',
@ -4338,7 +4338,7 @@ celerity_register_resource_map(array(
    'differential-table-of-contents-css' => 'dd27a69b',
    'diffusion-commit-view-css' => 'c8ce2d88',
    'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'c4be3603',
+    'global-drag-and-drop-css' => 'a1d34b1a',
    'inline-comment-summary-css' => 'dd27a69b',
    'javelin-aphlict' => 'f2ad0683',
    'javelin-behavior' => 'a9f14d76',
@ -4412,55 +4412,55 @@ celerity_register_resource_map(array(
    'javelin-util' => 'a9f14d76',
    'javelin-vector' => 'a9f14d76',
    'javelin-workflow' => 'a9f14d76',
-    'lightbox-attachment-css' => 'c4be3603',
+    'lightbox-attachment-css' => 'a1d34b1a',
    'maniphest-task-summary-css' => 'adc3c36d',
    'maniphest-transaction-detail-css' => 'adc3c36d',
-    'phabricator-action-list-view-css' => 'c4be3603',
-    'phabricator-application-launch-view-css' => 'c4be3603',
+    'phabricator-action-list-view-css' => 'a1d34b1a',
+    'phabricator-application-launch-view-css' => 'a1d34b1a',
    'phabricator-busy' => 'f2ad0683',
    'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-css' => 'c4be3603',
-    'phabricator-crumbs-view-css' => 'c4be3603',
+    'phabricator-core-css' => 'a1d34b1a',
+    'phabricator-crumbs-view-css' => 'a1d34b1a',
    'phabricator-drag-and-drop-file-upload' => '9488bb69',
    'phabricator-dropdown-menu' => 'f2ad0683',
    'phabricator-file-upload' => 'f2ad0683',
-    'phabricator-filetree-view-css' => 'c4be3603',
-    'phabricator-flag-css' => 'c4be3603',
-    'phabricator-form-view-css' => 'c4be3603',
-    'phabricator-header-view-css' => 'c4be3603',
+    'phabricator-filetree-view-css' => 'a1d34b1a',
+    'phabricator-flag-css' => 'a1d34b1a',
+    'phabricator-form-view-css' => 'a1d34b1a',
+    'phabricator-header-view-css' => 'a1d34b1a',
    'phabricator-hovercard' => 'f2ad0683',
-    'phabricator-jump-nav' => 'c4be3603',
+    'phabricator-jump-nav' => 'a1d34b1a',
    'phabricator-keyboard-shortcut' => 'f2ad0683',
    'phabricator-keyboard-shortcut-manager' => 'f2ad0683',
-    'phabricator-main-menu-view' => 'c4be3603',
+    'phabricator-main-menu-view' => 'a1d34b1a',
    'phabricator-menu-item' => 'f2ad0683',
-    'phabricator-nav-view-css' => 'c4be3603',
+    'phabricator-nav-view-css' => 'a1d34b1a',
    'phabricator-notification' => 'f2ad0683',
-    'phabricator-notification-css' => 'c4be3603',
-    'phabricator-notification-menu-css' => 'c4be3603',
-    'phabricator-object-item-list-view-css' => 'c4be3603',
+    'phabricator-notification-css' => 'a1d34b1a',
+    'phabricator-notification-menu-css' => 'a1d34b1a',
+    'phabricator-object-item-list-view-css' => 'a1d34b1a',
    'phabricator-object-selector-css' => 'dd27a69b',
    'phabricator-phtize' => 'f2ad0683',
    'phabricator-prefab' => 'f2ad0683',
    'phabricator-project-tag-css' => 'adc3c36d',
-    'phabricator-property-list-view-css' => 'c4be3603',
-    'phabricator-remarkup-css' => 'c4be3603',
+    'phabricator-property-list-view-css' => 'a1d34b1a',
+    'phabricator-remarkup-css' => 'a1d34b1a',
    'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => 'c4be3603',
-    'phabricator-standard-page-view' => 'c4be3603',
-    'phabricator-tag-view-css' => 'c4be3603',
+    'phabricator-side-menu-view-css' => 'a1d34b1a',
+    'phabricator-standard-page-view' => 'a1d34b1a',
+    'phabricator-tag-view-css' => 'a1d34b1a',
    'phabricator-textareautils' => 'f2ad0683',
    'phabricator-tooltip' => 'f2ad0683',
-    'phabricator-transaction-view-css' => 'c4be3603',
-    'phabricator-zindex-css' => 'c4be3603',
-    'phui-button-css' => 'c4be3603',
-    'phui-form-css' => 'c4be3603',
-    'phui-icon-view-css' => 'c4be3603',
-    'phui-spacing-css' => 'c4be3603',
-    'sprite-apps-large-css' => 'c4be3603',
-    'sprite-gradient-css' => 'c4be3603',
-    'sprite-icons-css' => 'c4be3603',
-    'sprite-menu-css' => 'c4be3603',
-    'syntax-highlighting-css' => 'c4be3603',
+    'phabricator-transaction-view-css' => 'a1d34b1a',
+    'phabricator-zindex-css' => 'a1d34b1a',
+    'phui-button-css' => 'a1d34b1a',
+    'phui-form-css' => 'a1d34b1a',
+    'phui-icon-view-css' => 'a1d34b1a',
+    'phui-spacing-css' => 'a1d34b1a',
+    'sprite-apps-large-css' => 'a1d34b1a',
+    'sprite-gradient-css' => 'a1d34b1a',
+    'sprite-icons-css' => 'a1d34b1a',
+    'sprite-menu-css' => 'a1d34b1a',
+    'syntax-highlighting-css' => 'a1d34b1a',
  ),
 ));
--- a/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php
+++ b/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php
@ -289,6 +289,57 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {

    $out[] = array($head, $list);

+    $head = id(new PhabricatorHeaderView())
+      ->setHeader(pht('State Icons'));
+    $list = new PhabricatorObjectItemListView();
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Item With State'))
+        ->addStateIcon('blame'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Grippable Item With State'))
+        ->setGrippable(true)
+        ->addStateIcon('blame'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Two State'))
+        ->setStateIconColumns(2)
+        ->addStateIcon('blame')
+        ->addStateIcon('blame'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Grippable Two State'))
+        ->setGrippable(true)
+        ->setStateIconColumns(2)
+        ->addStateIcon('blame')
+        ->addStateIcon('blame'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Three State'))
+        ->addAttribute(pht('The quick brown fox...'))
+        ->setStateIconColumns(2)
+        ->addStateIcon('home')
+        ->addStateIcon('tag')
+        ->addStateIcon('unlock'));
+
+    $list->addItem(
+      id(new PhabricatorObjectItemView())
+        ->setHeader(pht('Four State'))
+        ->addAttribute(pht('...jumps over the lazy dog.'))
+        ->setStateIconColumns(2)
+        ->addStateIcon('world-grey', pht('World'))
+        ->addStateIcon('fork-grey', pht('Fork'))
+        ->addStateIcon('herald-grey', pht('Herald'))
+        ->addStateIcon('preview-grey', pht('Eye')));
+
+    $out[] = array($head, $list);
+
    return $out;
  }
 }
--- a/src/view/layout/PhabricatorObjectItemView.php
+++ b/src/view/layout/PhabricatorObjectItemView.php
@ -16,6 +16,25 @@ final class PhabricatorObjectItemView extends AphrontTagView {
  private $bylines = array();
  private $grippable;
  private $actions = array();
+  private $stateIconColumns = 0;
+  private $stateIcons = array();
+
+  public function setStateIconColumns($state_icon_columns) {
+    $this->stateIconColumns = $state_icon_columns;
+    return $this;
+  }
+
+  public function addStateIcon($name, $label = null, $attributes = array()) {
+    $this->stateIcons[] = array(
+      'name'        => $name,
+      'label'       => $label,
+      'attributes'  => $attributes,
+    );
+    if (!$this->stateIconColumns) {
+      $this->stateIconColumns = 1;
+    }
+    return $this;
+  }

  public function setObjectName($name) {
    $this->objectName = $name;
@ -183,6 +202,11 @@ final class PhabricatorObjectItemView extends AphrontTagView {
      $item_classes[] = 'phabricator-object-item-grippable';
    }

+    if ($this->stateIconColumns) {
+      $cols = $this->stateIconColumns;
+      $item_classes[] = 'phabricator-object-item-state-'.$cols.'-cols';
+    }
+
    return array(
      'class' => $item_classes,
    );
@ -381,6 +405,33 @@ final class PhabricatorObjectItemView extends AphrontTagView {
        '');
    }

+    $state_icons = null;
+    if ($this->stateIconColumns) {
+      foreach ($this->stateIcons as $state_icon) {
+        $sicon = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+          ->setSpriteIcon($state_icon['name']);
+
+        if ($state_icon['label']) {
+          $sicon->addSigil('has-tooltip');
+          $sicon->setMetadata(
+            array(
+              'tip' => $state_icon['label'],
+            ));
+        }
+
+        $icon_list[] = $sicon;
+      }
+      $cols = $this->stateIconColumns;
+      $state_icons = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-object-item-state-icons '.
+                     'state-icon-'.$cols.'-cols',
+        ),
+        $icon_list);
+    }
+
    $content = phutil_tag(
      'div',
      array(
@ -400,6 +451,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
      ),
      array(
        $grippable,
+        $state_icons,
        $header,
        $icons,
        $bylines,
--- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css
+++ b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css
@ -77,10 +77,49 @@
  background: url(/rsrc/image/texture/grip.png) center center no-repeat;
 }

+.phabricator-object-item-state-icons {
+  top: 0;
+  left: 4px;
+  width: 20px;
+  position: absolute;
+  padding: 6px 4px;
+}
+
+.phabricator-object-item-state-icons span.phui-icon-view {
+  display: inline-block;
+  margin: 1px 2px 2px;
+}
+
+.phabricator-object-item-grippable .phabricator-object-item-state-icons {
+  left: 15px;
+}
+
+.state-icon-2-cols {
+  width: 40px;
+}
+
 .phabricator-object-item-grippable .phabricator-object-item-frame {
  padding-left: 11px;
 }

+.phabricator-object-item-state-1-cols .phabricator-object-item-frame {
+  padding-left: 24px;
+}
+
+.phabricator-object-item-state-2-cols .phabricator-object-item-frame {
+  padding-left: 44px;
+}
+
+.phabricator-object-item-grippable.phabricator-object-item-state-1-cols
+  .phabricator-object-item-frame {
+  padding-left: 35px;
+}
+
+.phabricator-object-item-grippable.phabricator-object-item-state-2-cols
+  .phabricator-object-item-frame {
+  padding-left: 55px;
+}
+
 /* - Item Actions --------------------------------------------------------------

  Action buttons, like "Edit" and "Delete".