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

@@ -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',

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,

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);
   }
 
 }

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;
+}