diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 23a6dc568e..2078ba6a52 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -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', ), )); diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 38bc10cc9f..cd779934d0 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -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', diff --git a/src/applications/config/controller/PhabricatorConfigGroupController.php b/src/applications/config/controller/PhabricatorConfigGroupController.php index 98337b6d7a..329fd62614 100644 --- a/src/applications/config/controller/PhabricatorConfigGroupController.php +++ b/src/applications/config/controller/PhabricatorConfigGroupController.php @@ -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'); diff --git a/src/applications/config/controller/PhabricatorConfigIssueListController.php b/src/applications/config/controller/PhabricatorConfigIssueListController.php index 984ccfbbd9..2849635d29 100644 --- a/src/applications/config/controller/PhabricatorConfigIssueListController.php +++ b/src/applications/config/controller/PhabricatorConfigIssueListController.php @@ -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) { diff --git a/src/applications/config/controller/PhabricatorConfigListController.php b/src/applications/config/controller/PhabricatorConfigListController.php index 9a6736275b..9818fce2b3 100644 --- a/src/applications/config/controller/PhabricatorConfigListController.php +++ b/src/applications/config/controller/PhabricatorConfigListController.php @@ -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()) diff --git a/src/applications/project/controller/PhabricatorProjectListController.php b/src/applications/project/controller/PhabricatorProjectListController.php index 8c97a521ea..e08c606f59 100644 --- a/src/applications/project/controller/PhabricatorProjectListController.php +++ b/src/applications/project/controller/PhabricatorProjectListController.php @@ -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]) diff --git a/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php b/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php new file mode 100644 index 0000000000..30940db29a --- /dev/null +++ b/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php @@ -0,0 +1,190 @@ +PhabricatorObjectItemListView 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; + } +} diff --git a/src/view/layout/PhabricatorObjectItemListView.php b/src/view/layout/PhabricatorObjectItemListView.php index feb224458d..a88d46af2c 100644 --- a/src/view/layout/PhabricatorObjectItemListView.php +++ b/src/view/layout/PhabricatorObjectItemListView.php @@ -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', diff --git a/src/view/layout/PhabricatorObjectItemView.php b/src/view/layout/PhabricatorObjectItemView.php index b99f0055aa..035af01b61 100644 --- a/src/view/layout/PhabricatorObjectItemView.php +++ b/src/view/layout/PhabricatorObjectItemView.php @@ -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, + ), + ), + ''); + } + + + } diff --git a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css index 605b118763..37f9f17a39 100644 --- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css +++ b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css @@ -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; }