diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 95b0bb207d..501f1fbd26 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3847,7 +3847,7 @@ celerity_register_resource_map(array( ), 'phui-button-css' => array( - 'uri' => '/res/abf52ae9/rsrc/css/phui/phui-button.css', + 'uri' => '/res/5d0a3cec/rsrc/css/phui/phui-button.css', 'type' => 'css', 'requires' => array( @@ -3892,7 +3892,7 @@ celerity_register_resource_map(array( ), 'phui-header-view-css' => array( - 'uri' => '/res/d6ca0939/rsrc/css/phui/phui-header-view.css', + 'uri' => '/res/8a573105/rsrc/css/phui/phui-header-view.css', 'type' => 'css', 'requires' => array( @@ -4343,7 +4343,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'a838a0e1' => + '49232ec3' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4392,7 +4392,7 @@ celerity_register_resource_map(array( 41 => 'phabricator-tag-view-css', 42 => 'phui-list-view-css', ), - 'uri' => '/res/pkg/a838a0e1/core.pkg.css', + 'uri' => '/res/pkg/49232ec3/core.pkg.css', 'type' => 'css', ), '2c1dba03' => @@ -4584,15 +4584,15 @@ celerity_register_resource_map(array( ), 'reverse' => array( - 'aphront-dialog-view-css' => 'a838a0e1', - 'aphront-error-view-css' => 'a838a0e1', - 'aphront-list-filter-view-css' => 'a838a0e1', - 'aphront-pager-view-css' => 'a838a0e1', - 'aphront-panel-view-css' => 'a838a0e1', - 'aphront-table-view-css' => 'a838a0e1', - 'aphront-tokenizer-control-css' => 'a838a0e1', - 'aphront-tooltip-css' => 'a838a0e1', - 'aphront-typeahead-control-css' => 'a838a0e1', + 'aphront-dialog-view-css' => '49232ec3', + 'aphront-error-view-css' => '49232ec3', + 'aphront-list-filter-view-css' => '49232ec3', + 'aphront-pager-view-css' => '49232ec3', + 'aphront-panel-view-css' => '49232ec3', + 'aphront-table-view-css' => '49232ec3', + 'aphront-tokenizer-control-css' => '49232ec3', + 'aphront-tooltip-css' => '49232ec3', + 'aphront-typeahead-control-css' => '49232ec3', 'differential-changeset-view-css' => '67248472', 'differential-core-view-css' => '67248472', 'differential-inline-comment-editor' => '92f459f0', @@ -4606,7 +4606,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '67248472', 'diffusion-commit-view-css' => '7aa115b4', 'diffusion-icons-css' => '7aa115b4', - 'global-drag-and-drop-css' => 'a838a0e1', + 'global-drag-and-drop-css' => '49232ec3', 'inline-comment-summary-css' => '67248472', 'javelin-aphlict' => '2c1dba03', 'javelin-behavior' => '3e3be199', @@ -4681,56 +4681,56 @@ celerity_register_resource_map(array( 'javelin-util' => '3e3be199', 'javelin-vector' => '3e3be199', 'javelin-workflow' => '3e3be199', - 'lightbox-attachment-css' => 'a838a0e1', + 'lightbox-attachment-css' => '49232ec3', 'maniphest-task-summary-css' => '49898640', - 'phabricator-action-list-view-css' => 'a838a0e1', - 'phabricator-application-launch-view-css' => 'a838a0e1', + 'phabricator-action-list-view-css' => '49232ec3', + 'phabricator-application-launch-view-css' => '49232ec3', 'phabricator-busy' => '2c1dba03', 'phabricator-content-source-view-css' => '67248472', - 'phabricator-core-css' => 'a838a0e1', - 'phabricator-crumbs-view-css' => 'a838a0e1', + 'phabricator-core-css' => '49232ec3', + 'phabricator-crumbs-view-css' => '49232ec3', 'phabricator-drag-and-drop-file-upload' => '92f459f0', 'phabricator-dropdown-menu' => '2c1dba03', 'phabricator-file-upload' => '2c1dba03', - 'phabricator-filetree-view-css' => 'a838a0e1', - 'phabricator-flag-css' => 'a838a0e1', + 'phabricator-filetree-view-css' => '49232ec3', + 'phabricator-flag-css' => '49232ec3', 'phabricator-hovercard' => '2c1dba03', - 'phabricator-jump-nav' => 'a838a0e1', + 'phabricator-jump-nav' => '49232ec3', 'phabricator-keyboard-shortcut' => '2c1dba03', 'phabricator-keyboard-shortcut-manager' => '2c1dba03', - 'phabricator-main-menu-view' => 'a838a0e1', + 'phabricator-main-menu-view' => '49232ec3', 'phabricator-menu-item' => '2c1dba03', - 'phabricator-nav-view-css' => 'a838a0e1', + 'phabricator-nav-view-css' => '49232ec3', 'phabricator-notification' => '2c1dba03', - 'phabricator-notification-css' => 'a838a0e1', - 'phabricator-notification-menu-css' => 'a838a0e1', + 'phabricator-notification-css' => '49232ec3', + 'phabricator-notification-menu-css' => '49232ec3', 'phabricator-object-selector-css' => '67248472', 'phabricator-phtize' => '2c1dba03', 'phabricator-prefab' => '2c1dba03', 'phabricator-project-tag-css' => '49898640', - 'phabricator-remarkup-css' => 'a838a0e1', + 'phabricator-remarkup-css' => '49232ec3', 'phabricator-shaped-request' => '92f459f0', - 'phabricator-side-menu-view-css' => 'a838a0e1', - 'phabricator-standard-page-view' => 'a838a0e1', - 'phabricator-tag-view-css' => 'a838a0e1', + 'phabricator-side-menu-view-css' => '49232ec3', + 'phabricator-standard-page-view' => '49232ec3', + 'phabricator-tag-view-css' => '49232ec3', 'phabricator-textareautils' => '2c1dba03', 'phabricator-tooltip' => '2c1dba03', - 'phabricator-transaction-view-css' => 'a838a0e1', - 'phabricator-zindex-css' => 'a838a0e1', - 'phui-button-css' => 'a838a0e1', - 'phui-form-css' => 'a838a0e1', - 'phui-form-view-css' => 'a838a0e1', - 'phui-header-view-css' => 'a838a0e1', - 'phui-icon-view-css' => 'a838a0e1', - 'phui-list-view-css' => 'a838a0e1', - 'phui-object-item-list-view-css' => 'a838a0e1', - 'phui-property-list-view-css' => 'a838a0e1', - 'phui-spacing-css' => 'a838a0e1', - 'sprite-apps-large-css' => 'a838a0e1', - 'sprite-gradient-css' => 'a838a0e1', - 'sprite-icons-css' => 'a838a0e1', - 'sprite-menu-css' => 'a838a0e1', - 'sprite-status-css' => 'a838a0e1', - 'syntax-highlighting-css' => 'a838a0e1', + 'phabricator-transaction-view-css' => '49232ec3', + 'phabricator-zindex-css' => '49232ec3', + 'phui-button-css' => '49232ec3', + 'phui-form-css' => '49232ec3', + 'phui-form-view-css' => '49232ec3', + 'phui-header-view-css' => '49232ec3', + 'phui-icon-view-css' => '49232ec3', + 'phui-list-view-css' => '49232ec3', + 'phui-object-item-list-view-css' => '49232ec3', + 'phui-property-list-view-css' => '49232ec3', + 'phui-spacing-css' => '49232ec3', + 'sprite-apps-large-css' => '49232ec3', + 'sprite-gradient-css' => '49232ec3', + 'sprite-icons-css' => '49232ec3', + 'sprite-menu-css' => '49232ec3', + 'sprite-status-css' => '49232ec3', + 'syntax-highlighting-css' => '49232ec3', ), )); diff --git a/src/applications/uiexample/examples/PHUIBoxExample.php b/src/applications/uiexample/examples/PHUIBoxExample.php index c972e9e316..d9daecd8cc 100644 --- a/src/applications/uiexample/examples/PHUIBoxExample.php +++ b/src/applications/uiexample/examples/PHUIBoxExample.php @@ -58,6 +58,26 @@ final class PHUIBoxExample extends PhabricatorUIExample { ->addPadding(PHUI::PADDING_LARGE) ->addMargin(PHUI::MARGIN_LARGE_BOTTOM)); + $image = id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_ICONS) + ->setSpriteIcon('love'); + $button = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::SIMPLE) + ->setIcon($image) + ->setText('Such Wow') + ->addClass(PHUI::MARGIN_SMALL_RIGHT); + + $header = id(new PHUIHeaderView()) + ->setHeader('Fancy Box') + ->addActionLink($button); + + $obj4 = id(new PHUIObjectBoxView()) + ->setHeader($header) + ->appendChild(id(new PHUIBoxView()) + ->addPadding(PHUI::PADDING_MEDIUM) + ->appendChild('Such Fancy, Nice Box, Many Corners.')); + $head1 = id(new PHUIHeaderView()) ->setHeader(pht('Plain Box')); @@ -67,6 +87,9 @@ final class PHUIBoxExample extends PhabricatorUIExample { $head3 = id(new PHUIHeaderView()) ->setHeader(pht('Shadow Box with space')); + $head4 = id(new PHUIHeaderView()) + ->setHeader(pht('PHUIObjectBoxView')); + $wrap1 = id(new PHUIBoxView()) ->appendChild($layout1) ->addMargin(PHUI::MARGIN_LARGE); @@ -88,7 +111,9 @@ final class PHUIBoxExample extends PhabricatorUIExample { $head2, $wrap2, $head3, - $wrap3 + $wrap3, + $head4, + $obj4, )); } } diff --git a/src/applications/uiexample/examples/PHUIButtonExample.php b/src/applications/uiexample/examples/PHUIButtonExample.php index 10872bcb20..10b7159864 100644 --- a/src/applications/uiexample/examples/PHUIButtonExample.php +++ b/src/applications/uiexample/examples/PHUIButtonExample.php @@ -119,8 +119,25 @@ final class PHUIButtonExample extends PhabricatorUIExample { ->addClass(PHUI::MARGIN_SMALL_RIGHT); } + $column2 = array(); + $icons = array( + 'Subscribe' => 'meta-mta', + 'Edit' => 'edit'); + foreach ($icons as $text => $icon) { + $image = id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_ICONS) + ->setSpriteIcon($icon); + $column2[] = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::SIMPLE) + ->setIcon($image) + ->setText($text) + ->addClass(PHUI::MARGIN_SMALL_RIGHT); + } + $layout3 = id(new AphrontMultiColumnView()) ->addColumn($column) + ->addColumn($column2) ->setFluidLayout(true) ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php index 3970b882f2..81735ee728 100644 --- a/src/view/phui/PHUIButtonView.php +++ b/src/view/phui/PHUIButtonView.php @@ -6,6 +6,7 @@ final class PHUIButtonView extends AphrontTagView { const GREY = 'grey'; const BLACK = 'black'; const DISABLED = 'disabled'; + const SIMPLE = 'simple'; const SMALL = 'small'; const BIG = 'big'; diff --git a/src/view/phui/PHUIHeaderView.php b/src/view/phui/PHUIHeaderView.php index 5bfb58785a..a3d4306ee9 100644 --- a/src/view/phui/PHUIHeaderView.php +++ b/src/view/phui/PHUIHeaderView.php @@ -13,6 +13,7 @@ final class PHUIHeaderView extends AphrontView { private $noBackground; private $bleedHeader; private $properties = array(); + private $actionLinks = array(); private $policyObject; public function setHeader($header) { @@ -65,6 +66,11 @@ final class PHUIHeaderView extends AphrontView { return $this; } + public function addActionLink(PHUIButtonView $button) { + $this->actionLinks[] = $button; + return $this; + } + public function setStatus($icon, $color, $name) { $header_class = 'phui-header-status'; @@ -184,6 +190,22 @@ final class PHUIHeaderView extends AphrontView { $property_list); } + if ($this->actionLinks) { + $actions = array(); + foreach ($this->actionLinks as $button) { + $button->setColor(PHUIButtonView::SIMPLE); + $button->addClass(PHUI::MARGIN_SMALL_LEFT); + $button->addClass('phui-header-action-link'); + $actions[] = $button; + } + $header[] = phutil_tag( + 'div', + array( + 'class' => 'phui-header-action-links', + ), + $actions); + } + return phutil_tag( 'div', array( diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css index cc5aba5ed7..5bc2b8e3ab 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -70,6 +70,17 @@ a.grey:visited { text-shadow: none; } +button.simple, +input[type="submit"].simple, +a.simple, +a.simple:visited { + background-color: transparent; + background-image: none; + border: 1px solid transparent; + color: {$bluetext}; + text-shadow: 0 1px #fff; +} + a.disabled, button.disabled, button[disabled] { @@ -102,6 +113,16 @@ button:hover { box-shadow: inset 0 0 5px rgba(0,0,0,.4); } +a.button.simple:hover, +button.simple:hover { + background-color: #fff; + border: 1px solid {$lightgreyborder}; + background-image: none; + border-bottom: 1px solid {$greyborder}; + text-shadow: none; + box-shadow: none; +} + a.button.grey:hover, button.grey:hover { text-decoration: none; diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css index 5c62dfc6a7..94cc86f8d2 100644 --- a/webroot/rsrc/css/phui/phui-header-view.css +++ b/webroot/rsrc/css/phui/phui-header-view.css @@ -41,10 +41,19 @@ body .phui-header-shell.phui-bleed-header padding: 16px; font-size: 15px; color: {$darkbluetext}; + position: relative; } -.phui-header-view a { - color: {$darkbluetext}; +.phui-header-view .phui-header-action-links { + position: absolute; + top: 5px; + right: 0; +} + +.device-phone .phui-header-action-link .phui-button-text { + visibility: hidden; + width: 0; + margin-left: 12px; } .phui-header-divider {