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:
parent
19af10df37
commit
de4e8728b2
4 changed files with 75 additions and 5 deletions
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue