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

Author: chadlittle

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

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

scripts/celerity/generate_sprites.php

@@ -16,15 +16,14 @@ public function renderExample() {
 
     // 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/applications/uiexample/examples/PHUIButtonBarExample.php

@@ -268,38 +268,6 @@ public function buildTokenSheet() {
     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/infrastructure/celerity/CeleritySpriteGenerator.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/PHUIIconView.php

@@ -206,8 +206,7 @@ private function renderCalendarHeader(DateTime $date) {
       $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 @@ private function renderCalendarHeader(DateTime $date) {
         ->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)

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -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-button.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;
 }