From de4e8728b2fa8e1611cac54c7e41cf7fe3a863e9 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 16 Mar 2017 11:32:01 -0700 Subject: [PATCH] Add ActionIcon to PHUIListItemView, use in Dashboards Summary: Extends PHUIListItemView to take an icon, link as an "Action Item" that displays on the right side of the menu link. Does not display on Favorites. This allows for adding edit, external, or other links (documentation?) to any menu item. Right now the secondary link is only visible when the item is selected. This feels right, but if we offer it in other ways, users may always want it visible. We could look at making it onhover. Test Plan: Add a bunch of random global and personal dashboards to my menu. Add a menu to Favorites, see no link. Test mobile, link works. {F4136699} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17505 --- resources/celerity/map.php | 6 +-- .../PhabricatorDashboardProfileMenuItem.php | 4 +- src/view/phui/PHUIListItemView.php | 30 +++++++++++++- webroot/rsrc/css/phui/phui-list.css | 40 +++++++++++++++++++ 4 files changed, 75 insertions(+), 5 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 46bb152704..2eab0ac0c3 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => '32f2c040', 'conpherence.pkg.js' => '6249a1cf', - 'core.pkg.css' => 'c0c87dac', + 'core.pkg.css' => '491d7018', 'core.pkg.js' => '1fa7c0c5', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '90b30783', @@ -158,7 +158,7 @@ return array( 'rsrc/css/phui/phui-info-view.css' => 'ec92802a', 'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0', 'rsrc/css/phui/phui-lightbox.css' => '0a035e40', - 'rsrc/css/phui/phui-list.css' => '9da2aa00', + 'rsrc/css/phui/phui-list.css' => 'a3ec3cf1', 'rsrc/css/phui/phui-object-box.css' => '8b289e3d', 'rsrc/css/phui/phui-pager.css' => '77d8a794', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', @@ -872,7 +872,7 @@ return array( 'phui-inline-comment-view-css' => 'be663c95', 'phui-invisible-character-view-css' => '6993d9f0', 'phui-lightbox-css' => '0a035e40', - 'phui-list-view-css' => '9da2aa00', + 'phui-list-view-css' => 'a3ec3cf1', 'phui-object-box-css' => '8b289e3d', 'phui-oi-big-ui-css' => '19f9369b', 'phui-oi-color-css' => 'cd2b9b77', diff --git a/src/applications/search/menuitem/PhabricatorDashboardProfileMenuItem.php b/src/applications/search/menuitem/PhabricatorDashboardProfileMenuItem.php index c442a2cc46..7d4f319b61 100644 --- a/src/applications/search/menuitem/PhabricatorDashboardProfileMenuItem.php +++ b/src/applications/search/menuitem/PhabricatorDashboardProfileMenuItem.php @@ -133,11 +133,13 @@ final class PhabricatorDashboardProfileMenuItem $icon = $dashboard->getIcon(); $name = $this->getDisplayName($config); $href = $this->getItemViewURI($config); + $action_href = '/dashboard/arrange/'.$dashboard->getID().'/'; $item = $this->newItem() ->setHref($href) ->setName($name) - ->setIcon($icon); + ->setIcon($icon) + ->setActionIcon('fa-pencil', $action_href); return array( $item, diff --git a/src/view/phui/PHUIListItemView.php b/src/view/phui/PHUIListItemView.php index 7b6e55a697..1a6d26d917 100644 --- a/src/view/phui/PHUIListItemView.php +++ b/src/view/phui/PHUIListItemView.php @@ -31,6 +31,8 @@ final class PHUIListItemView extends AphrontTagView { private $icons = array(); private $openInNewWindow = false; private $tooltip; + private $actionIcon; + private $actionIconHref; public function setOpenInNewWindow($open_in_new_window) { $this->openInNewWindow = $open_in_new_window; @@ -154,6 +156,12 @@ final class PHUIListItemView extends AphrontTagView { return $this->name; } + public function setActionIcon($icon, $href) { + $this->actionIcon = $icon; + $this->actionIconHref = $href; + return $this; + } + public function setIsExternal($is_external) { $this->isExternal = $is_external; return $this; @@ -207,6 +215,10 @@ final class PHUIListItemView extends AphrontTagView { $classes[] = $this->statusColor; } + if ($this->actionIcon) { + $classes[] = 'phui-list-item-has-action-icon'; + } + return array( 'class' => implode(' ', $classes), ); @@ -311,9 +323,23 @@ final class PHUIListItemView extends AphrontTagView { $classes[] = 'phui-list-item-indented'; } + $action_link = null; + if ($this->actionIcon) { + $action_icon = id(new PHUIIconView()) + ->setIcon($this->actionIcon) + ->addClass('phui-list-item-action-icon'); + $action_link = phutil_tag( + 'a', + array( + 'href' => $this->actionIconHref, + 'class' => 'phui-list-item-action-href', + ), + $action_icon); + } + $icons = $this->getIcons(); - return javelin_tag( + $list_item = javelin_tag( $this->href ? 'a' : 'div', array( 'href' => $this->href, @@ -329,6 +355,8 @@ final class PHUIListItemView extends AphrontTagView { $this->renderChildren(), $name, )); + + return array($list_item, $action_link); } } diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css index 25504a611d..eadd1987ee 100644 --- a/webroot/rsrc/css/phui/phui-list.css +++ b/webroot/rsrc/css/phui/phui-list.css @@ -2,6 +2,10 @@ * @provides phui-list-view-css */ +.phui-list-item-view { + position: relative; +} + .phui-list-item-header, .phui-list-item-header a { color: {$bluetext}; @@ -188,3 +192,39 @@ margin-top: 16px; border-top: 1px solid {$thinblueborder}; } + +/* - Action Icon ----------------------------------------------------------- */ + +.phui-list-item-has-action-icon .phui-list-item-action-href { + position: absolute; + width: 28px; + top: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 28px; + background-color: transparent; + display: none; +} + +.phui-list-item-has-action-icon.phui-list-item-selected .phui-list-item-href { + padding-right: 32px; +} + +.phui-list-item-has-action-icon.phui-list-item-selected + .phui-list-item-action-href { + display: block; +} + +.phui-list-item-has-action-icon .phui-list-item-action-href:hover { + background-color: rgba({$alphablack},.05); +} + +.phui-list-item-has-action-icon .phui-list-item-action-icon { + opacity: 0.5; +} + +.phui-list-item-has-action-icon .phui-list-item-action-href:hover + .phui-list-item-action-icon { + opacity: 1; +}