From dd132b632a28ce2223bfd008d3417cc9bab1b65d Mon Sep 17 00:00:00 2001 From: epriestley Date: Wed, 24 Jul 2013 14:13:22 -0700 Subject: [PATCH] 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 | 9 ++ src/__phutil_library_map__.php | 6 ++ .../examples/PhabricatorUIStatusExample.php | 79 ++++++++++++++++ src/view/layout/PhabricatorActionView.php | 7 +- src/view/phui/PHUIIconView.php | 10 ++ src/view/phui/PHUIListItemView.php | 2 - src/view/phui/PHUIStatusItemView.php | 94 +++++++++++++++++++ src/view/phui/PHUIStatusListView.php | 33 +++++++ webroot/rsrc/css/phui/phui-status.css | 30 ++++++ 9 files changed, 263 insertions(+), 7 deletions(-) create mode 100644 src/applications/uiexample/examples/PhabricatorUIStatusExample.php create mode 100644 src/view/phui/PHUIStatusItemView.php create mode 100644 src/view/phui/PHUIStatusListView.php create mode 100644 webroot/rsrc/css/phui/phui-status.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index fd96f6e7fa..573f771083 100644 --- a/src/__celerity_resource_map__.php +++ b/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', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 85bddae9a4..3f1bc3d78b 100644 --- a/src/__phutil_library_map__.php +++ b/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' => diff --git a/src/applications/uiexample/examples/PhabricatorUIStatusExample.php b/src/applications/uiexample/examples/PhabricatorUIStatusExample.php new file mode 100644 index 0000000000..f98bb7ec34 --- /dev/null +++ b/src/applications/uiexample/examples/PhabricatorUIStatusExample.php @@ -0,0 +1,79 @@ +PHUIStatusListView 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; + } +} diff --git a/src/view/layout/PhabricatorActionView.php b/src/view/layout/PhabricatorActionView.php index 30038a414e..09da51c0ba 100644 --- a/src/view/layout/PhabricatorActionView.php +++ b/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; diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php index aec244ae9e..4fb475bcd2 100644 --- a/src/view/phui/PHUIIconView.php +++ b/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'); + } + + } diff --git a/src/view/phui/PHUIListItemView.php b/src/view/phui/PHUIListItemView.php index 4037c6268b..f8c84df791 100644 --- a/src/view/phui/PHUIListItemView.php +++ b/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; diff --git a/src/view/phui/PHUIStatusItemView.php b/src/view/phui/PHUIStatusItemView.php new file mode 100644 index 0000000000..0bc45f6ede --- /dev/null +++ b/src/view/phui/PHUIStatusItemView.php @@ -0,0 +1,94 @@ +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, + ); + } +} diff --git a/src/view/phui/PHUIStatusListView.php b/src/view/phui/PHUIStatusListView.php new file mode 100644 index 0000000000..64c115ecf0 --- /dev/null +++ b/src/view/phui/PHUIStatusListView.php @@ -0,0 +1,33 @@ +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; + } +} diff --git a/webroot/rsrc/css/phui/phui-status.css b/webroot/rsrc/css/phui/phui-status.css new file mode 100644 index 0000000000..ed0b5bfaa3 --- /dev/null +++ b/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}; +}