Move simple buttons, bar to own CSS file

Summary:
- Add a simple green button... maybe don't need
- Fix tokenizer search icon
- Splite simple and button-bar into own files

Test Plan: uiexamples, various pages with buttons, diffusion

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '38689e09',
+    'core.pkg.css' => 'e8d63571',
     'core.pkg.js' => '1475bd91',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => 'a2755617',
@@ -33,7 +33,7 @@ return array(
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'faf6a6fc',
     'rsrc/css/aphront/table-view.css' => '34cf86b4',
-    'rsrc/css/aphront/tokenizer.css' => '9a8cb501',
+    'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
     'rsrc/css/aphront/tooltip.css' => '173b9431',
     'rsrc/css/aphront/typeahead-browse.css' => '4f82e510',
     'rsrc/css/aphront/typeahead.css' => '8a84cc7d',
@@ -124,6 +124,9 @@ return array(
     'rsrc/css/font/phui-font-icon-base.css' => '870a7360',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f',
+    'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
+    'rsrc/css/phui/button/phui-button-simple.css' => 'd410596b',
+    'rsrc/css/phui/button/phui-button.css' => '9f13ddcc',
     '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' => '8e10e92c',
@@ -140,7 +143,6 @@ return array(
     'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => '269cbc99',
-    'rsrc/css/phui/phui-button.css' => '836844c9',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => '504b4b23',
     'rsrc/css/phui/phui-comment-form.css' => '57af2e14',
@@ -539,7 +541,7 @@ return array(
     'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '34cf86b4',
-    'aphront-tokenizer-control-css' => '9a8cb501',
+    'aphront-tokenizer-control-css' => '15d5ff71',
     'aphront-tooltip-css' => '173b9431',
     'aphront-typeahead-control-css' => '8a84cc7d',
     'application-search-view-css' => '66ee5d46',
@@ -817,7 +819,9 @@ return array(
     'phui-basic-nav-view-css' => 'a0705f53',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '269cbc99',
-    'phui-button-css' => '836844c9',
+    'phui-button-bar-css' => '39fe680c',
+    'phui-button-css' => '9f13ddcc',
+    'phui-button-simple-css' => 'd410596b',
     'phui-calendar-css' => '477acfaa',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => '576be600',
@@ -973,6 +977,10 @@ return array(
       'javelin-dom',
       'javelin-history',
     ),
+    '15d5ff71' => array(
+      'aphront-typeahead-control-css',
+      'phui-tag-view-css',
+    ),
     16053029 => array(
       'phui-theme-css',
     ),
@@ -1102,6 +1110,10 @@ return array(
       'javelin-dom',
       'javelin-vector',
     ),
+    '39fe680c' => array(
+      'phui-button-css',
+      'phui-button-simple-css',
+    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1618,10 +1630,6 @@ return array(
       'phuix-icon-view',
       'javelin-behavior-phabricator-gesture',
     ),
-    '9a8cb501' => array(
-      'aphront-typeahead-control-css',
-      'phui-tag-view-css',
-    ),
     '9bbf3762' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1971,6 +1979,9 @@ return array(
     'd254d646' => array(
       'javelin-util',
     ),
+    'd410596b' => array(
+      'phui-button-css',
+    ),
     'd4505101' => array(
       'javelin-stratcom',
       'javelin-install',
@@ -2177,6 +2188,7 @@ return array(
       'phabricator-core-css',
       'phabricator-zindex-css',
       'phui-button-css',
+      'phui-button-simple-css',
       'phui-theme-css',
       'phabricator-standard-page-view',
       'aphront-dialog-view-css',

resources/celerity/packages.php

@@ -93,6 +93,7 @@ return array(
     'phabricator-core-css',
     'phabricator-zindex-css',
     'phui-button-css',
+    'phui-button-simple-css',
     'phui-theme-css',
     'phabricator-standard-page-view',
     'aphront-dialog-view-css',

src/view/phui/PHUIButtonBarView.php

@@ -29,7 +29,7 @@ final class PHUIButtonBarView extends AphrontTagView {
   }
 
   protected function getTagContent() {
-    require_celerity_resource('phui-button-css');
+    require_celerity_resource('phui-button-bar-css');
 
     $i = 1;
     $j = count($this->buttons);

src/view/phui/PHUIButtonView.php

@@ -154,6 +154,7 @@ final class PHUIButtonView extends AphrontTagView {
   protected function getTagAttributes() {
 
     require_celerity_resource('phui-button-css');
+    require_celerity_resource('phui-button-simple-css');
 
     $classes = array();
     $classes[] = 'button';

webroot/rsrc/css/aphront/tokenizer.css

@@ -181,4 +181,5 @@ a.jx-tokenizer-token-invalid:hover {
 .button.tokenizer-browse-button .phui-icon-view {
   top: 7px;
   left: 9px;
+  position: absolute;
 }

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

@@ -0,0 +1,61 @@
+/**
+ * @provides phui-button-bar-css
+ * @requires phui-button-css
+ * @requires phui-button-simple-css
+ */
+
+.phui-button-bar-borderless .button {
+  border: 0;
+  background-color: transparent;
+  background-image: none;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.phui-button-bar-borderless .button .phui-icon-view {
+  font-size: 15px;
+  color: rgba({$alphagrey},.4);
+}
+
+.phui-button-bar-borderless .button:hover {
+  background-color: transparent;
+  background-image: none;
+  border-radius: 3px;
+}
+
+.phui-button-bar-borderless .button:hover .phui-icon-view {
+  color: rgba({$alphagrey},.9);
+}
+
+.phui-button-bar-borderless .button {
+  border: 0;
+}
+
+.phui-button-bar .phui-button-bar-first {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.phui-button-bar .phui-button-bar-middle {
+  border-radius: 0;
+  border-left: none;
+}
+
+.phui-button-bar .phui-button-bar-last {
+  border-left: none;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.phui-button-bar .button.simple:hover {
+  border-color: {$lightblueborder};
+  background-color: #fff;
+  background-image: none;
+  color: {$sky};
+}
+
+.phui-button-bar .button.simple:hover .phui-icon-view {
+  border-color: {$lightblueborder};
+  color: {$sky};
+  background-image: none;
+}

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

@@ -0,0 +1,105 @@
+/**
+ * @provides phui-button-simple-css
+ * @requires phui-button-css
+ */
+
+
+/* - Basic -------------------------------------------------------------------*/
+
+button.simple,
+input[type="submit"].simple,
+a.simple,
+a.simple:visited {
+  background: #fff;
+  color: {$bluetext};
+  border: 1px solid {$lightblueborder};
+}
+
+button.simple .phui-icon-view,
+input[type="submit"].simple .phui-icon-view,
+a.simple .phui-icon-view,
+a.simple:visited .phui-icon-view {
+  color: {$lightbluetext};
+}
+
+a.button.simple:hover,
+button.simple:hover {
+  border-color: {$blueborder};
+  background-image: none;
+  background-color: #fff;
+  transition: 0s;
+}
+
+a.simple.current {
+  background: {$lightblue};
+}
+
+
+/* - Red  --------------------------------------------------------------------*/
+
+button.simple.red,
+input[type="submit"].simple.red,
+a.simple.red,
+a.simple.red:visited {
+  background: #fff;
+  color: {$redtext};
+  border: 1px solid {$sh-redborder};
+}
+
+button.simple.red .phui-icon-view,
+input[type="submit"].simple.red .phui-icon-view,
+a.simple.red .phui-icon-view,
+a.simple.red:visited .phui-icon-view {
+  color: {$redtext};
+}
+
+a.button.simple.red:hover,
+button.simple.red:hover {
+  border-color: {$red};
+  background-image: none;
+  background-color: #fff;
+  transition: 0s;
+}
+
+/* - Green  ------------------------------------------------------------------*/
+
+button.simple.green,
+input[type="submit"].simple.green,
+a.simple.green,
+a.simple.green:visited {
+  background: #fff;
+  color: {$greentext};
+  border: 1px solid {$sh-greenborder};
+}
+
+button.simple.green .phui-icon-view,
+input[type="submit"].simple.green .phui-icon-view,
+a.simple.green .phui-icon-view,
+a.simple.green:visited .phui-icon-view {
+  color: {$greentext};
+}
+
+a.button.simple.green:hover,
+button.simple.green:hover {
+  border-color: {$green};
+  background-image: none;
+  background-color: #fff;
+  transition: 0s;
+}
+
+
+/* - Misc  -------------------------------------------------------------------*/
+
+a.button.simple .phui-icon-view {
+  border: none;
+}
+
+a.button.simple.phuix-dropdown-open {
+  background-color: #fff;
+  color: {$blue};
+  box-shadow: none;
+}
+
+a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
+  color: {$blue};
+}

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

@@ -86,42 +86,6 @@ a.grey:visited {
   color: {$darkgreytext};
 }
 
-button.simple,
-input[type="submit"].simple,
-a.simple,
-a.simple:visited {
-  background: #fff;
-  color: {$bluetext};
-  border: 1px solid {$lightblueborder};
-}
-
-a.simple.current {
-  background: {$lightblue};
-}
-
-button.simple .phui-icon-view,
-input[type="submit"].simple .phui-icon-view,
-a.simple .phui-icon-view,
-a.simple:visited .phui-icon-view {
-  color: {$lightbluetext};
-}
-
-button.simple.red,
-input[type="submit"].simple.red,
-a.simple.red,
-a.simple.red:visited {
-  background: #fff;
-  color: {$redtext};
-  border: 1px solid {$sh-redborder};
-}
-
-button.simple.red .phui-icon-view,
-input[type="submit"].simple.red .phui-icon-view,
-a.simple.red .phui-icon-view,
-a.simple.red:visited .phui-icon-view {
-  color: {$redtext};
-}
-
 a.disabled,
 button.disabled,
 button[disabled] {
@@ -159,36 +123,6 @@ button.green:hover {
   transition: 0.1s;
 }
 
-a.button.simple:hover,
-button.simple:hover {
-  border-color: {$blueborder};
-  background-image: none;
-  background-color: #fff;
-  transition: 0s;
-}
-
-a.button.simple.red:hover,
-button.simple.red:hover {
-  border-color: {$red};
-  background-image: none;
-  background-color: #fff;
-  transition: 0s;
-}
-
-a.button.simple .phui-icon-view {
-  border: none;
-}
-
-a.button.simple.phuix-dropdown-open {
-  background-color: #fff;
-  color: {$blue};
-  box-shadow: none;
-}
-
-a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
-  color: {$blue};
-}
-
 body a.button.disabled:hover,
 body button.disabled:hover,
 body a.button.disabled:active,
@@ -359,60 +293,3 @@ a.policy-control .phui-button-text {
   font-weight: normal;
 }
 
-/* PHUI Button Bar */
-
-.phui-button-bar-borderless .button {
-  border: 0;
-  background-color: transparent;
-  background-image: none;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.phui-button-bar-borderless .button .phui-icon-view {
-  font-size: 15px;
-  color: rgba({$alphagrey},.4);
-}
-
-.phui-button-bar-borderless .button:hover {
-  background-color: transparent;
-  background-image: none;
-  border-radius: 3px;
-}
-
-.phui-button-bar-borderless .button:hover .phui-icon-view {
-  color: rgba({$alphagrey},.9);
-}
-
-.phui-button-bar-borderless .button {
-  border: 0;
-}
-
-.phui-button-bar .phui-button-bar-first {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
-.phui-button-bar .phui-button-bar-middle {
-  border-radius: 0;
-  border-left: none;
-}
-
-.phui-button-bar .phui-button-bar-last {
-  border-left: none;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-.phui-button-bar .button.simple:hover {
-  border-color: {$lightblueborder};
-  background-color: #fff;
-  background-image: none;
-  color: {$sky};
-}
-
-.phui-button-bar .button.simple:hover .phui-icon-view {
-  border-color: {$lightblueborder};
-  color: {$sky};
-  background-image: none;
-}