mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 08:42:41 +01:00
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
This commit is contained in:
parent
eec593e313
commit
724be3930f
8 changed files with 134 additions and 8 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
47
src/applications/uiexample/examples/PHUIButtonBarExample.php
Normal file
47
src/applications/uiexample/examples/PHUIButtonBarExample.php
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
42
src/view/phui/PHUIButtonBarView.php
Normal file
42
src/view/phui/PHUIButtonBarView.php
Normal file
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
@ -88,7 +94,8 @@ final class PHUIButtonView extends AphrontTagView {
|
|||
}
|
||||
|
||||
return array('class' => $classes,
|
||||
'href' => $this->href);
|
||||
'href' => $this->href,
|
||||
'title' => $this->title);
|
||||
}
|
||||
|
||||
protected function getTagContent() {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue