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

Implement card style and extras for object item lists

Browse Source 
Summary:
Initial pass at elements appearing on M10.

Glaring omissions:

  - I cut a single icon out of M10 in a haphazard way.
  - No linear graident texture on the cards.

Test Plan:
{F35248}
{F35249}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5311
This commit is contained in:
epriestley
2013-03-09 17:55:01 -08:00
parent cd5038e973
commit b41b1b43db
10 changed files with 515 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,12 +5,12 @@ final class PhabricatorObjectItemView extends AphrontView {
private $header;
private $href;
private $attributes = array();
private $details = array();
private $dates = array();
private $icons = array();
private $barColor;
private $object;
private $effect;
private $footIcons = array();
private $handleIcons = array();
public function setEffect($effect) {
$this->effect = $effect;
@@ -57,6 +57,24 @@ final class PhabricatorObjectItemView extends AphrontView {
return $this;
}
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;
}
public function setBarColor($bar_color) {
$this->barColor = $bar_color;
return $this;
@@ -72,8 +90,12 @@ final class PhabricatorObjectItemView extends AphrontView {
}
public function render() {
$content_classes = array();
$item_classes = array();
$content_classes[] = 'phabricator-object-item-content';
$header = phutil_tag(
'a',
$this->href ? 'a' : 'div',
array(
'href' => $this->href,
'class' => 'phabricator-object-item-name',
@@ -125,6 +147,7 @@ final class PhabricatorObjectItemView extends AphrontView {
'class' => 'phabricator-object-item-icons',
),
$icon_list);
$item_classes[] = 'phabricator-object-item-with-icons';
}
$attrs = null;
@@ -155,16 +178,58 @@ final class PhabricatorObjectItemView extends AphrontView {
'class' => 'phabricator-object-item-attributes',
),
$attrs);
$item_classes[] = 'phabricator-object-item-with-attrs';
}
$classes = array();
$classes[] = 'phabricator-object-item';
if ($this->barColor) {
$classes[] = 'phabricator-object-item-bar-color-'.$this->barColor;
$foot = array();
if ($this->handleIcons) {
$handle_bar = array();
foreach ($this->handleIcons as $icon) {
$handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']);
}
$foot[] = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-handle-icons',
),
$handle_bar);
$item_classes[] = 'phabricator-object-item-with-handle-icons';
}
if ($this->footIcons) {
$foot_bar = array();
foreach ($this->footIcons as $icon) {
$foot_bar[] = $this->renderFootIcon($icon['icon'], $icon['label']);
}
$foot[] = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-foot-icons',
),
$foot_bar);
}
if ($foot) {
$foot = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-foot',
),
$foot);
}
$item_classes[] = 'phabricator-object-item';
if ($this->barColor) {
$item_classes[] = 'phabricator-object-item-bar-color-'.$this->barColor;
}
switch ($this->effect) {
case 'highlighted':
$classes[] = 'phabricator-object-item-highlighted';
$item_classes[] = 'phabricator-object-item-highlighted';
break;
case 'selected':
$item_classes[] = 'phabricator-object-item-selected';
break;
case null:
break;
@@ -175,7 +240,7 @@ final class PhabricatorObjectItemView extends AphrontView {
$content = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-content',
'class' => implode(' ', $content_classes),
),
array(
$header,
@@ -186,9 +251,56 @@ final class PhabricatorObjectItemView extends AphrontView {
return phutil_tag(
'li',
array(
'class' => implode(' ', $classes),
'class' => implode(' ', $item_classes),
),
array($icons, $content));
array(
$icons,
$content,
$foot,
));
}
private function renderFootIcon($icon, $label) {
require_celerity_resource('sprite-icon-css');
$icon = phutil_tag(
'span',
array(
'class' => 'sprite-icon action-'.$icon,
),
'');
$label = phutil_tag(
'span',
array(
),
$label);
return phutil_tag(
'span',
array(
'class' => 'phabricator-object-item-foot-icon',
),
array($icon, $label));
}
private function renderHandleIcon(PhabricatorObjectHandle $handle, $label) {
Javelin::initBehavior('phabricator-tooltips');
return javelin_tag(
'span',
array(
'class' => 'phabricator-object-item-handle-icon',
'sigil' => 'has-tooltip',
'style' => 'background: url('.$handle->getImageURI().')',
'meta' => array(
'tip' => $label,
),
),
'');
}
}