@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+75
-5
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '32f2c040',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => 'c0c87dac',
12
+
'core.pkg.css' => '491d7018',
13
13
'core.pkg.js' => '1fa7c0c5',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => '90b30783',
···
158
158
'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
159
159
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
160
160
'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
161
-
'rsrc/css/phui/phui-list.css' => '9da2aa00',
161
+
'rsrc/css/phui/phui-list.css' => 'a3ec3cf1',
162
162
'rsrc/css/phui/phui-object-box.css' => '8b289e3d',
163
163
'rsrc/css/phui/phui-pager.css' => '77d8a794',
164
164
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
···
872
872
'phui-inline-comment-view-css' => 'be663c95',
873
873
'phui-invisible-character-view-css' => '6993d9f0',
874
874
'phui-lightbox-css' => '0a035e40',
875
-
'phui-list-view-css' => '9da2aa00',
875
+
'phui-list-view-css' => 'a3ec3cf1',
876
876
'phui-object-box-css' => '8b289e3d',
877
877
'phui-oi-big-ui-css' => '19f9369b',
878
878
'phui-oi-color-css' => 'cd2b9b77',
+29
-1
src/view/phui/PHUIListItemView.php
+29
-1
src/view/phui/PHUIListItemView.php
···
31
31
private $icons = array();
32
32
private $openInNewWindow = false;
33
33
private $tooltip;
34
+
private $actionIcon;
35
+
private $actionIconHref;
34
36
35
37
public function setOpenInNewWindow($open_in_new_window) {
36
38
$this->openInNewWindow = $open_in_new_window;
···
152
154
153
155
public function getName() {
154
156
return $this->name;
157
+
}
158
+
159
+
public function setActionIcon($icon, $href) {
160
+
$this->actionIcon = $icon;
161
+
$this->actionIconHref = $href;
162
+
return $this;
155
163
}
156
164
157
165
public function setIsExternal($is_external) {
···
207
215
$classes[] = $this->statusColor;
208
216
}
209
217
218
+
if ($this->actionIcon) {
219
+
$classes[] = 'phui-list-item-has-action-icon';
220
+
}
221
+
210
222
return array(
211
223
'class' => implode(' ', $classes),
212
224
);
···
311
323
$classes[] = 'phui-list-item-indented';
312
324
}
313
325
326
+
$action_link = null;
327
+
if ($this->actionIcon) {
328
+
$action_icon = id(new PHUIIconView())
329
+
->setIcon($this->actionIcon)
330
+
->addClass('phui-list-item-action-icon');
331
+
$action_link = phutil_tag(
332
+
'a',
333
+
array(
334
+
'href' => $this->actionIconHref,
335
+
'class' => 'phui-list-item-action-href',
336
+
),
337
+
$action_icon);
338
+
}
339
+
314
340
$icons = $this->getIcons();
315
341
316
-
return javelin_tag(
342
+
$list_item = javelin_tag(
317
343
$this->href ? 'a' : 'div',
318
344
array(
319
345
'href' => $this->href,
···
329
355
$this->renderChildren(),
330
356
$name,
331
357
));
358
+
359
+
return array($list_item, $action_link);
332
360
}
333
361
334
362
}
+40
webroot/rsrc/css/phui/phui-list.css
+40
webroot/rsrc/css/phui/phui-list.css
···
2
2
* @provides phui-list-view-css
3
3
*/
4
4
5
+
.phui-list-item-view {
6
+
position: relative;
7
+
}
8
+
5
9
.phui-list-item-header,
6
10
.phui-list-item-header a {
7
11
color: {$bluetext};
···
188
192
margin-top: 16px;
189
193
border-top: 1px solid {$thinblueborder};
190
194
}
195
+
196
+
/* - Action Icon ----------------------------------------------------------- */
197
+
198
+
.phui-list-item-has-action-icon .phui-list-item-action-href {
199
+
position: absolute;
200
+
width: 28px;
201
+
top: 0;
202
+
right: 0;
203
+
bottom: 0;
204
+
text-align: center;
205
+
line-height: 28px;
206
+
background-color: transparent;
207
+
display: none;
208
+
}
209
+
210
+
.phui-list-item-has-action-icon.phui-list-item-selected .phui-list-item-href {
211
+
padding-right: 32px;
212
+
}
213
+
214
+
.phui-list-item-has-action-icon.phui-list-item-selected
215
+
.phui-list-item-action-href {
216
+
display: block;
217
+
}
218
+
219
+
.phui-list-item-has-action-icon .phui-list-item-action-href:hover {
220
+
background-color: rgba({$alphablack},.05);
221
+
}
222
+
223
+
.phui-list-item-has-action-icon .phui-list-item-action-icon {
224
+
opacity: 0.5;
225
+
}
226
+
227
+
.phui-list-item-has-action-icon .phui-list-item-action-href:hover
228
+
.phui-list-item-action-icon {
229
+
opacity: 1;
230
+
}