Convert ButtonBar to FontAwesome

Summary: Removes the sprites and images, uses fontawesome in examples and calendar

Test Plan:
UIExamples, Calendar

{F163375}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '2920014c',
+    'core.pkg.css' => 'f16eaa39',
     'core.pkg.js' => '639b2433',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4a93db37',
@@ -124,14 +124,14 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
     'rsrc/css/phui/calendar/phui-calendar.css' => '5e1ad989',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
-    'rsrc/css/phui/phui-button.css' => '45139eb8',
+    'rsrc/css/phui/phui-button.css' => '1c771ff8',
     'rsrc/css/phui/phui-document.css' => '3b078dc0',
     'rsrc/css/phui/phui-feed-story.css' => 'e2c9bc83',
     'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
     'rsrc/css/phui/phui-form-view.css' => 'ed856191',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => 'a2071a67',
-    'rsrc/css/phui/phui-icon.css' => 'cdcf2aca',
+    'rsrc/css/phui/phui-icon.css' => 'd8526aa1',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@@ -148,7 +148,6 @@ return array(
     'rsrc/css/phui/phui-workpanel-view.css' => 'fddd97bf',
     'rsrc/css/sprite-apps-large.css' => '12ea1ced',
     'rsrc/css/sprite-apps.css' => '37ee4f4e',
-    'rsrc/css/sprite-buttonbar.css' => 'ba1c5738',
     'rsrc/css/sprite-conpherence.css' => '3b4a0487',
     'rsrc/css/sprite-docs.css' => '5f65d0da',
     'rsrc/css/sprite-gradient.css' => '4aec2401',
@@ -310,8 +309,6 @@ return array(
     'rsrc/image/sprite-apps-large.png' => '141d8c93',
     'rsrc/image/sprite-apps-xlarge.png' => 'a751a580',
     'rsrc/image/sprite-apps.png' => 'f6a0599f',
-    'rsrc/image/sprite-buttonbar-X2.png' => '2c09a184',
-    'rsrc/image/sprite-buttonbar.png' => 'e98e96af',
     'rsrc/image/sprite-conpherence-X2.png' => 'cd2d08d7',
     'rsrc/image/sprite-conpherence.png' => 'a5ab2eb7',
     'rsrc/image/sprite-docs-X2.png' => '6dc1adad',
@@ -752,7 +749,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
     'phui-box-css' => '7b3a2eed',
-    'phui-button-css' => '45139eb8',
+    'phui-button-css' => '1c771ff8',
     'phui-calendar-css' => '5e1ad989',
     'phui-calendar-day-css' => 'de035c8a',
     'phui-calendar-list-css' => 'c1d0ca59',
@@ -764,7 +761,7 @@ return array(
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => 'ed856191',
     'phui-header-view-css' => 'a2071a67',
-    'phui-icon-view-css' => 'cdcf2aca',
+    'phui-icon-view-css' => 'd8526aa1',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'ce92d8ec',
@@ -800,7 +797,6 @@ return array(
     'setup-issue-css' => '69e640e7',
     'sprite-apps-css' => '37ee4f4e',
     'sprite-apps-large-css' => '12ea1ced',
-    'sprite-buttonbar-css' => 'ba1c5738',
     'sprite-conpherence-css' => '3b4a0487',
     'sprite-docs-css' => '5f65d0da',
     'sprite-gradient-css' => '4aec2401',

resources/sprite/manifest/buttonbar.json

@@ -1,51 +0,0 @@
-{
-  "version" : 1,
-  "sprites" : {
-    "buttonbar-calendar"      : {
-      "name" : "buttonbar-calendar",
-      "rule" : ".buttonbar-calendar",
-      "hash" : "51aed380faf290dab35d736a92d15aba"
-    },
-    "buttonbar-chevron-left"  : {
-      "name" : "buttonbar-chevron-left",
-      "rule" : ".buttonbar-chevron-left",
-      "hash" : "24e52c724c85eb313e19ecd222be73b5"
-    },
-    "buttonbar-chevron-right" : {
-      "name" : "buttonbar-chevron-right",
-      "rule" : ".buttonbar-chevron-right",
-      "hash" : "9bbe40f752ee650646021b348b2971a9"
-    },
-    "buttonbar-cog"           : {
-      "name" : "buttonbar-cog",
-      "rule" : ".buttonbar-cog",
-      "hash" : "1c816c27b8d7b6bffe5e32ba716e5930"
-    },
-    "buttonbar-home"          : {
-      "name" : "buttonbar-home",
-      "rule" : ".buttonbar-home",
-      "hash" : "3ab3bfd5bf3c1ba0a422c200a70578d5"
-    },
-    "buttonbar-pencil"        : {
-      "name" : "buttonbar-pencil",
-      "rule" : ".buttonbar-pencil",
-      "hash" : "17d42be118aa21bc154b3f7da3faf7cb"
-    },
-    "buttonbar-time"          : {
-      "name" : "buttonbar-time",
-      "rule" : ".buttonbar-time",
-      "hash" : "1355aa26ecd63e76a59352aba95e54ad"
-    },
-    "buttonbar-workboard"     : {
-      "name" : "buttonbar-workboard",
-      "rule" : ".buttonbar-workboard",
-      "hash" : "fab3db9da0a6b14d8517c6c9868b30f7"
-    }
-  },
-  "scales"  : [
-    1,
-    2
-  ],
-  "header"  : "\/**\n * @provides sprite-buttonbar-css\n * @generated\n *\/\n\n.sprite-buttonbar {\n  background-image: url(\/rsrc\/image\/sprite-buttonbar.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-buttonbar {\n    background-image: url(\/rsrc\/image\/sprite-buttonbar-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
-  "type"    : "standard"
-}

scripts/celerity/generate_sprites.php

@@ -35,7 +35,6 @@ $sheets = array(
   'apps-large' => $generator->buildAppsLargeSheet(),
   'payments' => $generator->buildPaymentsSheet(),
   'tokens' => $generator->buildTokenSheet(),
-  'buttonbar' => $generator->buildButtonBarSheet(),
   'docs' => $generator->buildDocsSheet(),
   'gradient' => $generator->buildGradientSheet(),
   'main-header' => $generator->buildMainHeaderSheet(),

src/applications/uiexample/examples/PHUIButtonBarExample.php

@@ -16,15 +16,14 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
 
     // Icon Buttons
     $icons = array(
-      'Go Back' => 'chevron-left',
-      'Choose Date' => 'calendar',
-      'Edit View' => 'pencil',
-      'Go Forward' => 'chevron-right');
+      'Go Back' => 'fa-chevron-left bluegrey',
+      'Choose Date' => 'fa-calendar bluegrey',
+      'Edit View' => 'fa-pencil bluegrey',
+      'Go Forward' => 'fa-chevron-right bluegrey');
     $button_bar = new PHUIButtonBarView();
     foreach ($icons as $text => $icon) {
       $image = id(new PHUIIconView())
-          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
-          ->setSpriteIcon($icon);
+          ->setIconFont($icon);
       $button = id(new PHUIButtonView())
         ->setTag('a')
         ->setColor(PHUIButtonView::GREY)

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -268,38 +268,6 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
-  public function buildButtonBarSheet() {
-    $icons = $this->getDirectoryList('button_bar_1x');
-    $scales = array(
-      '1x' => 1,
-      '2x' => 2,
-    );
-    $template = id(new PhutilSprite())
-      ->setSourceSize(14, 14);
-
-    $sprites = array();
-    $prefix = 'button_bar_';
-    foreach ($icons as $icon) {
-      $sprite = id(clone $template)
-        ->setName('buttonbar-'.$icon)
-        ->setTargetCSS('.buttonbar-'.$icon);
-
-      foreach ($scales as $scale_key => $scale) {
-        $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
-        $sprite->setSourceFile($path, $scale);
-      }
-      $sprites[] = $sprite;
-    }
-
-    $sheet = $this->buildSheet('buttonbar', true);
-    $sheet->setScales($scales);
-    foreach ($sprites as $sprite) {
-      $sheet->addSprite($sprite);
-    }
-
-    return $sheet;
-  }
-
   public function buildProjectsSheet() {
     $icons = $this->getDirectoryList('projects_1x');
     $scales = array(

src/view/phui/PHUIIconView.php

@@ -8,7 +8,6 @@ final class PHUIIconView extends AphrontTagView {
   const SPRITE_PAYMENTS = 'payments';
   const SPRITE_LOGIN = 'login';
   const SPRITE_PROJECTS = 'projects';
-  const SPRITE_BUTTONBAR = 'buttonbar';
 
   const HEAD_SMALL = 'phuihead-small';
   const HEAD_MEDIUM = 'phuihead-medium';

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -206,8 +206,7 @@ final class PHUICalendarMonthView extends AphrontView {
       $button_bar = new PHUIButtonBarView();
 
       $left_icon = id(new PHUIIconView())
-          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
-          ->setSpriteIcon('chevron-left');
+          ->setIconFont('fa-chevron-left bluegrey');
       $left = id(new PHUIButtonView())
         ->setTag('a')
         ->setColor(PHUIButtonView::GREY)
@@ -216,8 +215,7 @@ final class PHUICalendarMonthView extends AphrontView {
         ->setIcon($left_icon);
 
       $right_icon = id(new PHUIIconView())
-          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
-          ->setSpriteIcon('chevron-right');
+          ->setIconFont('fa-chevron-right bluegrey');
       $right = id(new PHUIButtonView())
         ->setTag('a')
         ->setColor(PHUIButtonView::GREY)

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

@@ -291,6 +291,10 @@ a.toggle-fixed {
   left: 8px;
 }
 
+.phui-button-bar .button .phui-icon-view {
+  left: 11px;
+}
+
 .button.has-icon .phui-button-text {
   margin-left: 16px;
 }

webroot/rsrc/css/phui/phui-icon.css

@@ -12,8 +12,7 @@
   width: 16px;
 }
 
-.phui-icon-view.sprite-apps,
-.phui-icon-view.sprite-buttonbar {
+.phui-icon-view.sprite-apps {
   height: 14px;
   width: 14px;
 }

webroot/rsrc/css/sprite-buttonbar.css

@@ -1,51 +0,0 @@
-/**
- * @provides sprite-buttonbar-css
- * @generated
- */
-
-.sprite-buttonbar {
-  background-image: url(/rsrc/image/sprite-buttonbar.png);
-  background-repeat: no-repeat;
-}
-
-@media
-only screen and (min-device-pixel-ratio: 1.5),
-only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-  .sprite-buttonbar {
-    background-image: url(/rsrc/image/sprite-buttonbar-X2.png);
-    background-size: 45px 45px;
-  }
-}
-
-
-.buttonbar-calendar {
-  background-position: 0px 0px;
-}
-
-.buttonbar-chevron-left {
-  background-position: -15px 0px;
-}
-
-.buttonbar-chevron-right {
-  background-position: -30px 0px;
-}
-
-.buttonbar-cog {
-  background-position: 0px -15px;
-}
-
-.buttonbar-home {
-  background-position: -15px -15px;
-}
-
-.buttonbar-pencil {
-  background-position: -30px -15px;
-}
-
-.buttonbar-time {
-  background-position: 0px -30px;
-}
-
-.buttonbar-workboard {
-  background-position: -15px -30px;
-}