PHUIButtonBarView

Summary: Adds a handy bar full of tiny buttons. Use only when directed. Ref: T4394

Test Plan: View UI Examples.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '882662b1',
+    'core.pkg.css' => '71e0a12a',
     'core.pkg.js' => 'c7854cc5',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '5a65a762',
@@ -127,13 +127,13 @@ return array(
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
     'rsrc/css/layout/phabricator-timeline-view.css' => 'f4f846c4',
     'rsrc/css/phui/phui-box.css' => '21da4d8c',
-    'rsrc/css/phui/phui-button.css' => '8106a67a',
+    'rsrc/css/phui/phui-button.css' => '8784a966',
     'rsrc/css/phui/phui-document.css' => '143b2ac8',
     'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf',
     'rsrc/css/phui/phui-form-view.css' => '0efd3326',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '472a6003',
-    'rsrc/css/phui/phui-icon.css' => '29e83226',
+    'rsrc/css/phui/phui-icon.css' => 'fcb145a7',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '2edb76cf',
     'rsrc/css/phui/phui-object-box.css' => '4f916b80',
@@ -738,13 +738,13 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => 'b0309d8e',
     'phui-box-css' => '21da4d8c',
-    'phui-button-css' => '8106a67a',
+    'phui-button-css' => '8784a966',
     'phui-document-view-css' => '143b2ac8',
     'phui-feed-story-css' => '3a59c2cf',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => '0efd3326',
     'phui-header-view-css' => '472a6003',
-    'phui-icon-view-css' => '29e83226',
+    'phui-icon-view-css' => 'fcb145a7',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '2edb76cf',
     'phui-object-box-css' => '4f916b80',

src/__phutil_library_map__.php

@@ -979,6 +979,8 @@ phutil_register_library_map(array(
     'PHUI' => 'view/phui/PHUI.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
+    'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
+    'PHUIButtonBarView' => 'view/phui/PHUIButtonBarView.php',
     'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php',
     'PHUIButtonView' => 'view/phui/PHUIButtonView.php',
     'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php',
@@ -3599,6 +3601,8 @@ phutil_register_library_map(array(
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
+    'PHUIButtonBarExample' => 'PhabricatorUIExample',
+    'PHUIButtonBarView' => 'AphrontTagView',
     'PHUIButtonExample' => 'PhabricatorUIExample',
     'PHUIButtonView' => 'AphrontTagView',
     'PHUIColorPalletteExample' => 'PhabricatorUIExample',

src/applications/uiexample/examples/PHUIButtonBarExample.php

@@ -0,0 +1,47 @@
+<?php
+
+final class PHUIButtonBarExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return pht('Button Bar');
+  }
+
+  public function getDescription() {
+    return pht('A minimal UI for Buttons');
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    // Icon Buttons
+    $icons = array(
+      'Go Back' => 'chevron-left',
+      'Choose Date' => 'calendar',
+      'Edit View' => 'pencil',
+      'Go Forward' => 'chevron-right');
+    $button_bar = new PHUIButtonBarView();
+    foreach ($icons as $text => $icon) {
+      $image = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_BUTTONBAR)
+          ->setSpriteIcon($icon);
+      $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::GREY)
+        ->setTitle($text)
+        ->setIcon($image);
+
+      $button_bar->addButton($button);
+    }
+
+    $layout = id(new PHUIBoxView())
+      ->appendChild($button_bar)
+      ->addPadding(PHUI::PADDING_LARGE);
+
+    $wrap1 = id(new PHUIObjectBoxView())
+      ->setHeaderText('Button Bar Example')
+      ->appendChild($layout);
+
+    return array($wrap1);
+  }
+}

src/view/phui/PHUIButtonBarView.php

@@ -0,0 +1,42 @@
+<?php
+
+final class PHUIButtonBarView extends AphrontTagView {
+
+  private $buttons = array();
+
+  public function addButton($button) {
+    $this->buttons[] = $button;
+    return $this;
+  }
+
+  protected function getTagAttributes() {
+    return array('class' => 'phui-button-bar');
+  }
+
+  public function getTagName() {
+    return 'div';
+  }
+
+  public function getTagContent() {
+    require_celerity_resource('phui-button-css');
+
+    $i = 1;
+    $j = count($this->buttons);
+    foreach ($this->buttons as $button) {
+      // LeeLoo Dallas Multi-Pass
+      if ($j > 1) {
+        if ($i == 1) {
+          $button->addClass('phui-button-bar-first');
+        } elseif ($i == $j) {
+          $button->addClass('phui-button-bar-last');
+        } elseif ($j > 1) {
+          $button->addClass('phui-button-bar-middle');
+        }
+      }
+      $this->appendChild($button);
+      $i++;
+    }
+
+    return $this->renderChildren();
+  }
+}

src/view/phui/PHUIButtonView.php

@@ -19,6 +19,7 @@ final class PHUIButtonView extends AphrontTagView {
   private $dropdown;
   private $icon;
   private $href = null;
+  private $title = null;
 
   public function setText($text) {
     $this->text = $text;
@@ -30,6 +31,11 @@ final class PHUIButtonView extends AphrontTagView {
     return $this;
   }
 
+  public function setTitle($title) {
+    $this->title = $title;
+    return $this;
+  }
+
   public function setSubtext($subtext) {
     $this->subtext = $subtext;
     return $this;
@@ -87,8 +93,9 @@ final class PHUIButtonView extends AphrontTagView {
       $classes[] = 'has-icon';
     }
 
-    return array('class' => $classes,
-                  'href' => $this->href);
+    return array('class'  => $classes,
+                 'href'   => $this->href,
+                 'title'  => $this->title);
   }
 
   protected function getTagContent() {

src/view/phui/PHUIIconView.php

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

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

@@ -338,3 +338,27 @@ a.toggle-fixed {
   line-height: 15px;
   font-weight: normal;
 }
+
+/* PHUI Button Bar */
+
+.phui-button-bar a.button {
+  display: inline-block;
+  height: 16px;
+  width: 12px;
+}
+
+.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;
+}

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

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