From 47114513b00f88d4e22070556a2a00dd3339b2af Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 25 Mar 2015 12:51:54 -0700 Subject: [PATCH] More SIMPLE button styles for buttons and button bars Summary: Ref T1460, this adds additional buttons colors and styles for use in inline comments. Will also backport to Calendar and PHUIInfoView Test Plan: Review new buttons and hover states in UI Examples. {F350549} {F350550} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T1460 Differential Revision: https://secure.phabricator.com/D12162 --- resources/celerity/map.php | 6 +- .../examples/PHUIButtonBarExample.php | 48 ++++++++++-- .../uiexample/examples/PHUIButtonExample.php | 49 +++++++++---- src/view/phui/PHUIButtonView.php | 4 + webroot/rsrc/css/phui/phui-button.css | 73 ++++++++++++++++++- 5 files changed, 152 insertions(+), 28 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 5dbc87d0a5..a67605eb7a 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'ab12d75f', + 'core.pkg.css' => '02ae106f', 'core.pkg.js' => '75599122', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '217276e8', @@ -124,7 +124,7 @@ return array( 'rsrc/css/phui/phui-action-list.css' => '9ee9910a', 'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5', 'rsrc/css/phui/phui-box.css' => '7b3a2eed', - 'rsrc/css/phui/phui-button.css' => '21cb97f9', + 'rsrc/css/phui/phui-button.css' => '57eaddc9', 'rsrc/css/phui/phui-crumbs-view.css' => '594d719e', 'rsrc/css/phui/phui-document.css' => '0f83a7df', 'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5', @@ -772,7 +772,7 @@ return array( 'phui-action-header-view-css' => '89c497e7', 'phui-action-panel-css' => '3ee9afd5', 'phui-box-css' => '7b3a2eed', - 'phui-button-css' => '21cb97f9', + 'phui-button-css' => '57eaddc9', 'phui-calendar-css' => '8675968e', 'phui-calendar-day-css' => 'de035c8a', 'phui-calendar-list-css' => 'c1d0ca59', diff --git a/src/applications/uiexample/examples/PHUIButtonBarExample.php b/src/applications/uiexample/examples/PHUIButtonBarExample.php index 613eb7f160..0e983088c1 100644 --- a/src/applications/uiexample/examples/PHUIButtonBarExample.php +++ b/src/applications/uiexample/examples/PHUIButtonBarExample.php @@ -21,7 +21,7 @@ final class PHUIButtonBarExample extends PhabricatorUIExample { 'Edit View' => 'fa-pencil bluegrey', 'Go Forward' => 'fa-chevron-right bluegrey', ); - $button_bar = new PHUIButtonBarView(); + $button_bar1 = new PHUIButtonBarView(); foreach ($icons as $text => $icon) { $image = id(new PHUIIconView()) ->setIconFont($icon); @@ -31,16 +31,52 @@ final class PHUIButtonBarExample extends PhabricatorUIExample { ->setTitle($text) ->setIcon($image); - $button_bar->addButton($button); + $button_bar1->addButton($button); } - $layout = id(new PHUIBoxView()) - ->appendChild($button_bar) - ->addPadding(PHUI::PADDING_LARGE); + $button_bar2 = new PHUIButtonBarView(); + foreach ($icons as $text => $icon) { + $image = id(new PHUIIconView()) + ->setIconFont($icon); + $button = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::SIMPLE) + ->setTitle($text) + ->setText($text); + + $button_bar2->addButton($button); + } + + $button_bar3 = new PHUIButtonBarView(); + foreach ($icons as $text => $icon) { + $image = id(new PHUIIconView()) + ->setIconFont($icon); + $button = id(new PHUIButtonView()) + ->setTag('a') + ->setColor(PHUIButtonView::SIMPLE) + ->setTitle($text) + ->setIcon($image); + + $button_bar3->addButton($button); + } + + $layout1 = id(new PHUIBoxView()) + ->appendChild($button_bar1) + ->addClass('ml'); + + $layout2 = id(new PHUIBoxView()) + ->appendChild($button_bar2) + ->addClass('mlr mll mlb'); + + $layout3 = id(new PHUIBoxView()) + ->appendChild($button_bar3) + ->addClass('mlr mll mlb'); $wrap1 = id(new PHUIObjectBoxView()) ->setHeaderText('Button Bar Example') - ->appendChild($layout); + ->appendChild($layout1) + ->appendChild($layout2) + ->appendChild($layout3); return array($wrap1); } diff --git a/src/applications/uiexample/examples/PHUIButtonExample.php b/src/applications/uiexample/examples/PHUIButtonExample.php index ddb3d7aed8..8486128752 100644 --- a/src/applications/uiexample/examples/PHUIButtonExample.php +++ b/src/applications/uiexample/examples/PHUIButtonExample.php @@ -120,32 +120,44 @@ final class PHUIButtonExample extends PhabricatorUIExample { ->addClass(PHUI::MARGIN_SMALL_RIGHT); } - $column2 = array(); + $layout3 = id(new AphrontMultiColumnView()) + ->addColumn($column) + ->setFluidLayout(true) + ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); + $icons = array( 'Subscribe' => 'fa-check-circle bluegrey', 'Edit' => 'fa-pencil bluegrey', ); - foreach ($icons as $text => $icon) { - $image = id(new PHUIIconView()) - ->setIconFont($icon); - $column2[] = id(new PHUIButtonView()) - ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) - ->setIcon($image) - ->setText($text) - ->addClass(PHUI::MARGIN_SMALL_RIGHT); + $colors = array( + PHUIButtonView::SIMPLE, + PHUIButtonView::SIMPLE_YELLOW, + PHUIButtonView::SIMPLE_GREY, + PHUIButtonView::SIMPLE_BLUE, + ); + $column = array(); + foreach ($colors as $color) { + foreach ($icons as $text => $icon) { + $image = id(new PHUIIconView()) + ->setIconFont($icon); + $column[] = id(new PHUIButtonView()) + ->setTag('a') + ->setColor($color) + ->setIcon($image) + ->setText($text) + ->addClass(PHUI::MARGIN_SMALL_RIGHT); + } } - $layout3 = id(new AphrontMultiColumnView()) + $layout4 = id(new AphrontMultiColumnView()) ->addColumn($column) - ->addColumn($column2) ->setFluidLayout(true) ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); // Baby Got Back Buttons - $column = array(); + $column = array(); $icons = array('Asana', 'Github', 'Facebook', 'Google', 'LDAP'); foreach ($icons as $icon) { $image = id(new PHUIIconView()) @@ -161,7 +173,7 @@ final class PHUIButtonExample extends PhabricatorUIExample { ->addClass(PHUI::MARGIN_MEDIUM_RIGHT); } - $layout4 = id(new AphrontMultiColumnView()) + $layout5 = id(new AphrontMultiColumnView()) ->addColumn($column) ->setFluidLayout(true) ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM); @@ -179,6 +191,9 @@ final class PHUIButtonExample extends PhabricatorUIExample { ->setHeader('Icon Buttons'); $head4 = id(new PHUIHeaderView()) + ->setHeader('Simple Buttons'); + + $head5 = id(new PHUIHeaderView()) ->setHeader('Big Icon Buttons'); $wrap1 = id(new PHUIBoxView()) @@ -197,8 +212,12 @@ final class PHUIButtonExample extends PhabricatorUIExample { ->appendChild($layout4) ->addMargin(PHUI::MARGIN_LARGE); + $wrap5 = id(new PHUIBoxView()) + ->appendChild($layout5) + ->addMargin(PHUI::MARGIN_LARGE); + return array($head1, $wrap1, $head2, $wrap2, $head3, $wrap3, - $head4, $wrap4, + $head4, $wrap4, $head5, $wrap5, ); } } diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php index 5de56909d2..3e0854a670 100644 --- a/src/view/phui/PHUIButtonView.php +++ b/src/view/phui/PHUIButtonView.php @@ -6,7 +6,11 @@ final class PHUIButtonView extends AphrontTagView { const GREY = 'grey'; const BLACK = 'black'; const DISABLED = 'disabled'; + const SIMPLE = 'simple'; + const SIMPLE_YELLOW = 'simple simple-yellow'; + const SIMPLE_GREY = 'simple simple-grey'; + const SIMPLE_BLUE = 'simple simple-blue'; const SMALL = 'small'; const BIG = 'big'; diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css index 4b3c710687..fa4cd6be12 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -104,7 +104,7 @@ button[disabled] { body button:active, body a.button:active { - box-shadow: inset 0 0 8px rgba(0,0,0,.6); + box-shadow: inset 0 0 4px rgba(0,0,0,.4); } button.grey:active, @@ -128,9 +128,9 @@ button:hover { a.button.simple:hover, button.simple:hover { background-color: #fff; - border: 1px solid {$lightgreyborder}; + border-color: {$blueborder}; background-image: none; - border-bottom: 1px solid {$greyborder}; + border-bottom-color: {$darkblueborder}; box-shadow: none; } @@ -329,7 +329,7 @@ a.toggle-fixed { /* PHUI Button Bar */ -.phui-button-bar a.button { +.phui-button-bar a.button.has-icon { display: inline-block; height: 16px; width: 12px; @@ -350,3 +350,68 @@ a.toggle-fixed { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } + +.phui-button-bar .button.simple:hover { + border-color: {$lightblueborder}; + color: {$sky}; +} + +.phui-button-bar .button.simple:hover .phui-icon-view { + border-color: {$lightblueborder}; + color: {$sky}; +} + +/* Simple Button Colors */ +a.simple.simple-blue, +button.simple.simple-blue { + border-color: {$blue}; + background: {$lightblue}; + color: {$blue}; +} + +a.simple.simple-blue:hover, +button.simple.simple-blue:hover { + color: {$blue}; + border-color: {$blue}; +} + +a.simple.simple-blue .phui-icon-view, +button.simple.simple-blue .phui-icon-view { + color: {$blue}; +} + +a.simple.simple-yellow, +button.simple.simple-yellow { + border-color: #bc7837; + background: {$lightyellow}; + color: #bc7837; +} + +a.simple.simple-yellow:hover, +button.simple.simple-yellow:hover { + color: #bc7837; + border-color: #bc7837; +} + +a.simple.simple-yellow .phui-icon-view, +button.simple.simple-yellow .phui-icon-view { + color: #bc7837; +} + +a.simple.simple-grey, +button.simple.simple-grey { + border-color: {$greyborder}; + background: {$lightgreybackground}; + color: {$greytext}; +} + +a.simple.simple-grey:hover, +button.simple.simple-grey:hover { + color: {$greytext}; + border-color: {$greyborder}; +} + +a.simple.simple-grey .phui-icon-view, +button.simple.simple-grey .phui-icon-view { + color: {$greytext}; +}