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;
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
private $statusIcon;
|
2013-03-10 02:55:01 +01:00
|
|
|
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-05-29 21:17:54 +02:00
|
|
|
private $imageIcon;
|
2015-05-05 03:34:40 +02:00
|
|
|
private $titleText;
|
2015-07-22 22:37:20 +02:00
|
|
|
private $badge;
|
2015-07-28 16:47:42 +02:00
|
|
|
private $countdownNum;
|
|
|
|
private $countdownNoun;
|
2015-09-04 19:34:25 +02:00
|
|
|
private $launchButton;
|
2016-02-06 20:58:26 +01:00
|
|
|
private $coverImage;
|
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;
|
|
|
|
}
|
|
|
|
|
2015-07-22 22:37:20 +02:00
|
|
|
public function setBadge(PHUIBadgeMiniView $badge) {
|
|
|
|
$this->badge = $badge;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2015-07-28 16:47:42 +02:00
|
|
|
public function setCountdown($num, $noun) {
|
|
|
|
$this->countdownNum = $num;
|
|
|
|
$this->countdownNoun = $noun;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2015-05-05 03:34:40 +02:00
|
|
|
public function setTitleText($title_text) {
|
|
|
|
$this->titleText = $title_text;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getTitleText() {
|
|
|
|
return $this->titleText;
|
|
|
|
}
|
|
|
|
|
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) {
|
2016-08-19 18:29:57 +02:00
|
|
|
if (!$image_icon instanceof PHUIIconView) {
|
|
|
|
$image_icon = id(new PHUIIconView())
|
|
|
|
->setIcon($image_icon);
|
|
|
|
}
|
2014-05-29 21:17:54 +02:00
|
|
|
$this->imageIcon = $image_icon;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function getImageIcon() {
|
|
|
|
return $this->imageIcon;
|
|
|
|
}
|
|
|
|
|
2016-02-06 20:58:26 +01:00
|
|
|
public function setCoverImage($image) {
|
|
|
|
$this->coverImage = $image;
|
|
|
|
return $this;
|
|
|
|
}
|
|
|
|
|
2016-08-18 21:24:35 +02:00
|
|
|
public function setEpoch($epoch) {
|
2013-08-29 01:48:42 +02:00
|
|
|
$date = phabricator_datetime($epoch, $this->getUser());
|
2016-08-18 21:24:35 +02:00
|
|
|
$this->addIcon('none', $date);
|
2013-08-29 01:48:42 +02:00
|
|
|
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) {
|
2015-05-22 09:27:56 +02:00
|
|
|
throw new Exception(pht('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;
|
|
|
|
}
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
public function setStatusIcon($icon, $label = null) {
|
|
|
|
$this->statusIcon = array(
|
2013-03-10 02:55:01 +01:00
|
|
|
'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;
|
|
|
|
}
|
|
|
|
|
2015-09-04 19:34:25 +02:00
|
|
|
public function setLaunchButton(PHUIButtonView $button) {
|
|
|
|
$button->setSize(PHUIButtonView::SMALL);
|
|
|
|
$this->launchButton = $button;
|
|
|
|
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;
|
2015-07-01 00:24:07 +02:00
|
|
|
} else {
|
|
|
|
$item_classes[] = 'phui-object-item-no-bar';
|
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
|
|
|
}
|
|
|
|
|
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;
|
2016-08-30 21:53:09 +02:00
|
|
|
case 'visited':
|
|
|
|
$item_classes[] = 'phui-object-item-visited';
|
|
|
|
break;
|
2013-03-23 22:38:01 +01:00
|
|
|
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';
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
return array(
|
|
|
|
'class' => $item_classes,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-01-13 20:54:39 +01:00
|
|
|
protected function getTagContent() {
|
2015-06-05 23:20:25 +02:00
|
|
|
$viewer = $this->getUser();
|
|
|
|
|
2013-03-23 22:38:01 +01:00
|
|
|
$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
|
|
|
|
2015-06-05 23:20:25 +02:00
|
|
|
$header_name = array();
|
|
|
|
|
|
|
|
if ($viewer) {
|
|
|
|
$header_name[] = id(new PHUISpacesNamespaceContextView())
|
|
|
|
->setUser($viewer)
|
|
|
|
->setObject($this->object);
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
if ($this->objectName) {
|
2015-06-05 23:20:25 +02:00
|
|
|
$header_name[] = array(
|
2013-03-23 22:37:18 +01:00
|
|
|
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),
|
|
|
|
' ',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-05-05 03:34:40 +02:00
|
|
|
$title_text = null;
|
|
|
|
if ($this->titleText) {
|
|
|
|
$title_text = $this->titleText;
|
|
|
|
} else if ($this->href) {
|
|
|
|
$title_text = $this->header;
|
|
|
|
}
|
|
|
|
|
2013-03-23 22:37:18 +01:00
|
|
|
$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',
|
2015-05-05 03:34:40 +02:00
|
|
|
'title' => $title_text,
|
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
|
|
|
|
When dragging nodes, clone them
Summary:
Ref T5240. Currently, when dragging nodes, we leave them where they are in the document and apply "position: relative;" so we can move them around on screen.
- Pros: All the CSS still works.
- Cons: Can't drag them outside the nearest containing element with "overflow: hidden;", many subtle positioning bugs with scrollable containers.
Instead, this diff leaves the thing we're dragging exactly where it is, clones it, and drags the clone instead.
- Pros: You can drag it anywhere. Seems to fix all the scrolling container problems.
- Cons: CSS which depends on a container class no longer works.
The CSS thing is bad, but doesn't seem too unreasonable to fix. Basically, we just need to put some `phui-this-is-a-workboard-card` class on the cards, and use that to style them instead of `phui-workboard-view`, and then do something similar for draggable lists.
Although we no longer need to drag cards to tabs with the current design, I think there's a reasonable chance we'll revisit that later. The current design also calls for scrollable columns, but there would be no way to drag cards outside of their current column with the current approach.
NOTE: This does not attempt to fix the CSS, so dragging is pretty rough, since the "clone" loses a number of container classes and thus a number of rules. I'll clean up the CSS in the next change.
Test Plan:
- Dragged stuff around on task lists, workboards, and sort lists (e.g., pinned applications) in Safari, Firefox and Chrome.
- Scrolled window and containers (workboards) during drag.
- Dragged stuff out of the workboard.
- Dragged stuff offscreen.
- CSS is funky, but I can no longer find any positioning or layout issues in any browser.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T5240
Differential Revision: https://secure.phabricator.com/D15160
2016-02-02 01:28:47 +01:00
|
|
|
// Wrap the header content in a <span> with the "slippery" sigil. This
|
|
|
|
// prevents us from beginning a drag if you click the text (like "T123"),
|
|
|
|
// but not if you click the white space after the header.
|
|
|
|
$header = phutil_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:37:18 +01:00
|
|
|
),
|
When dragging nodes, clone them
Summary:
Ref T5240. Currently, when dragging nodes, we leave them where they are in the document and apply "position: relative;" so we can move them around on screen.
- Pros: All the CSS still works.
- Cons: Can't drag them outside the nearest containing element with "overflow: hidden;", many subtle positioning bugs with scrollable containers.
Instead, this diff leaves the thing we're dragging exactly where it is, clones it, and drags the clone instead.
- Pros: You can drag it anywhere. Seems to fix all the scrolling container problems.
- Cons: CSS which depends on a container class no longer works.
The CSS thing is bad, but doesn't seem too unreasonable to fix. Basically, we just need to put some `phui-this-is-a-workboard-card` class on the cards, and use that to style them instead of `phui-workboard-view`, and then do something similar for draggable lists.
Although we no longer need to drag cards to tabs with the current design, I think there's a reasonable chance we'll revisit that later. The current design also calls for scrollable columns, but there would be no way to drag cards outside of their current column with the current approach.
NOTE: This does not attempt to fix the CSS, so dragging is pretty rough, since the "clone" loses a number of container classes and thus a number of rules. I'll clean up the CSS in the next change.
Test Plan:
- Dragged stuff around on task lists, workboards, and sort lists (e.g., pinned applications) in Safari, Firefox and Chrome.
- Scrolled window and containers (workboards) during drag.
- Dragged stuff out of the workboard.
- Dragged stuff offscreen.
- CSS is funky, but I can no longer find any positioning or layout issues in any browser.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T5240
Differential Revision: https://secure.phabricator.com/D15160
2016-02-02 01:28:47 +01:00
|
|
|
javelin_tag(
|
|
|
|
'span',
|
|
|
|
array(
|
|
|
|
'sigil' => 'slippery',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$this->headIcons,
|
|
|
|
$header_name,
|
|
|
|
$header_link,
|
|
|
|
)));
|
2013-03-23 22:37:18 +01:00
|
|
|
|
|
|
|
$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())
|
2016-01-28 05:38:01 +01:00
|
|
|
->setIcon($icon)
|
2014-05-12 19:08:32 +02:00
|
|
|
->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
|
|
|
}
|
|
|
|
|
2016-02-01 23:39:09 +01:00
|
|
|
$handle_bar = null;
|
2013-03-23 22:37:18 +01:00
|
|
|
if ($this->handleIcons) {
|
|
|
|
$handle_bar = array();
|
[Redesign] Convert Dashboard Panels to ObjectBox
Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView
Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.
{F406170}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T8099
Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
|
|
|
foreach ($this->handleIcons as $handleicon) {
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
$handle_bar[] =
|
|
|
|
$this->renderHandleIcon($handleicon['icon'], $handleicon['label']);
|
2013-03-23 22:37:18 +01:00
|
|
|
}
|
2016-02-01 23:39:09 +01:00
|
|
|
$handle_bar = phutil_tag(
|
|
|
|
'li',
|
2013-03-23 22:37:18 +01:00
|
|
|
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;
|
2016-02-01 23:39:09 +01:00
|
|
|
if ($this->attributes || $handle_bar) {
|
2012-08-15 19:45:06 +02:00
|
|
|
$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
|
|
|
),
|
2016-02-01 23:39:09 +01:00
|
|
|
array(
|
|
|
|
$handle_bar,
|
|
|
|
$attrs,
|
|
|
|
));
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
$status = null;
|
|
|
|
if ($this->statusIcon) {
|
|
|
|
$icon = $this->statusIcon;
|
|
|
|
$status = $this->renderStatusIcon($icon['icon'], $icon['label']);
|
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(),
|
|
|
|
));
|
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());
|
|
|
|
}
|
|
|
|
|
2015-01-27 21:25:54 +01:00
|
|
|
if ($image && $this->href) {
|
|
|
|
$image = phutil_tag(
|
|
|
|
'a',
|
|
|
|
array(
|
|
|
|
'href' => $this->href,
|
|
|
|
),
|
|
|
|
$image);
|
|
|
|
}
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
/* Build a fake table */
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
$column0 = null;
|
|
|
|
if ($status) {
|
|
|
|
$column0 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col0',
|
|
|
|
),
|
|
|
|
$status);
|
|
|
|
}
|
|
|
|
|
2015-07-22 22:37:20 +02:00
|
|
|
if ($this->badge) {
|
|
|
|
$column0 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col0 phui-object-item-badge',
|
|
|
|
),
|
|
|
|
$this->badge);
|
|
|
|
}
|
|
|
|
|
2015-07-28 16:47:42 +02:00
|
|
|
if ($this->countdownNum) {
|
|
|
|
$countdown = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-countdown-number',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
phutil_tag_div('', $this->countdownNum),
|
|
|
|
phutil_tag_div('', $this->countdownNoun),
|
|
|
|
));
|
|
|
|
$column0 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col0 phui-object-item-countdown',
|
|
|
|
),
|
|
|
|
$countdown);
|
|
|
|
}
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
$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,
|
2015-04-05 14:29:39 +02:00
|
|
|
$bylines,
|
|
|
|
));
|
2014-12-02 19:24:59 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 19:34:25 +02:00
|
|
|
if ($this->launchButton) {
|
|
|
|
$column2 = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-col2 phui-object-item-launch-button',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$this->launchButton,
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
2014-12-02 19:24:59 +01:00
|
|
|
$table = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-table',
|
|
|
|
),
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
phutil_tag_div(
|
|
|
|
'phui-object-item-table-row',
|
|
|
|
array(
|
|
|
|
$column0,
|
|
|
|
$column1,
|
|
|
|
$column2,
|
|
|
|
)));
|
2014-12-02 19:24:59 +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
|
|
|
$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);
|
|
|
|
}
|
|
|
|
|
2016-02-06 20:58:26 +01:00
|
|
|
$frame_content = phutil_tag(
|
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
|
|
|
'div',
|
|
|
|
array(
|
2016-02-06 20:58:26 +01:00
|
|
|
'class' => 'phui-object-item-frame-content',
|
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,
|
|
|
|
));
|
2016-02-06 20:58:26 +01:00
|
|
|
|
|
|
|
$frame_cover = null;
|
|
|
|
if ($this->coverImage) {
|
|
|
|
$cover_image = phutil_tag(
|
|
|
|
'img',
|
|
|
|
array(
|
|
|
|
'src' => $this->coverImage,
|
|
|
|
'class' => 'phui-object-item-cover-image',
|
|
|
|
));
|
|
|
|
|
|
|
|
$frame_cover = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-frame-cover',
|
|
|
|
),
|
|
|
|
$cover_image);
|
|
|
|
}
|
|
|
|
|
|
|
|
$frame = phutil_tag(
|
|
|
|
'div',
|
|
|
|
array(
|
|
|
|
'class' => 'phui-object-item-frame',
|
|
|
|
),
|
|
|
|
array(
|
|
|
|
$frame_cover,
|
|
|
|
$frame_content,
|
|
|
|
));
|
|
|
|
|
|
|
|
return $frame;
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
private function renderStatusIcon($icon, $label) {
|
|
|
|
Javelin::initBehavior('phabricator-tooltips');
|
2013-03-10 02:55:01 +01:00
|
|
|
|
2014-05-12 19:08:32 +02:00
|
|
|
$icon = id(new PHUIIconView())
|
2016-01-28 05:38:01 +01:00
|
|
|
->setIcon($icon);
|
2013-03-10 02:55:01 +01:00
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
$options = array(
|
|
|
|
'class' => 'phui-object-item-status-icon',
|
|
|
|
);
|
2013-03-10 02:55:01 +01:00
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
if (strlen($label)) {
|
|
|
|
$options['sigil'] = 'has-tooltip';
|
2015-06-21 11:24:30 +02:00
|
|
|
$options['meta'] = array('tip' => $label, 'size' => 300);
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return javelin_tag('div', $options, $icon);
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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';
|
2016-02-01 23:39:09 +01:00
|
|
|
$options['meta'] = array('tip' => $label, 'align' => 'E');
|
2013-03-19 19:16:41 +01:00
|
|
|
}
|
|
|
|
|
[Redesign] New PHUIObjectItemListView
Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:
- Remove FootIcons
- Remove Stackable
- Remove Plain List
- Add StatusIcon
- Add setting ObjectList to an ObjectBox
- Minor retouches to Headers
Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.
Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12865
2015-05-15 22:28:59 +02:00
|
|
|
return javelin_tag('span', $options, '');
|
2013-03-10 02:55:01 +01:00
|
|
|
}
|
|
|
|
|
2012-08-15 19:45:06 +02:00
|
|
|
}
|