From e70bb28ea00d16b4fac634edbbcb55d5b574126f Mon Sep 17 00:00:00 2001 From: epriestley Date: Tue, 2 Jul 2013 16:29:43 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 90 +++++++++---------- .../PhabricatorObjectItemListExample.php | 51 +++++++++++ src/view/layout/PhabricatorObjectItemView.php | 52 +++++++++++ .../phabricator-object-item-list-view.css | 39 ++++++++ 4 files changed, 187 insertions(+), 45 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 68cc9d29da..5d37313490 100644 --- 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', ), )); diff --git a/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php b/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php index 7786151f7f..6a697fb6e0 100644 --- 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; } } diff --git a/src/view/layout/PhabricatorObjectItemView.php b/src/view/layout/PhabricatorObjectItemView.php index 14023e38ca..f5febab728 100644 --- 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, diff --git a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css index 3cef6f0b00..bc14bf2ac7 100644 --- 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".