1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

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
This commit is contained in:
Chad Little 2017-03-16 11:32:01 -07:00
parent 19af10df37
commit de4e8728b2
4 changed files with 75 additions and 5 deletions

View file

@ -9,7 +9,7 @@ return array(
'names' => array( 'names' => array(
'conpherence.pkg.css' => '32f2c040', 'conpherence.pkg.css' => '32f2c040',
'conpherence.pkg.js' => '6249a1cf', 'conpherence.pkg.js' => '6249a1cf',
'core.pkg.css' => 'c0c87dac', 'core.pkg.css' => '491d7018',
'core.pkg.js' => '1fa7c0c5', 'core.pkg.js' => '1fa7c0c5',
'darkconsole.pkg.js' => 'e7393ebb', 'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '90b30783', 'differential.pkg.css' => '90b30783',
@ -158,7 +158,7 @@ return array(
'rsrc/css/phui/phui-info-view.css' => 'ec92802a', 'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0', 'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
'rsrc/css/phui/phui-lightbox.css' => '0a035e40', '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-object-box.css' => '8b289e3d',
'rsrc/css/phui/phui-pager.css' => '77d8a794', 'rsrc/css/phui/phui-pager.css' => '77d8a794',
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
@ -872,7 +872,7 @@ return array(
'phui-inline-comment-view-css' => 'be663c95', 'phui-inline-comment-view-css' => 'be663c95',
'phui-invisible-character-view-css' => '6993d9f0', 'phui-invisible-character-view-css' => '6993d9f0',
'phui-lightbox-css' => '0a035e40', 'phui-lightbox-css' => '0a035e40',
'phui-list-view-css' => '9da2aa00', 'phui-list-view-css' => 'a3ec3cf1',
'phui-object-box-css' => '8b289e3d', 'phui-object-box-css' => '8b289e3d',
'phui-oi-big-ui-css' => '19f9369b', 'phui-oi-big-ui-css' => '19f9369b',
'phui-oi-color-css' => 'cd2b9b77', 'phui-oi-color-css' => 'cd2b9b77',

View file

@ -133,11 +133,13 @@ final class PhabricatorDashboardProfileMenuItem
$icon = $dashboard->getIcon(); $icon = $dashboard->getIcon();
$name = $this->getDisplayName($config); $name = $this->getDisplayName($config);
$href = $this->getItemViewURI($config); $href = $this->getItemViewURI($config);
$action_href = '/dashboard/arrange/'.$dashboard->getID().'/';
$item = $this->newItem() $item = $this->newItem()
->setHref($href) ->setHref($href)
->setName($name) ->setName($name)
->setIcon($icon); ->setIcon($icon)
->setActionIcon('fa-pencil', $action_href);
return array( return array(
$item, $item,

View file

@ -31,6 +31,8 @@ final class PHUIListItemView extends AphrontTagView {
private $icons = array(); private $icons = array();
private $openInNewWindow = false; private $openInNewWindow = false;
private $tooltip; private $tooltip;
private $actionIcon;
private $actionIconHref;
public function setOpenInNewWindow($open_in_new_window) { public function setOpenInNewWindow($open_in_new_window) {
$this->openInNewWindow = $open_in_new_window; $this->openInNewWindow = $open_in_new_window;
@ -154,6 +156,12 @@ final class PHUIListItemView extends AphrontTagView {
return $this->name; return $this->name;
} }
public function setActionIcon($icon, $href) {
$this->actionIcon = $icon;
$this->actionIconHref = $href;
return $this;
}
public function setIsExternal($is_external) { public function setIsExternal($is_external) {
$this->isExternal = $is_external; $this->isExternal = $is_external;
return $this; return $this;
@ -207,6 +215,10 @@ final class PHUIListItemView extends AphrontTagView {
$classes[] = $this->statusColor; $classes[] = $this->statusColor;
} }
if ($this->actionIcon) {
$classes[] = 'phui-list-item-has-action-icon';
}
return array( return array(
'class' => implode(' ', $classes), 'class' => implode(' ', $classes),
); );
@ -311,9 +323,23 @@ final class PHUIListItemView extends AphrontTagView {
$classes[] = 'phui-list-item-indented'; $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(); $icons = $this->getIcons();
return javelin_tag( $list_item = javelin_tag(
$this->href ? 'a' : 'div', $this->href ? 'a' : 'div',
array( array(
'href' => $this->href, 'href' => $this->href,
@ -329,6 +355,8 @@ final class PHUIListItemView extends AphrontTagView {
$this->renderChildren(), $this->renderChildren(),
$name, $name,
)); ));
return array($list_item, $action_link);
} }
} }

View file

@ -2,6 +2,10 @@
* @provides phui-list-view-css * @provides phui-list-view-css
*/ */
.phui-list-item-view {
position: relative;
}
.phui-list-item-header, .phui-list-item-header,
.phui-list-item-header a { .phui-list-item-header a {
color: {$bluetext}; color: {$bluetext};
@ -188,3 +192,39 @@
margin-top: 16px; margin-top: 16px;
border-top: 1px solid {$thinblueborder}; 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;
}