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

@@ -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',

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())
+    $button_bar2 = new PHUIButtonBarView();
-      ->appendChild($button_bar)
+    foreach ($icons as $text => $icon) {
-      ->addPadding(PHUI::PADDING_LARGE);
+      $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);
   }

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) {
+    $colors = array(
-      $image = id(new PHUIIconView())
+      PHUIButtonView::SIMPLE,
-          ->setIconFont($icon);
+      PHUIButtonView::SIMPLE_YELLOW,
-      $column2[] = id(new PHUIButtonView())
+      PHUIButtonView::SIMPLE_GREY,
-        ->setTag('a')
+      PHUIButtonView::SIMPLE_BLUE,
-        ->setColor(PHUIButtonView::SIMPLE)
+    );
-        ->setIcon($image)
+    $column = array();
-        ->setText($text)
+    foreach ($colors as $color) {
-        ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+      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,
     );
   }
 }

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';

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};
+}