diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 6643f60e6c..2a9c035850 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,10 +7,10 @@ */ return array( 'names' => array( - 'core.pkg.css' => '49de1b2f', + 'core.pkg.css' => '699e02b0', 'core.pkg.js' => 'a590b451', 'darkconsole.pkg.js' => 'e7393ebb', - 'differential.pkg.css' => '1b36e899', + 'differential.pkg.css' => 'cf384ffa', 'differential.pkg.js' => 'ebef29b1', 'diffusion.pkg.css' => '385e85b3', 'diffusion.pkg.js' => '0115b37c', @@ -61,7 +61,7 @@ return array( 'rsrc/css/application/differential/add-comment.css' => 'c47f8c40', 'rsrc/css/application/differential/changeset-view.css' => 'b6b0d1bb', 'rsrc/css/application/differential/core.css' => '7ac3cabc', - 'rsrc/css/application/differential/phui-inline-comment.css' => 'fa5b8d1f', + 'rsrc/css/application/differential/phui-inline-comment.css' => 'e862e60b', 'rsrc/css/application/differential/revision-comment.css' => '14b8565a', 'rsrc/css/application/differential/revision-history.css' => '0e8eb855', 'rsrc/css/application/differential/revision-list.css' => 'f3c47d33', @@ -127,7 +127,7 @@ return array( 'rsrc/css/phui/phui-action-list.css' => '32c388b3', 'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5', 'rsrc/css/phui/phui-box.css' => 'a5bb366d', - 'rsrc/css/phui/phui-button.css' => 'cf7ca639', + 'rsrc/css/phui/phui-button.css' => 'e9ea9260', 'rsrc/css/phui/phui-crumbs-view.css' => 'ce840ec2', 'rsrc/css/phui/phui-document.css' => '3eb3b3e3', 'rsrc/css/phui/phui-feed-story.css' => 'c70d2dd9', @@ -765,7 +765,7 @@ return array( 'phriction-document-css' => 'd1861e06', 'phui-action-panel-css' => '3ee9afd5', 'phui-box-css' => 'a5bb366d', - 'phui-button-css' => 'cf7ca639', + 'phui-button-css' => 'e9ea9260', 'phui-calendar-css' => 'ccabe893', 'phui-calendar-day-css' => 'd1cf6f93', 'phui-calendar-list-css' => 'c1c7f338', @@ -782,7 +782,7 @@ return array( 'phui-image-mask-css' => '5a8b09c8', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '5b16bac6', - 'phui-inline-comment-view-css' => 'fa5b8d1f', + 'phui-inline-comment-view-css' => 'e862e60b', 'phui-list-view-css' => '02ab3534', 'phui-object-box-css' => '3db9f358', 'phui-object-item-list-view-css' => '2b126bca', diff --git a/src/applications/uiexample/examples/PHUIButtonBarExample.php b/src/applications/uiexample/examples/PHUIButtonBarExample.php index 8e00a99436..e41234e5bd 100644 --- a/src/applications/uiexample/examples/PHUIButtonBarExample.php +++ b/src/applications/uiexample/examples/PHUIButtonBarExample.php @@ -61,6 +61,20 @@ final class PHUIButtonBarExample extends PhabricatorUIExample { $button_bar3->addButton($button); } + $button_bar4 = new PHUIButtonBarView(); + $button_bar4->setBorderless(true); + foreach ($icons as $text => $icon) { + $image = id(new PHUIIconView()) + ->setIconFont($icon); + $button = id(new PHUIButtonView()) + ->setTag('a') + ->setTitle($text) + ->setTooltip($text) + ->setIcon($image); + + $button_bar4->addButton($button); + } + $layout1 = id(new PHUIBoxView()) ->appendChild($button_bar1) ->addClass('ml'); @@ -73,11 +87,16 @@ final class PHUIButtonBarExample extends PhabricatorUIExample { ->appendChild($button_bar3) ->addClass('mlr mll mlb'); + $layout4 = id(new PHUIBoxView()) + ->appendChild($button_bar4) + ->addClass('mlr mll mlb'); + $wrap1 = id(new PHUIObjectBoxView()) ->setHeaderText(pht('Button Bar Example')) ->appendChild($layout1) ->appendChild($layout2) - ->appendChild($layout3); + ->appendChild($layout3) + ->appendChild($layout4); return array($wrap1); } diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php index de17b5dd2b..675af33d47 100644 --- a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php +++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php @@ -191,16 +191,17 @@ final class PHUIDiffInlineCommentDetailView } $action_buttons = new PHUIButtonBarView(); - $action_buttons->addClass('mml'); + $action_buttons->setBorderless(true); + $action_buttons->addClass('inline-button-divider'); $nextprev = null; if (!$this->preview) { $nextprev = new PHUIButtonBarView(); - $nextprev->addClass('mml'); + $nextprev->setBorderless(true); + $nextprev->addClass('inline-button-divider'); $up = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setTooltip(pht('Previous')) ->setIconFont('fa-chevron-up') ->addSigil('differential-inline-prev') @@ -208,7 +209,6 @@ final class PHUIDiffInlineCommentDetailView $down = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setTooltip(pht('Next')) ->setIconFont('fa-chevron-down') ->addSigil('differential-inline-next') @@ -216,7 +216,6 @@ final class PHUIDiffInlineCommentDetailView $hide = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setTooltip(pht('Hide Comment')) ->setIconFont('fa-times') ->addSigil('hide-inline') @@ -240,7 +239,6 @@ final class PHUIDiffInlineCommentDetailView $reply_button = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setIconFont('fa-reply') ->setTooltip(pht('Reply')) ->addSigil('differential-inline-reply') @@ -256,7 +254,6 @@ final class PHUIDiffInlineCommentDetailView if ($this->editable && !$this->preview) { $edit_button = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setIconFont('fa-pencil') ->setTooltip(pht('Edit')) ->addSigil('differential-inline-edit') @@ -265,7 +262,6 @@ final class PHUIDiffInlineCommentDetailView $delete_button = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setIconFont('fa-trash-o') ->setTooltip(pht('Delete')) ->addSigil('differential-inline-delete') @@ -276,7 +272,7 @@ final class PHUIDiffInlineCommentDetailView $links[] = javelin_tag( 'a', array( - 'class' => 'button simple msl', + 'class' => 'inline-button-divider pml msl', 'meta' => array( 'anchor' => $anchor_name, ), @@ -286,7 +282,6 @@ final class PHUIDiffInlineCommentDetailView $delete_button = id(new PHUIButtonView()) ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) ->setTooltip(pht('Delete')) ->setIconFont('fa-trash-o') ->addSigil('differential-inline-delete') diff --git a/src/view/phui/PHUIButtonBarView.php b/src/view/phui/PHUIButtonBarView.php index ff45415c8f..add91bbc8f 100644 --- a/src/view/phui/PHUIButtonBarView.php +++ b/src/view/phui/PHUIButtonBarView.php @@ -3,14 +3,25 @@ final class PHUIButtonBarView extends AphrontTagView { private $buttons = array(); + private $borderless; public function addButton($button) { $this->buttons[] = $button; return $this; } + public function setBorderless($borderless) { + $this->borderless = $borderless; + return $this; + } + protected function getTagAttributes() { - return array('class' => 'phui-button-bar'); + $classes = array(); + $classes[] = 'phui-button-bar'; + if ($this->borderless) { + $classes[] = 'phui-button-bar-borderless'; + } + return array('class' => implode(' ', $classes)); } protected function getTagName() { diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css index 5a08f73195..86abdd8a59 100644 --- a/webroot/rsrc/css/application/differential/phui-inline-comment.css +++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css @@ -50,12 +50,6 @@ background-color: {$sh-yellowbackground}; } -.device-desktop .differential-inline-comment .button.simple:hover - .phui-icon-view, -.device-desktop .differential-inline-comment .button.simple:hover { - color: {$sky}; -} - .differential-inline-comment-content { padding: 12px; } @@ -72,6 +66,7 @@ .differential-inline-comment .inline-head-right { float: right; + padding-right: 4px; } .differential-inline-comment .inline-head-right .button { @@ -116,16 +111,6 @@ background-color: {$lightblue}; } -.differential-inline-comment.differential-inline-comment-synthetic - .button.simple { - border-color: {$blue}; -} - -.differential-inline-comment.differential-inline-comment-synthetic - .button.simple .phui-icon-view { - color: {$blue}; -} - .differential-inline-comment.differential-inline-comment-synthetic .differential-inline-comment-head { padding-bottom: 4px; @@ -148,11 +133,6 @@ background-color: {$lightgreybackground}; } -.differential-inline-comment.inline-comment-ghost - .button.simple .phui-icon-view { - color: {$lightgreytext}; -} - /* - New/Edit Inline Comment -------------------------------------------------- Styles for when you are creating or editing an inline comment. @@ -201,14 +181,6 @@ font-size: {$biggerfontsize}; } -.inline-state-is-draft .phui-button-bar .button { - border-color: {$lightgreyborder}; -} - -.inline-state-is-draft .phui-button-bar .phui-icon-view { - color: {$lightgreytext}; -} - .differential-inline-comment-edit { background-color: {$lightgreybackground}; border: 1px solid {$lightgreyborder}; @@ -237,36 +209,20 @@ */ -.differential-inline-comment .differential-inline-done-label, -.differential-inline-comment .button.simple { +.differential-inline-comment .differential-inline-done-label { border-color: {$sh-yellowborder}; color: {$sh-yellowicon}; } -.differential-inline-comment .button.simple .phui-icon-view { - color: {$sh-yellowicon}; -} - .differential-inline-comment.inline-state-is-draft .differential-inline-done-label, .differential-inline-comment.inline-state-is-draft .button.simple, .differential-inline-comment.inline-comment-ghost .button.simple { - border-color: {$lightgreyborder}; color: {$lightgreytext}; } -.differential-inline-comment.inline-state-is-draft - .button.simple .phui-icon-view { - color: {$lightgreytext}; -} - -.device-desktop .inline-state-is-draft - a.button.simple:hover { - border-color: {$lightgreyborder}; -} - /* - Done Button -------------------------------------------------------------- Default colors, hovers, checked styles for the Done Button. @@ -277,7 +233,7 @@ border: 1px solid {$sh-yellowborder}; border-radius: 3px; display: inline-block; - padding: 4px 8px 5px; + padding: 3px 8px 4px; cursor: pointer; } @@ -287,15 +243,6 @@ cursor: pointer; } -.device-desktop .differential-inline-comment.inline-is-done - .differential-inline-done-label:hover, -.device-desktop .differential-inline-comment - .differential-inline-done-label:hover { - background-color: #fff; - color: {$sky}; - border-color: {$lightblueborder}; -} - .differential-inline-comment.inline-is-done .differential-inline-done-label { background-color: #fff; @@ -345,13 +292,6 @@ border-color: {$sky}; } -.differential-inline-comment.inline-is-done - .button.simple .phui-icon-view { - color: {$lightgreytext}; -} - - - /* - Inline State is Draft ---------------------------------------------------- The Unsubmitted state of the comment / done checkbox styles. @@ -452,3 +392,8 @@ .reveal-inlines:hover span.phui-icon-view { color: {$darkbluetext}; } + +.inline-button-divider { + border-left: 1px solid rgba(55,55,55,.25); + margin-left: 8px; +} diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css index 740864c847..3a68abb9cb 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -264,7 +264,7 @@ a.policy-control .caret { } .phui-button-bar .button .phui-icon-view { - left: 11px; + left: 9px; } .button.has-icon .phui-button-text { @@ -298,9 +298,34 @@ a.policy-control .caret { /* PHUI Button Bar */ +.phui-button-bar-borderless .button { + border: 0; + background-color: transparent; + padding-left: 10px; + padding-right: 10px; +} + +.phui-button-bar-borderless .button .phui-icon-view { + font-size: 15px; + color: rgba(55,55,55,.4); +} + +.phui-button-bar-borderless .button:hover { + background-color: transparent; + border-radius: 3px; +} + +.phui-button-bar-borderless .button:hover .phui-icon-view { + color: rgba(55,55,55,.9); +} + +.phui-button-bar-borderless .button { + border: 0; +} + .phui-button-bar a.button.has-icon { display: inline-block; - height: 16px; + height: 18px; width: 6px; }