1
0
Fork 0
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:
epriestley 2013-03-09 17:55:01 -08:00
parent cd5038e973
commit b41b1b43db
10 changed files with 515 additions and 73 deletions

View file

@ -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',
),
));

View file

@ -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',

View file

@ -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');

View file

@ -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) {

View file

@ -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())

View file

@ -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])

View file

@ -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;
}
}

View file

@ -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',

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,
),
),
'');
}
}

View file

@ -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;
}