diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index c5a1f52168..b85438c293 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3796,7 +3796,7 @@ celerity_register_resource_map(array( ), 'phui-list-view-css' => array( - 'uri' => '/res/3235e888/rsrc/css/phui/phui-list.css', + 'uri' => '/res/c748be1f/rsrc/css/phui/phui-list.css', 'type' => 'css', 'requires' => array( @@ -4184,7 +4184,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'c98eaabf' => + 93500898 => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4233,7 +4233,7 @@ celerity_register_resource_map(array( 41 => 'phabricator-tag-view-css', 42 => 'phui-list-view-css', ), - 'uri' => '/res/pkg/c98eaabf/core.pkg.css', + 'uri' => '/res/pkg/93500898/core.pkg.css', 'type' => 'css', ), '64eeda79' => @@ -4425,15 +4425,15 @@ celerity_register_resource_map(array( ), 'reverse' => array( - 'aphront-dialog-view-css' => 'c98eaabf', - 'aphront-error-view-css' => 'c98eaabf', - 'aphront-list-filter-view-css' => 'c98eaabf', - 'aphront-pager-view-css' => 'c98eaabf', - 'aphront-panel-view-css' => 'c98eaabf', - 'aphront-table-view-css' => 'c98eaabf', - 'aphront-tokenizer-control-css' => 'c98eaabf', - 'aphront-tooltip-css' => 'c98eaabf', - 'aphront-typeahead-control-css' => 'c98eaabf', + 'aphront-dialog-view-css' => '93500898', + 'aphront-error-view-css' => '93500898', + 'aphront-list-filter-view-css' => '93500898', + 'aphront-pager-view-css' => '93500898', + 'aphront-panel-view-css' => '93500898', + 'aphront-table-view-css' => '93500898', + 'aphront-tokenizer-control-css' => '93500898', + 'aphront-tooltip-css' => '93500898', + 'aphront-typeahead-control-css' => '93500898', 'differential-changeset-view-css' => '4dc2311c', 'differential-core-view-css' => '4dc2311c', 'differential-inline-comment-editor' => '5e9e5c4e', @@ -4447,7 +4447,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '4dc2311c', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => 'c98eaabf', + 'global-drag-and-drop-css' => '93500898', 'inline-comment-summary-css' => '4dc2311c', 'javelin-aphlict' => '64eeda79', 'javelin-behavior' => '9564fa17', @@ -4522,56 +4522,56 @@ celerity_register_resource_map(array( 'javelin-util' => '9564fa17', 'javelin-vector' => '9564fa17', 'javelin-workflow' => '9564fa17', - 'lightbox-attachment-css' => 'c98eaabf', + 'lightbox-attachment-css' => '93500898', 'maniphest-task-summary-css' => '49898640', - 'phabricator-action-list-view-css' => 'c98eaabf', - 'phabricator-application-launch-view-css' => 'c98eaabf', + 'phabricator-action-list-view-css' => '93500898', + 'phabricator-application-launch-view-css' => '93500898', 'phabricator-busy' => '64eeda79', 'phabricator-content-source-view-css' => '4dc2311c', - 'phabricator-core-css' => 'c98eaabf', - 'phabricator-crumbs-view-css' => 'c98eaabf', + 'phabricator-core-css' => '93500898', + 'phabricator-crumbs-view-css' => '93500898', 'phabricator-drag-and-drop-file-upload' => '5e9e5c4e', 'phabricator-dropdown-menu' => '64eeda79', 'phabricator-file-upload' => '64eeda79', - 'phabricator-filetree-view-css' => 'c98eaabf', - 'phabricator-flag-css' => 'c98eaabf', + 'phabricator-filetree-view-css' => '93500898', + 'phabricator-flag-css' => '93500898', 'phabricator-hovercard' => '64eeda79', - 'phabricator-jump-nav' => 'c98eaabf', + 'phabricator-jump-nav' => '93500898', 'phabricator-keyboard-shortcut' => '64eeda79', 'phabricator-keyboard-shortcut-manager' => '64eeda79', - 'phabricator-main-menu-view' => 'c98eaabf', + 'phabricator-main-menu-view' => '93500898', 'phabricator-menu-item' => '64eeda79', - 'phabricator-nav-view-css' => 'c98eaabf', + 'phabricator-nav-view-css' => '93500898', 'phabricator-notification' => '64eeda79', - 'phabricator-notification-css' => 'c98eaabf', - 'phabricator-notification-menu-css' => 'c98eaabf', + 'phabricator-notification-css' => '93500898', + 'phabricator-notification-menu-css' => '93500898', 'phabricator-object-selector-css' => '4dc2311c', 'phabricator-phtize' => '64eeda79', 'phabricator-prefab' => '64eeda79', 'phabricator-project-tag-css' => '49898640', - 'phabricator-property-list-view-css' => 'c98eaabf', - 'phabricator-remarkup-css' => 'c98eaabf', + 'phabricator-property-list-view-css' => '93500898', + 'phabricator-remarkup-css' => '93500898', 'phabricator-shaped-request' => '5e9e5c4e', - 'phabricator-side-menu-view-css' => 'c98eaabf', - 'phabricator-standard-page-view' => 'c98eaabf', - 'phabricator-tag-view-css' => 'c98eaabf', + 'phabricator-side-menu-view-css' => '93500898', + 'phabricator-standard-page-view' => '93500898', + 'phabricator-tag-view-css' => '93500898', 'phabricator-textareautils' => '64eeda79', 'phabricator-tooltip' => '64eeda79', - 'phabricator-transaction-view-css' => 'c98eaabf', - 'phabricator-zindex-css' => 'c98eaabf', - 'phui-button-css' => 'c98eaabf', - 'phui-form-css' => 'c98eaabf', - 'phui-form-view-css' => 'c98eaabf', - 'phui-header-view-css' => 'c98eaabf', - 'phui-icon-view-css' => 'c98eaabf', - 'phui-list-view-css' => 'c98eaabf', - 'phui-object-item-list-view-css' => 'c98eaabf', - 'phui-spacing-css' => 'c98eaabf', - 'sprite-apps-large-css' => 'c98eaabf', - 'sprite-gradient-css' => 'c98eaabf', - 'sprite-icons-css' => 'c98eaabf', - 'sprite-menu-css' => 'c98eaabf', - 'sprite-status-css' => 'c98eaabf', - 'syntax-highlighting-css' => 'c98eaabf', + 'phabricator-transaction-view-css' => '93500898', + 'phabricator-zindex-css' => '93500898', + 'phui-button-css' => '93500898', + 'phui-form-css' => '93500898', + 'phui-form-view-css' => '93500898', + 'phui-header-view-css' => '93500898', + 'phui-icon-view-css' => '93500898', + 'phui-list-view-css' => '93500898', + 'phui-object-item-list-view-css' => '93500898', + 'phui-spacing-css' => '93500898', + 'sprite-apps-large-css' => '93500898', + 'sprite-gradient-css' => '93500898', + 'sprite-icons-css' => '93500898', + 'sprite-menu-css' => '93500898', + 'sprite-status-css' => '93500898', + 'syntax-highlighting-css' => '93500898', ), )); diff --git a/src/applications/uiexample/examples/PHUIListExample.php b/src/applications/uiexample/examples/PHUIListExample.php index 004598a66d..6e70e21672 100644 --- a/src/applications/uiexample/examples/PHUIListExample.php +++ b/src/applications/uiexample/examples/PHUIListExample.php @@ -150,6 +150,45 @@ final class PHUIListExample extends PhabricatorUIExample { ->setHref('#') ->setType(PHUIListItemView::TYPE_LINK); + $item1 = id(new PHUIListItemView()) + ->setName('Installation') + ->setHref('#') + ->setSelected(true) + ->setType(PHUIListItemView::TYPE_LINK); + + $item2 = id(new PHUIListItemView()) + ->setName('Webserver Config') + ->setHref('#') + ->setType(PHUIListItemView::TYPE_LINK); + + $details1 = id(new PHUIListItemView()) + ->setName('Details') + ->setHref('#') + ->setSelected(true) + ->setType(PHUIListItemView::TYPE_LINK); + + $details2 = id(new PHUIListItemView()) + ->setName('Lint (OK)') + ->setHref('#') + ->setType(PHUIListItemView::TYPE_LINK); + + $details3 = id(new PHUIListItemView()) + ->setName('Unit (5/5)') + ->setHref('#') + ->setType(PHUIListItemView::TYPE_LINK); + + $details4 = id(new PHUIListItemView()) + ->setName('Lint (Warn)') + ->setHref('#') + ->setStatusColor(PHUIListItemView::STATUS_WARN) + ->setType(PHUIListItemView::TYPE_LINK); + + $details5 = id(new PHUIListItemView()) + ->setName('Unit (3/5)') + ->setHref('#') + ->setStatusColor(PHUIListItemView::STATUS_FAIL) + ->setType(PHUIListItemView::TYPE_LINK); + $topnav = id(new PHUIListView()) ->setType(PHUIListView::NAVBAR_LIST) ->addMenuItem($home) @@ -158,6 +197,14 @@ final class PHUIListExample extends PhabricatorUIExample { ->addMenuItem($item3) ->addMenuItem($item4); + $statustabs = id(new PHUIListView()) + ->setType(PHUIListView::NAVBAR_LIST) + ->addMenuItem($details1) + ->addMenuItem($details2) + ->addMenuItem($details3) + ->addMenuItem($details4) + ->addMenuItem($details5); + $layout1 = array( id(new PHUIBoxView()) @@ -187,6 +234,13 @@ final class PHUIListExample extends PhabricatorUIExample { ->addMargin(PHUI::MARGIN_MEDIUM) ->setShadow(true)); + $layout5 = + array( + id(new PHUIBoxView()) + ->appendChild($statustabs) + ->addMargin(PHUI::MARGIN_MEDIUM) + ->setShadow(true)); + $head1 = id(new PHUIHeaderView()) ->setHeader(pht('Unstyled')); @@ -199,6 +253,9 @@ final class PHUIListExample extends PhabricatorUIExample { $head4 = id(new PHUIHeaderView()) ->setHeader(pht('Action Menu')); + $head5 = id(new PHUIHeaderView()) + ->setHeader(pht('Status Tabs')); + $wrap1 = id(new PHUIBoxView()) ->appendChild($layout1) ->addMargin(PHUI::MARGIN_LARGE); @@ -215,6 +272,10 @@ final class PHUIListExample extends PhabricatorUIExample { ->appendChild($layout4) ->addMargin(PHUI::MARGIN_LARGE); + $wrap5 = id(new PHUIBoxView()) + ->appendChild($layout5) + ->addMargin(PHUI::MARGIN_LARGE); + return phutil_tag( 'div', array( @@ -227,6 +288,8 @@ final class PHUIListExample extends PhabricatorUIExample { $wrap2, $head3, $wrap3, + $head5, + $wrap5, $head4, $wrap4 )); diff --git a/src/view/phui/PHUIListItemView.php b/src/view/phui/PHUIListItemView.php index f8c84df791..9af36ab589 100644 --- a/src/view/phui/PHUIListItemView.php +++ b/src/view/phui/PHUIListItemView.php @@ -10,6 +10,9 @@ final class PHUIListItemView extends AphrontTagView { const TYPE_DIVIDER = 'type-divider'; const TYPE_ICON = 'type-icon'; + const STATUS_WARN = 'phui-list-item-warn'; + const STATUS_FAIL = 'phui-list-item-fail'; + private $name; private $href; private $type = self::TYPE_LINK; @@ -19,6 +22,7 @@ final class PHUIListItemView extends AphrontTagView { private $selected; private $disabled; private $renderNameAsTooltip; + private $statusColor; public function setRenderNameAsTooltip($render_name_as_tooltip) { $this->renderNameAsTooltip = $render_name_as_tooltip; @@ -92,6 +96,11 @@ final class PHUIListItemView extends AphrontTagView { return $this->isExternal; } + public function setStatusColor($color) { + $this->statusColor = $color; + return $this; + } + protected function getTagName() { return 'li'; } @@ -109,6 +118,10 @@ final class PHUIListItemView extends AphrontTagView { $classes[] = 'phui-list-item-selected'; } + if ($this->statusColor) { + $classes[] = $this->statusColor; + } + return array( 'class' => $classes, ); diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css index 0f8317d71a..63ff094fc8 100644 --- a/webroot/rsrc/css/phui/phui-list.css +++ b/webroot/rsrc/css/phui/phui-list.css @@ -127,3 +127,37 @@ float: none; border: none; } + +/* - Status Colors ------------------------------------------------------------- + + Colors for navbars + +*/ + +.phui-list-item-warn .phui-list-item-href { + color: #bc7837; +} + +.phui-list-item-fail .phui-list-item-href { + color: {$red}; +} + +.phui-list-item-warn.phui-list-item-selected .phui-list-item-href, +.phui-list-item-warn .phui-list-item-href:hover { + background: {$lightyellow}; + color: #bc7837; +} + +.phui-list-item-fail.phui-list-item-selected .phui-list-item-href, +.phui-list-item-fail .phui-list-item-href:hover { + background: {$lightred}; + color: {$red}; +} + +.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover { + background: #fcf0bd; +} + +.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover { + background: #f5d3d0; +}