mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-28 00:10:57 +01:00
Implement card style and extras for object item lists
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:
parent
cd5038e973
commit
b41b1b43db
10 changed files with 515 additions and 73 deletions
|
@ -483,6 +483,13 @@ celerity_register_resource_map(array(
|
|||
'disk' => '/rsrc/image/sprite-apps.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/sprite-card.png' =>
|
||||
array(
|
||||
'hash' => 'b46c1d58a79a349bfd3eb669e38f009e',
|
||||
'uri' => '/res/b46c1d58/rsrc/image/sprite-card.png',
|
||||
'disk' => '/rsrc/image/sprite-card.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/sprite-conpher-X2.png' =>
|
||||
array(
|
||||
'hash' => '88f5bf563e90d99ebe1b4ec552a963fc',
|
||||
|
@ -2922,7 +2929,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-object-item-list-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/034774f8/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'uri' => '/res/84cd78f7/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -3446,6 +3453,15 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/css/sprite-apps-xlarge.css',
|
||||
),
|
||||
'sprite-card-css' =>
|
||||
array(
|
||||
'uri' => '/res/3ba26022/rsrc/css/sprite-card.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
),
|
||||
'disk' => '/rsrc/css/sprite-card.css',
|
||||
),
|
||||
'sprite-conpher-css' =>
|
||||
array(
|
||||
'uri' => '/res/6277b31f/rsrc/css/sprite-conpher.css',
|
||||
|
@ -3530,7 +3546,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'fdd3bb5f' =>
|
||||
'aa0dfc66' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
@ -3573,7 +3589,7 @@ celerity_register_resource_map(array(
|
|||
35 => 'phabricator-object-item-list-view-css',
|
||||
36 => 'global-drag-and-drop-css',
|
||||
),
|
||||
'uri' => '/res/pkg/fdd3bb5f/core.pkg.css',
|
||||
'uri' => '/res/pkg/aa0dfc66/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'95ceba95' =>
|
||||
|
@ -3764,17 +3780,17 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => 'eb35a026',
|
||||
'aphront-crumbs-view-css' => 'fdd3bb5f',
|
||||
'aphront-dialog-view-css' => 'fdd3bb5f',
|
||||
'aphront-error-view-css' => 'fdd3bb5f',
|
||||
'aphront-form-view-css' => 'fdd3bb5f',
|
||||
'aphront-list-filter-view-css' => 'fdd3bb5f',
|
||||
'aphront-pager-view-css' => 'fdd3bb5f',
|
||||
'aphront-panel-view-css' => 'fdd3bb5f',
|
||||
'aphront-table-view-css' => 'fdd3bb5f',
|
||||
'aphront-tokenizer-control-css' => 'fdd3bb5f',
|
||||
'aphront-tooltip-css' => 'fdd3bb5f',
|
||||
'aphront-typeahead-control-css' => 'fdd3bb5f',
|
||||
'aphront-crumbs-view-css' => 'aa0dfc66',
|
||||
'aphront-dialog-view-css' => 'aa0dfc66',
|
||||
'aphront-error-view-css' => 'aa0dfc66',
|
||||
'aphront-form-view-css' => 'aa0dfc66',
|
||||
'aphront-list-filter-view-css' => 'aa0dfc66',
|
||||
'aphront-pager-view-css' => 'aa0dfc66',
|
||||
'aphront-panel-view-css' => 'aa0dfc66',
|
||||
'aphront-table-view-css' => 'aa0dfc66',
|
||||
'aphront-tokenizer-control-css' => 'aa0dfc66',
|
||||
'aphront-tooltip-css' => 'aa0dfc66',
|
||||
'aphront-typeahead-control-css' => 'aa0dfc66',
|
||||
'differential-changeset-view-css' => '8aaacd1b',
|
||||
'differential-core-view-css' => '8aaacd1b',
|
||||
'differential-inline-comment-editor' => '322728f3',
|
||||
|
@ -3788,7 +3804,7 @@ celerity_register_resource_map(array(
|
|||
'differential-table-of-contents-css' => '8aaacd1b',
|
||||
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||
'diffusion-icons-css' => 'c8ce2d88',
|
||||
'global-drag-and-drop-css' => 'fdd3bb5f',
|
||||
'global-drag-and-drop-css' => 'aa0dfc66',
|
||||
'inline-comment-summary-css' => '8aaacd1b',
|
||||
'javelin-aphlict' => '95ceba95',
|
||||
'javelin-behavior' => 'cd1d650a',
|
||||
|
@ -3860,48 +3876,48 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => 'cd1d650a',
|
||||
'javelin-vector' => 'cd1d650a',
|
||||
'javelin-workflow' => 'cd1d650a',
|
||||
'lightbox-attachment-css' => 'fdd3bb5f',
|
||||
'lightbox-attachment-css' => 'aa0dfc66',
|
||||
'maniphest-task-summary-css' => 'eb35a026',
|
||||
'maniphest-transaction-detail-css' => 'eb35a026',
|
||||
'phabricator-busy' => '95ceba95',
|
||||
'phabricator-content-source-view-css' => '8aaacd1b',
|
||||
'phabricator-core-buttons-css' => 'fdd3bb5f',
|
||||
'phabricator-core-css' => 'fdd3bb5f',
|
||||
'phabricator-crumbs-view-css' => 'fdd3bb5f',
|
||||
'phabricator-directory-css' => 'fdd3bb5f',
|
||||
'phabricator-core-buttons-css' => 'aa0dfc66',
|
||||
'phabricator-core-css' => 'aa0dfc66',
|
||||
'phabricator-crumbs-view-css' => 'aa0dfc66',
|
||||
'phabricator-directory-css' => 'aa0dfc66',
|
||||
'phabricator-drag-and-drop-file-upload' => '322728f3',
|
||||
'phabricator-dropdown-menu' => '95ceba95',
|
||||
'phabricator-file-upload' => '95ceba95',
|
||||
'phabricator-filetree-view-css' => 'fdd3bb5f',
|
||||
'phabricator-flag-css' => 'fdd3bb5f',
|
||||
'phabricator-form-view-css' => 'fdd3bb5f',
|
||||
'phabricator-header-view-css' => 'fdd3bb5f',
|
||||
'phabricator-jump-nav' => 'fdd3bb5f',
|
||||
'phabricator-filetree-view-css' => 'aa0dfc66',
|
||||
'phabricator-flag-css' => 'aa0dfc66',
|
||||
'phabricator-form-view-css' => 'aa0dfc66',
|
||||
'phabricator-header-view-css' => 'aa0dfc66',
|
||||
'phabricator-jump-nav' => 'aa0dfc66',
|
||||
'phabricator-keyboard-shortcut' => '95ceba95',
|
||||
'phabricator-keyboard-shortcut-manager' => '95ceba95',
|
||||
'phabricator-main-menu-view' => 'fdd3bb5f',
|
||||
'phabricator-main-menu-view' => 'aa0dfc66',
|
||||
'phabricator-menu-item' => '95ceba95',
|
||||
'phabricator-nav-view-css' => 'fdd3bb5f',
|
||||
'phabricator-nav-view-css' => 'aa0dfc66',
|
||||
'phabricator-notification' => '95ceba95',
|
||||
'phabricator-notification-css' => 'fdd3bb5f',
|
||||
'phabricator-notification-menu-css' => 'fdd3bb5f',
|
||||
'phabricator-object-item-list-view-css' => 'fdd3bb5f',
|
||||
'phabricator-notification-css' => 'aa0dfc66',
|
||||
'phabricator-notification-menu-css' => 'aa0dfc66',
|
||||
'phabricator-object-item-list-view-css' => 'aa0dfc66',
|
||||
'phabricator-object-selector-css' => '8aaacd1b',
|
||||
'phabricator-paste-file-upload' => '95ceba95',
|
||||
'phabricator-prefab' => '95ceba95',
|
||||
'phabricator-project-tag-css' => 'eb35a026',
|
||||
'phabricator-remarkup-css' => 'fdd3bb5f',
|
||||
'phabricator-remarkup-css' => 'aa0dfc66',
|
||||
'phabricator-shaped-request' => '322728f3',
|
||||
'phabricator-side-menu-view-css' => 'fdd3bb5f',
|
||||
'phabricator-standard-page-view' => 'fdd3bb5f',
|
||||
'phabricator-side-menu-view-css' => 'aa0dfc66',
|
||||
'phabricator-standard-page-view' => 'aa0dfc66',
|
||||
'phabricator-textareautils' => '95ceba95',
|
||||
'phabricator-tooltip' => '95ceba95',
|
||||
'phabricator-transaction-view-css' => 'fdd3bb5f',
|
||||
'phabricator-zindex-css' => 'fdd3bb5f',
|
||||
'sprite-apps-large-css' => 'fdd3bb5f',
|
||||
'sprite-gradient-css' => 'fdd3bb5f',
|
||||
'sprite-icon-css' => 'fdd3bb5f',
|
||||
'sprite-menu-css' => 'fdd3bb5f',
|
||||
'syntax-highlighting-css' => 'fdd3bb5f',
|
||||
'phabricator-transaction-view-css' => 'aa0dfc66',
|
||||
'phabricator-zindex-css' => 'aa0dfc66',
|
||||
'sprite-apps-large-css' => 'aa0dfc66',
|
||||
'sprite-gradient-css' => 'aa0dfc66',
|
||||
'sprite-icon-css' => 'aa0dfc66',
|
||||
'sprite-menu-css' => 'aa0dfc66',
|
||||
'syntax-highlighting-css' => 'aa0dfc66',
|
||||
),
|
||||
));
|
||||
|
|
|
@ -1108,6 +1108,7 @@ phutil_register_library_map(array(
|
|||
'PhabricatorObjectHandleConstants' => 'applications/phid/handle/const/PhabricatorObjectHandleConstants.php',
|
||||
'PhabricatorObjectHandleData' => 'applications/phid/handle/PhabricatorObjectHandleData.php',
|
||||
'PhabricatorObjectHandleStatus' => 'applications/phid/handle/const/PhabricatorObjectHandleStatus.php',
|
||||
'PhabricatorObjectItemListExample' => 'applications/uiexample/examples/PhabricatorObjectItemListExample.php',
|
||||
'PhabricatorObjectItemListView' => 'view/layout/PhabricatorObjectItemListView.php',
|
||||
'PhabricatorObjectItemView' => 'view/layout/PhabricatorObjectItemView.php',
|
||||
'PhabricatorObjectListView' => 'view/control/PhabricatorObjectListView.php',
|
||||
|
@ -2607,6 +2608,7 @@ phutil_register_library_map(array(
|
|||
'PhabricatorOAuthServerTokenController' => 'PhabricatorAuthController',
|
||||
'PhabricatorOAuthUnlinkController' => 'PhabricatorAuthController',
|
||||
'PhabricatorObjectHandleStatus' => 'PhabricatorObjectHandleConstants',
|
||||
'PhabricatorObjectItemListExample' => 'PhabricatorUIExample',
|
||||
'PhabricatorObjectItemListView' => 'AphrontView',
|
||||
'PhabricatorObjectItemView' => 'AphrontView',
|
||||
'PhabricatorObjectListView' => 'AphrontView',
|
||||
|
|
|
@ -72,7 +72,7 @@ final class PhabricatorConfigGroupController
|
|||
$engine->process();
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setStackable();
|
||||
$list->setStackable(true);
|
||||
foreach ($options as $option) {
|
||||
$summary = $engine->getOutput($option, 'summary');
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@ final class PhabricatorConfigIssueListController
|
|||
private function buildIssueList(array $issues) {
|
||||
assert_instances_of($issues, 'PhabricatorSetupIssue');
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setStackable();
|
||||
$list->setStackable(true);
|
||||
$ignored_items = array();
|
||||
|
||||
foreach ($issues as $issue) {
|
||||
|
|
|
@ -46,7 +46,7 @@ final class PhabricatorConfigListController
|
|||
assert_instances_of($groups, 'PhabricatorApplicationConfigOptions');
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setStackable();
|
||||
$list->setStackable(true);
|
||||
$groups = msort($groups, 'getName');
|
||||
foreach ($groups as $group) {
|
||||
$item = id(new PhabricatorObjectItemView())
|
||||
|
|
|
@ -108,7 +108,7 @@ final class PhabricatorProjectListController
|
|||
}
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setStackable();
|
||||
$list->setStackable(true);
|
||||
foreach ($rows as $row) {
|
||||
$item = id(new PhabricatorObjectItemView())
|
||||
->setHeader($row[0])
|
||||
|
|
|
@ -0,0 +1,190 @@
|
|||
<?php
|
||||
|
||||
final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
|
||||
|
||||
public function getName() {
|
||||
return 'Object Item List';
|
||||
}
|
||||
|
||||
public function getDescription() {
|
||||
return hsprintf(
|
||||
'Use <tt>PhabricatorObjectItemListView</tt> to render lists of objects.');
|
||||
}
|
||||
|
||||
public function renderExample() {
|
||||
$request = $this->getRequest();
|
||||
$user = $request->getUser();
|
||||
|
||||
$handle = PhabricatorObjectHandleData::loadOneHandle(
|
||||
$user->getPHID(),
|
||||
$user);
|
||||
|
||||
$out = array();
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Basic List'));
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Apple'))
|
||||
->setHref('#'));
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Banana'))
|
||||
->setHref('#'));
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Cherry'))
|
||||
->setHref('#'));
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Empty List'));
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
|
||||
$list->setNoDataString(pht('This list is empty.'));
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Stacked List'));
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setStackable(true);
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Monday'))
|
||||
->setHref('#'));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Tuesday'))
|
||||
->setHref('#'));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Wednesday'))
|
||||
->setHref('#'));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Thursday'))
|
||||
->setHref('#'));
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Card List'));
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
$list->setCards(true);
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Business Card')));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Playing Card')));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('House of Cards')));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Cardigan')));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Cardamom'))
|
||||
->addFootIcon('highlight-white', 'Spice'));
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht(
|
||||
'The human cardiovascular system includes the heart, lungs, and '.
|
||||
'some other parts; most of these parts are pretty squishy'))
|
||||
->addFootIcon('search-white', pht('Respiration!'))
|
||||
->addHandleIcon($handle, pht('You have a cardiovascular system!')));
|
||||
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Extras'));
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Ace of Hearts'))
|
||||
->setHref('#')
|
||||
->addAttribute(pht('Suit: Hearts'))
|
||||
->addAttribute(pht('Rank: Ace'))
|
||||
->addIcon('love', pht('Ace'))
|
||||
->addIcon('love-grey', pht('Hearts'))
|
||||
->addFootIcon('blame-white', pht('Ace'))
|
||||
->addFootIcon('love-white', pht('Heart'))
|
||||
->addHandleIcon($handle, pht('You hold all the cards.'))
|
||||
->addHandleIcon($handle, pht('You make all the rules.')));
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Effects'));
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Normal'))
|
||||
->setHref('#'));
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Highlighted'))
|
||||
->setEffect('highlighted')
|
||||
->setHref('#'));
|
||||
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader(pht('Selected'))
|
||||
->setEffect('selected')
|
||||
->setHref('#'));
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
|
||||
$head = id(new PhabricatorHeaderView())
|
||||
->setHeader(pht('Effects'));
|
||||
|
||||
$list = new PhabricatorObjectItemListView();
|
||||
|
||||
$bar_colors = array(
|
||||
null => pht('None'),
|
||||
'red' => pht('Red'),
|
||||
'orange' => pht('Orange'),
|
||||
'yellow' => pht('Yellow'),
|
||||
'green' => pht('Green'),
|
||||
'sky' => pht('Sky'),
|
||||
'blue' => pht('Blue'),
|
||||
'indigo' => pht('Indigo'),
|
||||
'violet' => pht('Violet'),
|
||||
'grey' => pht('Grey'),
|
||||
'black' => pht('Black'),
|
||||
);
|
||||
|
||||
foreach ($bar_colors as $bar_color => $bar_label) {
|
||||
$list->addItem(
|
||||
id(new PhabricatorObjectItemView())
|
||||
->setHeader($bar_label)
|
||||
->setBarColor($bar_color));
|
||||
}
|
||||
|
||||
$out[] = array($head, $list);
|
||||
|
||||
return $out;
|
||||
}
|
||||
}
|
|
@ -6,6 +6,7 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
|||
private $items;
|
||||
private $pager;
|
||||
private $stackable;
|
||||
private $cards;
|
||||
private $noDataString;
|
||||
|
||||
public function setHeader($header) {
|
||||
|
@ -28,8 +29,13 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
public function setStackable() {
|
||||
$this->stackable = true;
|
||||
public function setStackable($stackable) {
|
||||
$this->stackable = $stackable;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setCards($cards) {
|
||||
$this->cards = $cards;
|
||||
return $this;
|
||||
}
|
||||
|
||||
|
@ -65,6 +71,9 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
|||
if ($this->stackable) {
|
||||
$classes[] = 'phabricator-object-list-stackable';
|
||||
}
|
||||
if ($this->cards) {
|
||||
$classes[] = 'phabricator-object-list-cards';
|
||||
}
|
||||
|
||||
return phutil_tag(
|
||||
'ul',
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
'');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -6,9 +6,6 @@
|
|||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-list-view.phabricator-object-list-stackable .phabricator-object-item {
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-item-list-view {
|
||||
padding: 20px;
|
||||
|
@ -25,30 +22,71 @@
|
|||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
.phabricator-object-list-stackable .phabricator-object-item {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-list-stackable .phabricator-object-item:hover {
|
||||
border-width: 1px;
|
||||
background: #e9ecf5;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-item {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.phabricator-object-item-name {
|
||||
display: block;
|
||||
padding: 8px 10px 2px;
|
||||
padding: 8px 10px 8px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-with-attrs .phabricator-object-item-name {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* - Stackable List ------------------------------------------------------------
|
||||
|
||||
Tighter, stacking list.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-object-item-list-view.phabricator-object-list-stackable
|
||||
.phabricator-object-item {
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
|
||||
.phabricator-object-list-stackable .phabricator-object-item {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-list-stackable
|
||||
.phabricator-object-item:hover {
|
||||
border-width: 1px;
|
||||
background: #e9ecf5;
|
||||
}
|
||||
|
||||
|
||||
/* - Card List -----------------------------------------------------------------
|
||||
|
||||
Rounded card list.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-object-list-cards .phabricator-object-item {
|
||||
border-radius: 3px;
|
||||
border-left-width: 4px;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
|
||||
.phabricator-object-list-cards .phabricator-object-item-name {
|
||||
display: block;
|
||||
padding: 6px 10px 6px;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
|
||||
/* - Attribute List ------------------------------------------------------------
|
||||
|
||||
Object attributes, commonly used to render created date, etc.
|
||||
|
@ -91,7 +129,8 @@
|
|||
width: 120px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-object-item-content {
|
||||
.device-desktop .phabricator-object-item-with-icons
|
||||
.phabricator-object-item-content {
|
||||
margin-right: 132px;
|
||||
}
|
||||
|
||||
|
@ -99,7 +138,7 @@
|
|||
width: 18px;
|
||||
}
|
||||
|
||||
.device .phabricator-object-item-content {
|
||||
.device .phabricator-object-item-with-icons .phabricator-object-item-content {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
|
@ -188,5 +227,79 @@
|
|||
*/
|
||||
|
||||
.phabricator-object-item-highlighted {
|
||||
background: #ffff88;
|
||||
background: #ffffb2;
|
||||
}
|
||||
|
||||
.phabricator-object-item-selected {
|
||||
background: #bfdcff;
|
||||
}
|
||||
|
||||
|
||||
/* - Foot ----------------------------------------------------------------------
|
||||
|
||||
This goes at the bottom.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-object-item-foot {
|
||||
clear: both;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* - Foot Icons ----------------------------------------------------------------
|
||||
|
||||
Object counts shown in the footer.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-object-item-foot-icons {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-foot-icon {
|
||||
display: inline-block;
|
||||
background: #909090;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
margin-right: 3px;
|
||||
padding: 1px 4px 0 22px;
|
||||
height: 19px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phabricator-object-item-with-handle-icons .phabricator-object-item-foot-icon {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-foot-icon .sprite-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* - Handle Icons --------------------------------------------------------------
|
||||
|
||||
Shows owners, reviewers, etc.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-object-item-handle-icons {
|
||||
float: right;
|
||||
height: 28px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.phabricator-object-item-handle-icon {
|
||||
margin-left: 3px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
background: #f3f3f3;
|
||||
background-size: 28px 28px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue