diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- 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 @@ '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 @@ '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 --- a/src/applications/uiexample/examples/PHUIButtonBarExample.php +++ b/src/applications/uiexample/examples/PHUIButtonBarExample.php @@ -21,7 +21,7 @@ '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 @@ ->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 --- a/src/applications/uiexample/examples/PHUIButtonExample.php +++ b/src/applications/uiexample/examples/PHUIButtonExample.php @@ -120,32 +120,44 @@ ->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 @@ ->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 @@ ->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 @@ ->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 --- a/src/view/phui/PHUIButtonView.php +++ b/src/view/phui/PHUIButtonView.php @@ -6,7 +6,11 @@ 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 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -104,7 +104,7 @@ 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 @@ 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 @@ /* 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 @@ 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}; +}