Add a selected button ui state

Summary: Only for grey buttons, but can expand. Sets a selected class.

Test Plan: Review new changes in UIExamples.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

Differential Revision: https://secure.phabricator.com/D18501

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '2bee293d',
+    'core.pkg.css' => '0437a674',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -127,7 +127,7 @@ return array(
     'rsrc/css/layout/phabricator-source-code-view.css' => 'aea41829',
     'rsrc/css/phui/button/phui-button-bar.css' => 'f1ff5494',
     'rsrc/css/phui/button/phui-button-simple.css' => '8e1baf68',
-    'rsrc/css/phui/button/phui-button.css' => 'a37aa3a8',
+    'rsrc/css/phui/button/phui-button.css' => '1863cc6e',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '21154caf',
@@ -529,7 +529,7 @@ return array(
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => '442efd08',
     'rsrc/js/phuix/PHUIXAutocomplete.js' => '4b7430ab',
-    'rsrc/js/phuix/PHUIXButtonView.js' => 'a37126bd',
+    'rsrc/js/phuix/PHUIXButtonView.js' => '8a91e1ac',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => '8018ee50',
     'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
     'rsrc/js/phuix/PHUIXFormControl.js' => '83e03671',
@@ -824,7 +824,7 @@ return array(
     'phui-big-info-view-css' => 'acc3492c',
     'phui-box-css' => '745e881d',
     'phui-button-bar-css' => 'f1ff5494',
-    'phui-button-css' => 'a37aa3a8',
+    'phui-button-css' => '1863cc6e',
     'phui-button-simple-css' => '8e1baf68',
     'phui-calendar-css' => 'f1ddf11c',
     'phui-calendar-day-css' => '572b1893',
@@ -882,7 +882,7 @@ return array(
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '442efd08',
     'phuix-autocomplete' => '4b7430ab',
-    'phuix-button-view' => 'a37126bd',
+    'phuix-button-view' => '8a91e1ac',
     'phuix-dropdown-menu' => '8018ee50',
     'phuix-form-control-view' => '83e03671',
     'phuix-icon-view' => 'bff6884b',
@@ -1557,6 +1557,10 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
+    '8a91e1ac' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
     '8ce821c5' => array(
       'phabricator-notification',
       'javelin-stratcom',
@@ -1696,10 +1700,6 @@ return array(
       'javelin-sound',
       'phabricator-notification',
     ),
-    'a37126bd' => array(
-      'javelin-install',
-      'javelin-dom',
-    ),
     'a3a63478' => array(
       'phui-workcard-view-css',
     ),

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -83,9 +83,11 @@ final class PHUIButtonExample extends PhabricatorUIExample {
       ),
       array(
         'icon' => 'fa-upload',
+        'disabled' => true,
       ),
       array(
         'icon' => 'fa-street-view',
+        'selected' => true,
       ),
       array(
         'text' => pht('Copy "Quack" to Clipboard'),
@@ -99,6 +101,8 @@ final class PHUIButtonExample extends PhabricatorUIExample {
         ->setColor(PHUIButtonView::GREY)
         ->setIcon(idx($spec, 'icon'))
         ->setText(idx($spec, 'text'))
+        ->setSelected(idx($spec, 'selected'))
+        ->setDisabled(idx($spec, 'disabled'))
         ->addClass(PHUI::MARGIN_SMALL_RIGHT)
         ->setDropdown(idx($spec, 'dropdown'));
 

src/view/phui/PHUIButtonView.php

@@ -25,6 +25,7 @@ final class PHUIButtonView extends AphrontTagView {
   private $href = null;
   private $title = null;
   private $disabled;
+  private $selected;
   private $name;
   private $tooltip;
   private $noCSS;
@@ -74,6 +75,11 @@ final class PHUIButtonView extends AphrontTagView {
     return $this;
   }
 
+  public function setSelected($selected) {
+    $this->selected = $selected;
+    return $this;
+  }
+
   public function setTag($tag) {
     $this->tag = $tag;
     return $this;
@@ -189,6 +195,10 @@ final class PHUIButtonView extends AphrontTagView {
       $classes[] = 'disabled';
     }
 
+    if ($this->selected) {
+      $classes[] = 'selected';
+    }
+
     switch ($this->getButtonType()) {
       case self::BUTTONTYPE_DEFAULT:
         $classes[] = 'phui-button-default';

webroot/rsrc/css/phui/button/phui-button.css

@@ -105,6 +105,19 @@ button[disabled] {
   opacity: 0.5;
 }
 
+button.button-grey.selected,
+a.button.button-grey.selected,
+button.button-grey.selected:hover,
+a.button.button-grey.selected:hover {
+  border-color: {$sh-orangetext};
+  color: {$sh-orangetext};
+}
+
+button.button-grey.selected .phui-icon-view,
+a.button-grey.selected .phui-icon-view {
+  color: {$sh-orangetext};
+}
+
 a.phuix-dropdown-open {
   color: {$greytext};
 }

webroot/rsrc/js/phuix/PHUIXButtonView.js

@@ -16,6 +16,7 @@ JX.install('PHUIXButtonView', {
 
     _iconView: null,
     _color: null,
+    _selected: null,
     _buttonType: null,
 
     setIcon: function(icon) {
@@ -43,6 +44,13 @@ JX.install('PHUIXButtonView', {
       return this;
     },
 
+    setSelected: function(selected) {
+      var node = this.getNode();
+      this._selected = selected;
+      JX.DOM.alterClass(node, 'selected', this._selected);
+      return this;
+    },
+
     setButtonType: function(button_type) {
       var self = JX.PHUIXButtonView;