From 724be3930f3f2d1e88d943f3accb2abe11f6eb6e Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 10 Feb 2014 11:11:36 -0800 Subject: [PATCH] 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 | 10 ++-- src/__phutil_library_map__.php | 4 ++ .../examples/PHUIButtonBarExample.php | 47 +++++++++++++++++++ src/view/phui/PHUIButtonBarView.php | 42 +++++++++++++++++ src/view/phui/PHUIButtonView.php | 11 ++++- src/view/phui/PHUIIconView.php | 1 + webroot/rsrc/css/phui/phui-button.css | 24 ++++++++++ webroot/rsrc/css/phui/phui-icon.css | 3 +- 8 files changed, 134 insertions(+), 8 deletions(-) create mode 100644 src/applications/uiexample/examples/PHUIButtonBarExample.php create mode 100644 src/view/phui/PHUIButtonBarView.php diff --git a/resources/celerity/map.php b/resources/celerity/map.php index b50513ba5e..72f2a7b072 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 5895d53628..ed30866310 100644 --- a/src/__phutil_library_map__.php +++ b/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', diff --git a/src/applications/uiexample/examples/PHUIButtonBarExample.php b/src/applications/uiexample/examples/PHUIButtonBarExample.php new file mode 100644 index 0000000000..186597dadc --- /dev/null +++ b/src/applications/uiexample/examples/PHUIButtonBarExample.php @@ -0,0 +1,47 @@ +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); + } +} diff --git a/src/view/phui/PHUIButtonBarView.php b/src/view/phui/PHUIButtonBarView.php new file mode 100644 index 0000000000..5e644a29b3 --- /dev/null +++ b/src/view/phui/PHUIButtonBarView.php @@ -0,0 +1,42 @@ +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(); + } +} diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php index e3c8e8ec06..e2271cabd3 100644 --- a/src/view/phui/PHUIButtonView.php +++ b/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() { diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php index e996aaef27..12a1579e3e 100644 --- a/src/view/phui/PHUIIconView.php +++ b/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'; diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css index 5bc2b8e3ab..2a17d8d098 100644 --- a/webroot/rsrc/css/phui/phui-button.css +++ b/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; +} diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index 8a7b18b59d..ccc6715696 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/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; }