2012-08-15 19:45:06 +02:00
|
|
|
<?php
|
|
|
|
|
2013-09-09 23:14:34 +02:00
|
|
|
final class PHUIObjectItemView extends AphrontTagView {
|
2012-08-15 19:45:06 +02:00
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
private $objectName;
|
2012-08-15 19:45:06 +02:00
|
|
|
private $header;
|
2013-05-06 23:01:57 +02:00
|
|
|
private $subhead;
|
2012-08-15 19:45:06 +02:00
|
|
|
private $href;
|
2012-10-01 05:08:22 +02:00
|
|
|
private $attributes = array();
|
2012-12-13 19:59:29 +01:00
|
|
|
private $icons = array();
|
|
|
|
private $barColor;
|
|
|
|
private $object;
|
2012-12-17 01:33:02 +01:00
|
|
|
private $effect;
|
2013-03-10 02:55:01 +01:00
|
|
|
private $footIcons = array();
|
|
|
|
private $handleIcons = array();
|
2013-04-06 20:38:43 +02:00
|
|
|
private $bylines = array();
|
2013-03-23 22:37:18 +01:00
|
|
|
private $grippable;
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
private $actions = array();
|
2013-07-03 17:52:53 +02:00
|
|
|
private $headIcons = array();
|
2013-07-12 20:31:20 +02:00
|
|
|
private $disabled;
|
2014-03-20 03:26:24 +01:00
|
|
|
private $imageURI;
|
2014-04-29 19:14:18 +02:00
|
|
|
private $state;
|
|
|
|
private $fontIcon;
|
2014-05-29 21:17:54 +02:00
|
|
|
private $imageIcon;
|
2013-07-12 20:31:20 +02:00
|
|
|
|
2013-08-29 01:48:42 +02:00
|
|
|
const AGE_FRESH = 'fresh';
|
|
|
|
const AGE_STALE = 'stale';
|
|
|
|
const AGE_OLD = 'old';
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
const STATE_SUCCESS = 'green';
|
|
|
|
const STATE_FAIL = 'red';
|
|
|
|
const STATE_WARN = 'yellow';
|
|
|
|
const STATE_NOTE = 'blue';
|
2014-04-29 20:10:16 +02:00
|
|
|
const STATE_BUILD = 'sky';
|
2014-04-29 19:14:18 +02:00
|
|
|
|
2013-07-12 20:31:20 +02:00
|
|
|
public function setDisabled($disabled) {
|
|
|
|
$this->disabled = $disabled;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getDisabled() {
|
|
|
|
return $this->disabled;
|
|
|
|
}
|
2013-07-03 01:29:43 +02:00
|
|
|
|
2013-07-03 17:52:53 +02:00
|
|
|
public function addHeadIcon($icon) {
|
|
|
|
$this->headIcons[] = $icon;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
public function setObjectName($name) {
|
|
|
|
$this->objectName = $name;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function setGrippable($grippable) {
|
|
|
|
$this->grippable = $grippable;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getGrippable() {
|
|
|
|
return $this->grippable;
|
|
|
|
}
|
2012-12-17 01:33:02 +01:00
|
|
|
|
|
|
|
public function setEffect($effect) {
|
|
|
|
$this->effect = $effect;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getEffect() {
|
|
|
|
return $this->effect;
|
|
|
|
}
|
2012-12-13 19:59:29 +01:00
|
|
|
|
|
|
|
public function setObject($object) {
|
|
|
|
$this->object = $object;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getObject() {
|
|
|
|
return $this->object;
|
|
|
|
}
|
2012-08-15 19:45:06 +02:00
|
|
|
|
|
|
|
public function setHref($href) {
|
|
|
|
$this->href = $href;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getHref() {
|
|
|
|
return $this->href;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function setHeader($header) {
|
|
|
|
$this->header = $header;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-05-06 23:01:57 +02:00
|
|
|
public function setSubHead($subhead) {
|
|
|
|
$this->subhead = $subhead;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2012-08-15 19:45:06 +02:00
|
|
|
public function getHeader() {
|
|
|
|
return $this->header;
|
|
|
|
}
|
|
|
|
|
2013-04-06 20:38:43 +02:00
|
|
|
public function addByline($byline) {
|
|
|
|
$this->bylines[] = $byline;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2014-03-20 03:26:24 +01:00
|
|
|
public function setImageURI($image_uri) {
|
|
|
|
$this->imageURI = $image_uri;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getImageURI() {
|
|
|
|
return $this->imageURI;
|
|
|
|
}
|
|
|
|
|
2014-05-29 21:17:54 +02:00
|
|
|
public function setImageIcon($image_icon) {
|
|
|
|
$this->imageIcon = $image_icon;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getImageIcon() {
|
|
|
|
return $this->imageIcon;
|
|
|
|
}
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
public function setState($state) {
|
|
|
|
$this->state = $state;
|
|
|
|
switch ($state) {
|
|
|
|
case self::STATE_SUCCESS:
|
|
|
|
$fi = 'fa-check-circle green';
|
|
|
|
break;
|
|
|
|
case self::STATE_FAIL:
|
|
|
|
$fi = 'fa-times-circle red';
|
|
|
|
break;
|
|
|
|
case self::STATE_WARN:
|
|
|
|
$fi = 'fa-exclamation-circle yellow';
|
|
|
|
break;
|
|
|
|
case self::STATE_NOTE:
|
|
|
|
$fi = 'fa-info-circle blue';
|
|
|
|
break;
|
2014-04-29 20:10:16 +02:00
|
|
|
case self::STATE_BUILD:
|
|
|
|
$fi = 'fa-refresh ph-spin sky';
|
|
|
|
break;
|
2014-04-29 19:14:18 +02:00
|
|
|
}
|
|
|
|
$this->fontIcon = id(new PHUIIconView())
|
|
|
|
->setIconFont($fi.' fa-2x');
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-08-29 01:48:42 +02:00
|
|
|
public function setEpoch($epoch, $age = self::AGE_FRESH) {
|
|
|
|
$date = phabricator_datetime($epoch, $this->getUser());
|
|
|
|
|
|
|
|
$days = floor((time() - $epoch) / 60 / 60 / 24);
|
|
|
|
|
|
|
|
switch ($age) {
|
|
|
|
case self::AGE_FRESH:
|
|
|
|
$this->addIcon('none', $date);
|
|
|
|
break;
|
|
|
|
case self::AGE_STALE:
|
|
|
|
$attr = array(
|
|
|
|
'tip' => pht('Stale (%s day(s))', new PhutilNumber($days)),
|
|
|
|
'class' => 'icon-age-stale',
|
|
|
|
);
|
2014-05-12 19:08:32 +02:00
|
|
|
|
|
|
|
$this->addIcon('fa-clock-o yellow', $date, $attr);
|
2013-08-29 01:48:42 +02:00
|
|
|
break;
|
|
|
|
case self::AGE_OLD:
|
|
|
|
$attr = array(
|
|
|
|
'tip' => pht('Old (%s day(s))', new PhutilNumber($days)),
|
|
|
|
'class' => 'icon-age-old',
|
|
|
|
);
|
2014-05-12 19:08:32 +02:00
|
|
|
$this->addIcon('fa-clock-o red', $date, $attr);
|
2013-08-29 01:48:42 +02:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
throw new Exception("Unknown age '{$age}'!");
|
|
|
|
}
|
|
|
|
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
public function addAction(PHUIListItemView $action) {
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
if (count($this->actions) >= 3) {
|
2014-06-09 20:36:49 +02:00
|
|
|
throw new Exception('Limit 3 actions per item.');
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
$this->actions[] = $action;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-07-03 17:52:46 +02:00
|
|
|
public function addIcon($icon, $label = null, $attributes = array()) {
|
2012-12-13 19:59:29 +01:00
|
|
|
$this->icons[] = array(
|
|
|
|
'icon' => $icon,
|
|
|
|
'label' => $label,
|
2013-07-03 17:52:46 +02:00
|
|
|
'attributes' => $attributes,
|
2012-08-15 19:45:06 +02:00
|
|
|
);
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-03-10 02:55:01 +01:00
|
|
|
public function addFootIcon($icon, $label = null) {
|
|
|
|
$this->footIcons[] = array(
|
|
|
|
'icon' => $icon,
|
|
|
|
'label' => $label,
|
|
|
|
);
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function addHandleIcon(
|
|
|
|
PhabricatorObjectHandle $handle,
|
|
|
|
$label = null) {
|
|
|
|
$this->handleIcons[] = array(
|
|
|
|
'icon' => $handle,
|
|
|
|
'label' => $label,
|
|
|
|
);
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2012-12-13 19:59:29 +01:00
|
|
|
public function setBarColor($bar_color) {
|
|
|
|
$this->barColor = $bar_color;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getBarColor() {
|
|
|
|
return $this->barColor;
|
|
|
|
}
|
|
|
|
|
2012-08-15 19:45:06 +02:00
|
|
|
public function addAttribute($attribute) {
|
2013-05-14 01:04:06 +02:00
|
|
|
if (!empty($attribute)) {
|
|
|
|
$this->attributes[] = $attribute;
|
|
|
|
}
|
2012-08-15 19:45:06 +02:00
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
protected function getTagName() {
|
|
|
|
return 'li';
|
|
|
|
}
|
|
|
|
|
|
|
|
protected function getTagAttributes() {
|
2013-03-10 02:55:01 +01:00
|
|
|
$item_classes = array();
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item';
|
2013-03-23 22:38:01 +01:00
|
|
|
|
|
|
|
if ($this->icons) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-with-icons';
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if ($this->attributes) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-with-attrs';
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if ($this->handleIcons) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-with-handle-icons';
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if ($this->barColor) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-bar-color-'.$this->barColor;
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if ($this->footIcons) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-with-foot-icons';
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
if ($this->actions) {
|
|
|
|
$n = count($this->actions);
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-with-actions';
|
|
|
|
$item_classes[] = 'phui-object-item-with-'.$n.'-actions';
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
}
|
|
|
|
|
2013-07-12 20:31:20 +02:00
|
|
|
if ($this->disabled) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-disabled';
|
2013-07-12 20:31:20 +02:00
|
|
|
}
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
if ($this->state) {
|
|
|
|
$item_classes[] = 'phui-object-item-state-'.$this->state;
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
switch ($this->effect) {
|
|
|
|
case 'highlighted':
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-highlighted';
|
2013-03-23 22:38:01 +01:00
|
|
|
break;
|
|
|
|
case 'selected':
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-selected';
|
2013-03-23 22:38:01 +01:00
|
|
|
break;
|
|
|
|
case null:
|
|
|
|
break;
|
|
|
|
default:
|
2014-06-09 20:36:49 +02:00
|
|
|
throw new Exception(pht('Invalid effect!'));
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if ($this->getGrippable()) {
|
2013-09-09 23:14:34 +02:00
|
|
|
$item_classes[] = 'phui-object-item-grippable';
|
2013-03-23 22:38:01 +01:00
|
|
|
}
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
if ($this->getImageURI()) {
|
2014-03-20 03:26:24 +01:00
|
|
|
$item_classes[] = 'phui-object-item-with-image';
|
|
|
|
}
|
|
|
|
|
2014-05-29 21:17:54 +02:00
|
|
|
if ($this->getImageIcon()) {
|
|
|
|
$item_classes[] = 'phui-object-item-with-image-icon';
|
|
|
|
}
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
if ($this->fontIcon) {
|
|
|
|
$item_classes[] = 'phui-object-item-with-ficon';
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
return array(
|
|
|
|
'class' => $item_classes,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getTagContent() {
|
|
|
|
$content_classes = array();
|
2013-09-09 23:14:34 +02:00
|
|
|
$content_classes[] = 'phui-object-item-content';
|
2013-03-10 02:55:01 +01:00
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
$header_name = null;
|
|
|
|
if ($this->objectName) {
|
|
|
|
$header_name = array(
|
|
|
|
phutil_tag(
|
|
|
|
'span',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-objname',
|
2013-03-23 22:37:18 +01:00
|
|
|
),
|
|
|
|
$this->objectName),
|
|
|
|
' ',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
$header_link = phutil_tag(
|
2013-03-10 02:55:01 +01:00
|
|
|
$this->href ? 'a' : 'div',
|
2012-08-15 19:45:06 +02:00
|
|
|
array(
|
|
|
|
'href' => $this->href,
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-link',
|
2012-08-15 19:45:06 +02:00
|
|
|
),
|
2013-01-18 03:43:35 +01:00
|
|
|
$this->header);
|
2012-08-15 19:45:06 +02:00
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
$header = javelin_tag(
|
2013-03-23 22:37:18 +01:00
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-name',
|
2013-03-23 22:38:01 +01:00
|
|
|
'sigil' => 'slippery',
|
2013-03-23 22:37:18 +01:00
|
|
|
),
|
|
|
|
array(
|
2013-07-03 17:52:53 +02:00
|
|
|
$this->headIcons,
|
2013-03-23 22:37:18 +01:00
|
|
|
$header_name,
|
|
|
|
$header_link,
|
|
|
|
));
|
|
|
|
|
|
|
|
$icons = array();
|
2012-12-13 19:59:29 +01:00
|
|
|
if ($this->icons) {
|
|
|
|
$icon_list = array();
|
|
|
|
foreach ($this->icons as $spec) {
|
|
|
|
$icon = $spec['icon'];
|
2014-05-12 19:08:32 +02:00
|
|
|
$icon = id(new PHUIIconView())
|
|
|
|
->setIconFont($icon)
|
|
|
|
->addClass('phui-object-item-icon-image');
|
2012-12-13 19:59:29 +01:00
|
|
|
|
2013-07-03 17:52:46 +02:00
|
|
|
if (isset($spec['attributes']['tip'])) {
|
|
|
|
$sigil = 'has-tooltip';
|
|
|
|
$meta = array(
|
|
|
|
'tip' => $spec['attributes']['tip'],
|
|
|
|
'align' => 'W',
|
|
|
|
);
|
2014-05-12 19:08:32 +02:00
|
|
|
$icon->addSigil($sigil);
|
|
|
|
$icon->setMetadata($meta);
|
2013-07-03 17:52:46 +02:00
|
|
|
}
|
|
|
|
|
2013-01-18 03:43:35 +01:00
|
|
|
$label = phutil_tag(
|
2012-12-13 19:59:29 +01:00
|
|
|
'span',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-icon-label',
|
2012-12-13 19:59:29 +01:00
|
|
|
),
|
2013-01-18 03:43:35 +01:00
|
|
|
$spec['label']);
|
2012-12-13 19:59:29 +01:00
|
|
|
|
2013-07-03 17:52:46 +02:00
|
|
|
if (isset($spec['attributes']['href'])) {
|
2013-02-14 22:07:35 +01:00
|
|
|
$icon_href = phutil_tag(
|
|
|
|
'a',
|
2013-07-03 17:52:46 +02:00
|
|
|
array('href' => $spec['attributes']['href']),
|
2014-12-02 19:24:59 +01:00
|
|
|
array($icon, $label));
|
2013-02-14 22:07:35 +01:00
|
|
|
} else {
|
2014-12-02 19:24:59 +01:00
|
|
|
$icon_href = array($icon, $label);
|
2013-02-14 22:07:35 +01:00
|
|
|
}
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
$classes = array();
|
2013-09-09 23:14:34 +02:00
|
|
|
$classes[] = 'phui-object-item-icon';
|
2013-08-29 01:48:42 +02:00
|
|
|
if (isset($spec['attributes']['class'])) {
|
|
|
|
$classes[] = $spec['attributes']['class'];
|
|
|
|
}
|
2013-03-23 22:38:01 +01:00
|
|
|
|
2013-07-03 17:52:46 +02:00
|
|
|
$icon_list[] = javelin_tag(
|
2012-12-13 19:59:29 +01:00
|
|
|
'li',
|
|
|
|
array(
|
2013-03-23 22:38:01 +01:00
|
|
|
'class' => implode(' ', $classes),
|
2012-12-13 19:59:29 +01:00
|
|
|
),
|
2013-02-14 22:07:35 +01:00
|
|
|
$icon_href);
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
2012-12-13 19:59:29 +01:00
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
$icons[] = phutil_tag(
|
2012-12-13 19:59:29 +01:00
|
|
|
'ul',
|
2012-08-15 19:45:06 +02:00
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-icons',
|
2012-08-15 19:45:06 +02:00
|
|
|
),
|
2013-01-18 09:32:58 +01:00
|
|
|
$icon_list);
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
if ($this->handleIcons) {
|
|
|
|
$handle_bar = array();
|
|
|
|
foreach ($this->handleIcons as $icon) {
|
|
|
|
$handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']);
|
|
|
|
}
|
|
|
|
$icons[] = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-handle-icons',
|
2013-03-23 22:37:18 +01:00
|
|
|
),
|
|
|
|
$handle_bar);
|
|
|
|
}
|
|
|
|
|
2013-04-06 20:38:43 +02:00
|
|
|
$bylines = array();
|
|
|
|
if ($this->bylines) {
|
|
|
|
foreach ($this->bylines as $byline) {
|
|
|
|
$bylines[] = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-byline',
|
2013-04-06 20:38:43 +02:00
|
|
|
),
|
|
|
|
$byline);
|
|
|
|
}
|
|
|
|
$bylines = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-bylines',
|
2013-04-06 20:38:43 +02:00
|
|
|
),
|
|
|
|
$bylines);
|
|
|
|
}
|
|
|
|
|
2013-05-06 23:01:57 +02:00
|
|
|
$subhead = null;
|
|
|
|
if ($this->subhead) {
|
|
|
|
$subhead = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-subhead',
|
2013-05-06 23:01:57 +02:00
|
|
|
),
|
|
|
|
$this->subhead);
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
if ($icons) {
|
|
|
|
$icons = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-icon-pane',
|
2013-03-23 22:37:18 +01:00
|
|
|
),
|
|
|
|
$icons);
|
|
|
|
}
|
|
|
|
|
2012-08-15 19:45:06 +02:00
|
|
|
$attrs = null;
|
|
|
|
if ($this->attributes) {
|
|
|
|
$attrs = array();
|
2013-01-18 03:57:09 +01:00
|
|
|
$spacer = phutil_tag(
|
2012-12-13 19:59:29 +01:00
|
|
|
'span',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-attribute-spacer',
|
2012-12-13 19:59:29 +01:00
|
|
|
),
|
2013-01-18 03:57:09 +01:00
|
|
|
"\xC2\xB7");
|
2012-12-13 19:59:29 +01:00
|
|
|
$first = true;
|
2012-08-15 19:45:06 +02:00
|
|
|
foreach ($this->attributes as $attribute) {
|
2013-01-29 03:09:00 +01:00
|
|
|
$attrs[] = phutil_tag(
|
2012-12-13 19:59:29 +01:00
|
|
|
'li',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-attribute',
|
2012-12-13 19:59:29 +01:00
|
|
|
),
|
2013-01-29 03:09:00 +01:00
|
|
|
array(
|
|
|
|
($first ? null : $spacer),
|
|
|
|
$attribute,
|
|
|
|
));
|
2012-12-13 19:59:29 +01:00
|
|
|
$first = false;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
2013-05-06 23:01:57 +02:00
|
|
|
|
2013-01-18 09:32:58 +01:00
|
|
|
$attrs = phutil_tag(
|
2012-08-15 19:45:06 +02:00
|
|
|
'ul',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-attributes',
|
2012-08-15 19:45:06 +02:00
|
|
|
),
|
2013-01-18 09:32:58 +01:00
|
|
|
$attrs);
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
$foot = null;
|
2013-03-10 02:55:01 +01:00
|
|
|
if ($this->footIcons) {
|
|
|
|
$foot_bar = array();
|
|
|
|
foreach ($this->footIcons as $icon) {
|
|
|
|
$foot_bar[] = $this->renderFootIcon($icon['icon'], $icon['label']);
|
|
|
|
}
|
2013-03-23 22:37:18 +01:00
|
|
|
$foot = phutil_tag(
|
2013-03-10 02:55:01 +01:00
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-foot-icons',
|
2013-03-10 02:55:01 +01:00
|
|
|
),
|
|
|
|
$foot_bar);
|
2012-12-17 01:33:02 +01:00
|
|
|
}
|
2012-12-13 19:59:29 +01:00
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
$grippable = null;
|
|
|
|
if ($this->getGrippable()) {
|
|
|
|
$grippable = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-grip',
|
2013-03-23 22:37:18 +01:00
|
|
|
),
|
|
|
|
'');
|
|
|
|
}
|
|
|
|
|
2013-01-29 03:09:00 +01:00
|
|
|
$content = phutil_tag(
|
2012-12-17 17:26:44 +01:00
|
|
|
'div',
|
|
|
|
array(
|
2013-03-10 02:55:01 +01:00
|
|
|
'class' => implode(' ', $content_classes),
|
2012-12-17 17:26:44 +01:00
|
|
|
),
|
2013-03-09 22:52:41 +01:00
|
|
|
array(
|
2013-05-06 23:01:57 +02:00
|
|
|
$subhead,
|
2013-03-09 22:52:41 +01:00
|
|
|
$attrs,
|
|
|
|
$this->renderChildren(),
|
2013-03-23 22:37:18 +01:00
|
|
|
$foot,
|
2013-03-09 22:52:41 +01:00
|
|
|
));
|
2012-12-17 17:26:44 +01:00
|
|
|
|
2014-03-20 03:26:24 +01:00
|
|
|
$image = null;
|
|
|
|
if ($this->getImageURI()) {
|
|
|
|
$image = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-image',
|
|
|
|
'style' => 'background-image: url('.$this->getImageURI().')',
|
|
|
|
),
|
|
|
|
'');
|
2014-05-29 21:17:54 +02:00
|
|
|
} else if ($this->getImageIcon()) {
|
|
|
|
$image = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-image-icon',
|
|
|
|
),
|
|
|
|
$this->getImageIcon());
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($image && $this->href) {
|
|
|
|
$image = phutil_tag(
|
|
|
|
'a',
|
|
|
|
array(
|
|
|
|
'href' => $this->href,
|
|
|
|
),
|
|
|
|
$image);
|
2014-03-20 03:26:24 +01:00
|
|
|
}
|
|
|
|
|
2014-04-29 19:14:18 +02:00
|
|
|
$ficon = null;
|
|
|
|
if ($this->fontIcon) {
|
|
|
|
$image = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-ficon',
|
|
|
|
),
|
|
|
|
$this->fontIcon);
|
|
|
|
}
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
/* Build a fake table */
|
|
|
|
$column1 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col1',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$header,
|
|
|
|
$content,
|
|
|
|
));
|
|
|
|
|
|
|
|
$column2 = null;
|
|
|
|
if ($icons || $bylines) {
|
|
|
|
$column2 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col2',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$icons,
|
|
|
|
$bylines,));
|
|
|
|
}
|
|
|
|
|
|
|
|
$table = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-table',
|
|
|
|
),
|
|
|
|
phutil_tag_div('phui-object-item-table-row', array($column1, $column2)));
|
|
|
|
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
$box = phutil_tag(
|
2013-03-23 22:38:01 +01:00
|
|
|
'div',
|
2012-08-15 19:45:06 +02:00
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-content-box',
|
2012-08-15 19:45:06 +02:00
|
|
|
),
|
2013-03-23 22:38:01 +01:00
|
|
|
array(
|
|
|
|
$grippable,
|
2014-12-02 19:24:59 +01:00
|
|
|
$table,
|
2013-03-23 22:38:01 +01:00
|
|
|
));
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
|
|
|
|
$actions = array();
|
|
|
|
if ($this->actions) {
|
2013-07-12 20:28:18 +02:00
|
|
|
Javelin::initBehavior('phabricator-tooltips');
|
|
|
|
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
foreach (array_reverse($this->actions) as $action) {
|
2013-07-12 20:28:18 +02:00
|
|
|
$action->setRenderNameAsTooltip(true);
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
$actions[] = $action;
|
|
|
|
}
|
|
|
|
$actions = phutil_tag(
|
2013-06-05 17:41:43 +02:00
|
|
|
'ul',
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-actions',
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
),
|
|
|
|
$actions);
|
|
|
|
}
|
|
|
|
|
|
|
|
return phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-frame',
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
),
|
|
|
|
array(
|
|
|
|
$actions,
|
2014-03-20 03:26:24 +01:00
|
|
|
$image,
|
Add action icons to object list views
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
2013-05-10 21:57:01 +02:00
|
|
|
$box,
|
|
|
|
));
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
2013-03-10 02:55:01 +01:00
|
|
|
private function renderFootIcon($icon, $label) {
|
|
|
|
|
2014-05-12 19:08:32 +02:00
|
|
|
$icon = id(new PHUIIconView())
|
|
|
|
->setIconFont($icon);
|
2013-03-10 02:55:01 +01:00
|
|
|
|
|
|
|
$label = phutil_tag(
|
|
|
|
'span',
|
|
|
|
array(
|
|
|
|
),
|
|
|
|
$label);
|
|
|
|
|
|
|
|
return phutil_tag(
|
|
|
|
'span',
|
|
|
|
array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-foot-icon',
|
2013-03-10 02:55:01 +01:00
|
|
|
),
|
|
|
|
array($icon, $label));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private function renderHandleIcon(PhabricatorObjectHandle $handle, $label) {
|
|
|
|
Javelin::initBehavior('phabricator-tooltips');
|
|
|
|
|
2013-03-19 19:16:41 +01:00
|
|
|
$options = array(
|
2013-09-09 23:14:34 +02:00
|
|
|
'class' => 'phui-object-item-handle-icon',
|
2013-03-24 02:38:03 +01:00
|
|
|
'style' => 'background-image: url('.$handle->getImageURI().')',
|
2013-03-19 19:16:41 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
if (strlen($label)) {
|
|
|
|
$options['sigil'] = 'has-tooltip';
|
|
|
|
$options['meta'] = array('tip' => $label);
|
|
|
|
}
|
|
|
|
|
2013-03-10 02:55:01 +01:00
|
|
|
return javelin_tag(
|
|
|
|
'span',
|
2013-03-19 19:16:41 +01:00
|
|
|
$options,
|
2013-03-10 02:55:01 +01:00
|
|
|
'');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|