archive/phabricator
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add action icons to object list views

Browse Source 
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.

Instead, provide first-class actions:

{F42978}

They produce targets which my meaty ham-fists can plausibly hit on mobile, too:

{F42979}

(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)

Test Plan: Added UIExamples. Checked desktop/mobile.

Reviewers: chad, btrahan, edward

Reviewed By: btrahan

CC: aran

Differential Revision: https://secure.phabricator.com/D5890
This commit is contained in:
epriestley
2013-05-10 12:57:01 -07:00
parent 2d3e75938f
commit cbd3c0b7ac
38 changed files with 1853 additions and 1710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/view/layout/PhabricatorObjectItemView.php
View File

@@ -15,6 +15,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
private $handleIcons = array();
private $bylines = array();
private $grippable;
private $actions = array();
public function setObjectName($name) {
$this->objectName = $name;
@@ -76,6 +77,14 @@ final class PhabricatorObjectItemView extends AphrontTagView {
return $this;
}
public function addAction(PhabricatorMenuItemView $action) {
if (count($this->actions) >= 3) {
throw new Exception("Limit 3 actions per item.");
}
$this->actions[] = $action;
return $this;
}
public function addIcon($icon, $label = null, $href = null) {
$this->icons[] = array(
'icon' => $icon,
@@ -149,6 +158,12 @@ final class PhabricatorObjectItemView extends AphrontTagView {
$item_classes[] = 'phabricator-object-item-with-bylines';
}
if ($this->actions) {
$n = count($this->actions);
$item_classes[] = 'phabricator-object-item-with-actions';
$item_classes[] = 'phabricator-object-item-with-'.$n.'-actions';
}
switch ($this->effect) {
case 'highlighted':
$item_classes[] = 'phabricator-object-item-highlighted';
@@ -217,7 +232,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
'span',
array(
'class' => 'phabricator-object-item-icon-image '.
'sprite-icon action-'.$icon,
'sprite-icons icons-'.$icon,
),
'');
@@ -376,10 +391,10 @@ final class PhabricatorObjectItemView extends AphrontTagView {
$foot,
));
return phutil_tag(
$box = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-frame',
'class' => 'phabricator-object-item-content-box',
),
array(
$grippable,
@@ -388,15 +403,38 @@ final class PhabricatorObjectItemView extends AphrontTagView {
$bylines,
$content,
));
$actions = array();
if ($this->actions) {
foreach (array_reverse($this->actions) as $action) {
$actions[] = $action;
}
$actions = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-actions',
),
$actions);
}
return phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-frame',
),
array(
$actions,
$box,
));
}
private function renderFootIcon($icon, $label) {
require_celerity_resource('sprite-icon-css');
require_celerity_resource('sprite-icons-css');
$icon = phutil_tag(
'span',
array(
'class' => 'sprite-icon action-'.$icon,
'class' => 'sprite-icons icons-'.$icon,
),
'');