revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 14:52:41 +01:00
Code Issues Releases Wiki Activity

PHUIButtonView class

Browse source 
Summary: Rough pass at a PHUIButtonView Class. Keeps phutil_tag intact and adds some image features if you use the class.

Test Plan: UIExamples

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6192
This commit is contained in:
Chad Little 2013-06-12 18:23:35 -07:00
parent a66e6c2126
commit 02b59e685f
10 changed files with 410 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scripts/celerity_mapper.php
View file

@ -67,7 +67,7 @@ $package_spec = array(
'core.pkg.css' => array( 'core.pkg.css' => array(
'phabricator-core-css', 'phabricator-core-css',
'phabricator-zindex-css', 'phabricator-zindex-css',
'phabricator-core-buttons-css', 'phui-button-css',
'phabricator-standard-page-view', 'phabricator-standard-page-view',
'aphront-dialog-view-css', 'aphront-dialog-view-css',
'aphront-form-view-css', 'aphront-form-view-css',
@ -104,7 +104,7 @@ $package_spec = array(
'phabricator-crumbs-view-css', 'phabricator-crumbs-view-css',
'phabricator-object-item-list-view-css', 'phabricator-object-item-list-view-css',
'global-drag-and-drop-css', 'global-drag-and-drop-css',
'spacing-css', 'phui-spacing-css',
'phui-form-css', 'phui-form-css',
'phui-icon-view-css', 'phui-icon-view-css',

130
src/__celerity_resource_map__.php
View file

@ -2965,15 +2965,6 @@ celerity_register_resource_map(array(
), ),
'disk' => '/rsrc/css/application/contentsource/content-source-view.css', 'disk' => '/rsrc/css/application/contentsource/content-source-view.css',
), ),
'phabricator-core-buttons-css' =>
array(
'uri' => '/res/073fc5eb/rsrc/css/core/buttons.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/core/buttons.css',
),
'phabricator-core-css' => 'phabricator-core-css' =>
array( array(
'uri' => '/res/dc204369/rsrc/css/core/core.css', 'uri' => '/res/dc204369/rsrc/css/core/core.css',
@ -3694,6 +3685,15 @@ celerity_register_resource_map(array(
), ),
'disk' => '/rsrc/css/phui/phui-box.css', 'disk' => '/rsrc/css/phui/phui-box.css',
), ),
'phui-button-css' =>
array(
'uri' => '/res/8fc82931/rsrc/css/phui/phui-button.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/phui/phui-button.css',
),
'phui-document-view-css' => 'phui-document-view-css' =>
array( array(
'uri' => '/res/fe374dee/rsrc/css/phui/phui-document.css', 'uri' => '/res/fe374dee/rsrc/css/phui/phui-document.css',
@ -3723,7 +3723,7 @@ celerity_register_resource_map(array(
), ),
'phui-icon-view-css' => 'phui-icon-view-css' =>
array( array(
'uri' => '/res/7fd37b96/rsrc/css/phui/phui-icon.css', 'uri' => '/res/f78f4c64/rsrc/css/phui/phui-icon.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3739,6 +3739,15 @@ celerity_register_resource_map(array(
), ),
'disk' => '/rsrc/css/phui/phui-list.css', 'disk' => '/rsrc/css/phui/phui-list.css',
), ),
'phui-spacing-css' =>
array(
'uri' => '/res/28891fd3/rsrc/css/phui/phui-spacing.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/phui/phui-spacing.css',
),
'phui-text-css' => 'phui-text-css' =>
array( array(
'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css', 'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css',
@ -3901,15 +3910,6 @@ celerity_register_resource_map(array(
), ),
'disk' => '/rsrc/css/application/config/setup-issue.css', 'disk' => '/rsrc/css/application/config/setup-issue.css',
), ),
'spacing-css' =>
array(
'uri' => '/res/61563661/rsrc/css/core/spacing.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/core/spacing.css',
),
'sprite-actions-css' => 'sprite-actions-css' =>
array( array(
'uri' => '/res/bd43efa8/rsrc/css/sprite-actions.css', 'uri' => '/res/bd43efa8/rsrc/css/sprite-actions.css',
@ -4048,14 +4048,14 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'76d08512' => '0a101340' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
array( array(
0 => 'phabricator-core-css', 0 => 'phabricator-core-css',
1 => 'phabricator-zindex-css', 1 => 'phabricator-zindex-css',
2 => 'phabricator-core-buttons-css', 2 => 'phui-button-css',
3 => 'phabricator-standard-page-view', 3 => 'phabricator-standard-page-view',
4 => 'aphront-dialog-view-css', 4 => 'aphront-dialog-view-css',
5 => 'aphront-form-view-css', 5 => 'aphront-form-view-css',
@ -4088,7 +4088,7 @@ celerity_register_resource_map(array(
32 => 'phabricator-crumbs-view-css', 32 => 'phabricator-crumbs-view-css',
33 => 'phabricator-object-item-list-view-css', 33 => 'phabricator-object-item-list-view-css',
34 => 'global-drag-and-drop-css', 34 => 'global-drag-and-drop-css',
35 => 'spacing-css', 35 => 'phui-spacing-css',
36 => 'phui-form-css', 36 => 'phui-form-css',
37 => 'phui-icon-view-css', 37 => 'phui-icon-view-css',
38 => 'phabricator-application-launch-view-css', 38 => 'phabricator-application-launch-view-css',
@ -4096,7 +4096,7 @@ celerity_register_resource_map(array(
40 => 'phabricator-property-list-view-css', 40 => 'phabricator-property-list-view-css',
41 => 'phabricator-tag-view-css', 41 => 'phabricator-tag-view-css',
), ),
'uri' => '/res/pkg/76d08512/core.pkg.css', 'uri' => '/res/pkg/0a101340/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'f2ad0683' => 'f2ad0683' =>
@ -4290,16 +4290,16 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => 'a7ca34a9', 'aphront-attached-file-view-css' => 'a7ca34a9',
'aphront-dialog-view-css' => '76d08512', 'aphront-dialog-view-css' => '0a101340',
'aphront-error-view-css' => '76d08512', 'aphront-error-view-css' => '0a101340',
'aphront-form-view-css' => '76d08512', 'aphront-form-view-css' => '0a101340',
'aphront-list-filter-view-css' => '76d08512', 'aphront-list-filter-view-css' => '0a101340',
'aphront-pager-view-css' => '76d08512', 'aphront-pager-view-css' => '0a101340',
'aphront-panel-view-css' => '76d08512', 'aphront-panel-view-css' => '0a101340',
'aphront-table-view-css' => '76d08512', 'aphront-table-view-css' => '0a101340',
'aphront-tokenizer-control-css' => '76d08512', 'aphront-tokenizer-control-css' => '0a101340',
'aphront-tooltip-css' => '76d08512', 'aphront-tooltip-css' => '0a101340',
'aphront-typeahead-control-css' => '76d08512', 'aphront-typeahead-control-css' => '0a101340',
'differential-changeset-view-css' => 'dd27a69b', 'differential-changeset-view-css' => 'dd27a69b',
'differential-core-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b',
'differential-inline-comment-editor' => '9488bb69', 'differential-inline-comment-editor' => '9488bb69',
@ -4313,7 +4313,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => 'dd27a69b', 'differential-table-of-contents-css' => 'dd27a69b',
'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => '76d08512', 'global-drag-and-drop-css' => '0a101340',
'inline-comment-summary-css' => 'dd27a69b', 'inline-comment-summary-css' => 'dd27a69b',
'javelin-aphlict' => 'f2ad0683', 'javelin-aphlict' => 'f2ad0683',
'javelin-behavior' => 'a9f14d76', 'javelin-behavior' => 'a9f14d76',
@ -4387,55 +4387,55 @@ celerity_register_resource_map(array(
'javelin-util' => 'a9f14d76', 'javelin-util' => 'a9f14d76',
'javelin-vector' => 'a9f14d76', 'javelin-vector' => 'a9f14d76',
'javelin-workflow' => 'a9f14d76', 'javelin-workflow' => 'a9f14d76',
'lightbox-attachment-css' => '76d08512', 'lightbox-attachment-css' => '0a101340',
'maniphest-task-summary-css' => 'a7ca34a9', 'maniphest-task-summary-css' => 'a7ca34a9',
'maniphest-transaction-detail-css' => 'a7ca34a9', 'maniphest-transaction-detail-css' => 'a7ca34a9',
'phabricator-action-list-view-css' => '76d08512', 'phabricator-action-list-view-css' => '0a101340',
'phabricator-application-launch-view-css' => '76d08512', 'phabricator-application-launch-view-css' => '0a101340',
'phabricator-busy' => 'f2ad0683', 'phabricator-busy' => 'f2ad0683',
'phabricator-content-source-view-css' => 'dd27a69b', 'phabricator-content-source-view-css' => 'dd27a69b',
'phabricator-core-buttons-css' => '76d08512', 'phabricator-core-css' => '0a101340',
'phabricator-core-css' => '76d08512', 'phabricator-crumbs-view-css' => '0a101340',
'phabricator-crumbs-view-css' => '76d08512',
'phabricator-drag-and-drop-file-upload' => '9488bb69', 'phabricator-drag-and-drop-file-upload' => '9488bb69',
'phabricator-dropdown-menu' => 'f2ad0683', 'phabricator-dropdown-menu' => 'f2ad0683',
'phabricator-file-upload' => 'f2ad0683', 'phabricator-file-upload' => 'f2ad0683',
'phabricator-filetree-view-css' => '76d08512', 'phabricator-filetree-view-css' => '0a101340',
'phabricator-flag-css' => '76d08512', 'phabricator-flag-css' => '0a101340',
'phabricator-form-view-css' => '76d08512', 'phabricator-form-view-css' => '0a101340',
'phabricator-header-view-css' => '76d08512', 'phabricator-header-view-css' => '0a101340',
'phabricator-hovercard' => 'f2ad0683', 'phabricator-hovercard' => 'f2ad0683',
'phabricator-jump-nav' => '76d08512', 'phabricator-jump-nav' => '0a101340',
'phabricator-keyboard-shortcut' => 'f2ad0683', 'phabricator-keyboard-shortcut' => 'f2ad0683',
'phabricator-keyboard-shortcut-manager' => 'f2ad0683', 'phabricator-keyboard-shortcut-manager' => 'f2ad0683',
'phabricator-main-menu-view' => '76d08512', 'phabricator-main-menu-view' => '0a101340',
'phabricator-menu-item' => 'f2ad0683', 'phabricator-menu-item' => 'f2ad0683',
'phabricator-nav-view-css' => '76d08512', 'phabricator-nav-view-css' => '0a101340',
'phabricator-notification' => 'f2ad0683', 'phabricator-notification' => 'f2ad0683',
'phabricator-notification-css' => '76d08512', 'phabricator-notification-css' => '0a101340',
'phabricator-notification-menu-css' => '76d08512', 'phabricator-notification-menu-css' => '0a101340',
'phabricator-object-item-list-view-css' => '76d08512', 'phabricator-object-item-list-view-css' => '0a101340',
'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-object-selector-css' => 'dd27a69b',
'phabricator-phtize' => 'f2ad0683', 'phabricator-phtize' => 'f2ad0683',
'phabricator-prefab' => 'f2ad0683', 'phabricator-prefab' => 'f2ad0683',
'phabricator-project-tag-css' => 'a7ca34a9', 'phabricator-project-tag-css' => 'a7ca34a9',
'phabricator-property-list-view-css' => '76d08512', 'phabricator-property-list-view-css' => '0a101340',
'phabricator-remarkup-css' => '76d08512', 'phabricator-remarkup-css' => '0a101340',
'phabricator-shaped-request' => '9488bb69', 'phabricator-shaped-request' => '9488bb69',
'phabricator-side-menu-view-css' => '76d08512', 'phabricator-side-menu-view-css' => '0a101340',
'phabricator-standard-page-view' => '76d08512', 'phabricator-standard-page-view' => '0a101340',
'phabricator-tag-view-css' => '76d08512', 'phabricator-tag-view-css' => '0a101340',
'phabricator-textareautils' => 'f2ad0683', 'phabricator-textareautils' => 'f2ad0683',
'phabricator-tooltip' => 'f2ad0683', 'phabricator-tooltip' => 'f2ad0683',
'phabricator-transaction-view-css' => '76d08512', 'phabricator-transaction-view-css' => '0a101340',
'phabricator-zindex-css' => '76d08512', 'phabricator-zindex-css' => '0a101340',
'phui-form-css' => '76d08512', 'phui-button-css' => '0a101340',
'phui-icon-view-css' => '76d08512', 'phui-form-css' => '0a101340',
'spacing-css' => '76d08512', 'phui-icon-view-css' => '0a101340',
'sprite-apps-large-css' => '76d08512', 'phui-spacing-css' => '0a101340',
'sprite-gradient-css' => '76d08512', 'sprite-apps-large-css' => '0a101340',
'sprite-icons-css' => '76d08512', 'sprite-gradient-css' => '0a101340',
'sprite-menu-css' => '76d08512', 'sprite-icons-css' => '0a101340',
'syntax-highlighting-css' => '76d08512', 'sprite-menu-css' => '0a101340',
'syntax-highlighting-css' => '0a101340',
), ),
)); ));

6
src/__phutil_library_map__.php
View file

@ -686,6 +686,8 @@ phutil_register_library_map(array(
'PHUI' => 'view/phui/PHUI.php', 'PHUI' => 'view/phui/PHUI.php',
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
'PHUIBoxView' => 'view/phui/PHUIBoxView.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php',
'PHUIButtonView' => 'view/phui/PHUIButtonView.php',
'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
@ -835,7 +837,6 @@ phutil_register_library_map(array(
'PhabricatorBotUser' => 'infrastructure/daemon/bot/target/PhabricatorBotUser.php', 'PhabricatorBotUser' => 'infrastructure/daemon/bot/target/PhabricatorBotUser.php',
'PhabricatorBotWhatsNewHandler' => 'infrastructure/daemon/bot/handler/PhabricatorBotWhatsNewHandler.php', 'PhabricatorBotWhatsNewHandler' => 'infrastructure/daemon/bot/handler/PhabricatorBotWhatsNewHandler.php',
'PhabricatorBuiltinPatchList' => 'infrastructure/storage/patch/PhabricatorBuiltinPatchList.php', 'PhabricatorBuiltinPatchList' => 'infrastructure/storage/patch/PhabricatorBuiltinPatchList.php',
'PhabricatorButtonsExample' => 'applications/uiexample/examples/PhabricatorButtonsExample.php',
'PhabricatorCacheDAO' => 'applications/cache/storage/PhabricatorCacheDAO.php', 'PhabricatorCacheDAO' => 'applications/cache/storage/PhabricatorCacheDAO.php',
'PhabricatorCacheManagementPurgeWorkflow' => 'applications/cache/management/PhabricatorCacheManagementPurgeWorkflow.php', 'PhabricatorCacheManagementPurgeWorkflow' => 'applications/cache/management/PhabricatorCacheManagementPurgeWorkflow.php',
'PhabricatorCacheManagementWorkflow' => 'applications/cache/management/PhabricatorCacheManagementWorkflow.php', 'PhabricatorCacheManagementWorkflow' => 'applications/cache/management/PhabricatorCacheManagementWorkflow.php',
@ -2531,6 +2532,8 @@ phutil_register_library_map(array(
'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler', 'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxExample' => 'PhabricatorUIExample',
'PHUIBoxView' => 'AphrontTagView', 'PHUIBoxView' => 'AphrontTagView',
'PHUIButtonExample' => 'PhabricatorUIExample',
'PHUIButtonView' => 'AphrontTagView',
'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentExample' => 'PhabricatorUIExample',
'PHUIDocumentView' => 'AphrontTagView', 'PHUIDocumentView' => 'AphrontTagView',
'PHUIFeedStoryExample' => 'PhabricatorUIExample', 'PHUIFeedStoryExample' => 'PhabricatorUIExample',
@ -2683,7 +2686,6 @@ phutil_register_library_map(array(
'PhabricatorBotUser' => 'PhabricatorBotTarget', 'PhabricatorBotUser' => 'PhabricatorBotTarget',
'PhabricatorBotWhatsNewHandler' => 'PhabricatorBotHandler', 'PhabricatorBotWhatsNewHandler' => 'PhabricatorBotHandler',
'PhabricatorBuiltinPatchList' => 'PhabricatorSQLPatchList', 'PhabricatorBuiltinPatchList' => 'PhabricatorSQLPatchList',
'PhabricatorButtonsExample' => 'PhabricatorUIExample',
'PhabricatorCacheDAO' => 'PhabricatorLiskDAO', 'PhabricatorCacheDAO' => 'PhabricatorLiskDAO',
'PhabricatorCacheManagementPurgeWorkflow' => 'PhabricatorSearchManagementWorkflow', 'PhabricatorCacheManagementPurgeWorkflow' => 'PhabricatorSearchManagementWorkflow',
'PhabricatorCacheManagementWorkflow' => 'PhutilArgumentWorkflow', 'PhabricatorCacheManagementWorkflow' => 'PhutilArgumentWorkflow',

185
src/applications/uiexample/examples/PHUIButtonExample.php Normal file
View file

@ -0,0 +1,185 @@
<?php
final class PHUIButtonExample extends PhabricatorUIExample {
public function getName() {
return 'Buttons';
}
public function getDescription() {
return hsprintf('Use <tt>&lt;button&gt;</tt> to render buttons.');
}
public function renderExample() {
$request = $this->getRequest();
$user = $request->getUser();
$colors = array('', 'green', 'grey', 'black', 'disabled');
$sizes = array('', 'small');
$tags = array('a', 'button');
// phutil_tag
$column = array();
foreach ($tags as $tag) {
foreach ($colors as $color) {
foreach ($sizes as $key => $size) {
$class = implode(' ', array($color, $size));
if ($tag == 'a') {
$class .= ' button';
}
$column[$key][] = phutil_tag(
$tag,
array(
'class' => $class,
),
phutil_utf8_ucwords($size.' '.$color.' '.$tag));
$column[$key][] = hsprintf('<br /><br />');
}
}
}
$column3 = array();
foreach ($colors as $color) {
$caret = phutil_tag('span', array('class' => 'caret'), '');
$column3[] = phutil_tag(
'a',
array(
'class' => $color.' button dropdown'
),
array(
phutil_utf8_ucwords($color.' Dropdown'),
$caret,
));
$column3[] = hsprintf('<br /><br />');
}
$layout1 = id(new AphrontMultiColumnView())
->addColumn($column[0])
->addColumn($column[1])
->addColumn($column3)
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
// PHUIButtonView
$colors = array(null,
PHUIButtonView::GREEN,
PHUIButtonView::GREY,
PHUIButtonView::BLACK,
PHUIButtonView::DISABLED);
$sizes = array(null, PHUIButtonView::SMALL);
$column = array();
foreach ($colors as $color) {
foreach ($sizes as $key => $size) {
$column[$key][] = id(new PHUIButtonView())
->setColor($color)
->setSize($size)
->setTag('a')
->setText('Clicky');
$column[$key][] = hsprintf('<br /><br />');
}
}
foreach ($colors as $color) {
$column[2][] = id(new PHUIButtonView())
->setColor($color)
->setTag('button')
->setText('Button')
->setDropdown(true);
$column[2][] = hsprintf('<br /><br />');
}
$layout2 = id(new AphrontMultiColumnView())
->addColumn($column[0])
->addColumn($column[1])
->addColumn($column[2])
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
// Icon Buttons
$column = array();
$icons = array(
'Comment' => 'comment',
'Give Token' => 'like',
'Reverse Time' => 'history',
'Implode Earth' => 'warning');
foreach ($icons as $text => $icon) {
$image = id(new PHUIIconView())
->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
->setSpriteIcon($icon);
$column[] = id(new PHUIButtonView())
->setTag('a')
->setColor(PHUIButtonView::GREY)
->setIcon($image)
->setText($text)
->addClass(PHUI::MARGIN_SMALL_RIGHT);
}
$layout3 = id(new AphrontMultiColumnView())
->addColumn($column)
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
// Baby Got Back Buttons
$column = array();
$icons = array('Asana', 'Github', 'Facebook', 'Google', 'LDAP');
foreach ($icons as $icon) {
$image = id(new PHUIIconView())
->setSpriteSheet(PHUIIconView::SPRITE_LOGIN)
->setSpriteIcon($icon);
$column[] = id(new PHUIButtonView())
->setTag('a')
->setSize(PHUIButtonView::BIG)
->setColor(PHUIButtonView::GREY)
->setIcon($image)
->setText('Login or Register')
->setSubtext($icon)
->addClass(PHUI::MARGIN_MEDIUM_RIGHT);
}
$layout4 = id(new AphrontMultiColumnView())
->addColumn($column)
->setFluidLayout(true)
->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
// Set it and forget it
$head1 = id(new PhabricatorHeaderView())
->setHeader('phutil_tag');
$head2 = id(new PhabricatorHeaderView())
->setHeader('PHUIButtonView');
$head3 = id(new PhabricatorHeaderView())
->setHeader('Icon Buttons');
$head4 = id(new PhabricatorHeaderView())
->setHeader('Big Icon Buttons');
$wrap1 = id(new PHUIBoxView())
->appendChild($layout1)
->addMargin(PHUI::MARGIN_LARGE);
$wrap2 = id(new PHUIBoxView())
->appendChild($layout2)
->addMargin(PHUI::MARGIN_LARGE);
$wrap3 = id(new PHUIBoxView())
->appendChild($layout3)
->addMargin(PHUI::MARGIN_LARGE);
$wrap4 = id(new PHUIBoxView())
->appendChild($layout4)
->addMargin(PHUI::MARGIN_LARGE);
return array($head1, $wrap1, $head2, $wrap2, $head3, $wrap3,
$head4, $wrap4);
}
}

59
src/applications/uiexample/examples/PhabricatorButtonsExample.php
View file

@ -1,59 +0,0 @@
<?php
final class PhabricatorButtonsExample extends PhabricatorUIExample {
public function getName() {
return 'Buttons';
}
public function getDescription() {
return hsprintf('Use <tt>&lt;button&gt;</tt> to render buttons.');
}
public function renderExample() {
$request = $this->getRequest();
$user = $request->getUser();
$colors = array('', 'green', 'grey', 'black', 'disabled');
$sizes = array('', 'small');
$tags = array('a', 'button');
$view = array();
foreach ($tags as $tag) {
foreach ($colors as $color) {
foreach ($sizes as $size) {
$class = implode(' ', array($color, $size));
if ($tag == 'a') {
$class .= ' button';
}
$view[] = phutil_tag(
$tag,
array(
'class' => $class,
),
phutil_utf8_ucwords($size.' '.$color.' '.$tag));
$view[] = hsprintf('<br /><br />');
}
}
}
foreach ($colors as $color) {
$caret = phutil_tag('span', array('class' => 'caret'), '');
$view[] = phutil_tag(
'a',
array(
'class' => $color.' button dropdown'
),
array(
phutil_utf8_ucwords($color.' Dropdown'),
$caret,
));
$view[] = hsprintf('<br /><br />');
}
return phutil_tag('div', array('style' => 'margin: 1em 2em;'), $view);
}
}

6
src/view/page/PhabricatorStandardPageView.php
View file

@ -128,9 +128,9 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
require_celerity_resource('phabricator-core-css'); require_celerity_resource('phabricator-core-css');
require_celerity_resource('phabricator-zindex-css'); require_celerity_resource('phabricator-zindex-css');
require_celerity_resource('phabricator-core-buttons-css'); require_celerity_resource('phui-button-css');
require_celerity_resource('spacing-css'); require_celerity_resource('phui-spacing-css');
require_celerity_resource('phui-form-css'); // Evan will hate this require_celerity_resource('phui-form-css');
require_celerity_resource('sprite-gradient-css'); require_celerity_resource('sprite-gradient-css');
require_celerity_resource('phabricator-standard-page-view'); require_celerity_resource('phabricator-standard-page-view');

110
src/view/phui/PHUIButtonView.php Normal file
View file

@ -0,0 +1,110 @@
<?php
final class PHUIButtonView extends AphrontTagView {
const GREEN = 'green';
const GREY = 'grey';
const BLACK = 'black';
const DISABLED = 'disabled';
const SMALL = 'small';
const BIG = 'big';
private $size;
private $text;
private $subtext;
private $color;
private $tag = 'a';
private $dropdown;
private $icon;
public function setText($text) {
$this->text = $text;
return $this;
}
public function setSubtext($subtext) {
$this->subtext = $subtext;
return $this;
}
public function setColor($color) {
$this->color = $color;
return $this;
}
public function setTag($tag) {
$this->tag = $tag;
return $this;
}
public function setSize($size) {
$this->size = $size;
return $this;
}
public function setDropdown($dd) {
$this->dropdown = $dd;
return $this;
}
public function setIcon(PHUIIconView $icon) {
$this->icon = $icon;
return $this;
}
public function getTagName() {
return $this->tag;
}
protected function getTagAttributes() {
require_celerity_resource('phui-button-css');
$classes = array();
$classes[] = 'button';
if ($this->color) {
$classes[] = $this->color;
}
if ($this->size) {
$classes[] = $this->size;
}
if ($this->dropdown) {
$classes[] = 'dropdown';
}
if ($this->icon) {
$classes[] = 'has-icon';
}
return array('class' => $classes);
}
protected function getTagContent() {
$icon = null;
$text = $this->text;
if ($this->icon) {
$icon = $this->icon;
$subtext = null;
if ($this->subtext) {
$subtext = phutil_tag(
'span', array('class' => 'phui-button-subtext'), $this->subtext);
$subtext = hsprintf('<br />%s', $subtext);
}
$text = phutil_tag(
'div', array('class' => 'phui-button-text'), array($text, $subtext));
}
$caret = null;
if ($this->dropdown) {
$caret = phutil_tag('span', array('class' => 'caret'), '');
}
return array($icon, $text, $caret);
}
}

39
webroot/rsrc/css/core/buttons.css → webroot/rsrc/css/phui/phui-button.css
View file

@ -1,5 +1,5 @@
/** /**
* @provides phabricator-core-buttons-css * @provides phui-button-css
*/ */
@ -224,3 +224,40 @@ a.toggle-fixed {
.grey.dropdown .caret { .grey.dropdown .caret {
border-top-color: #000; border-top-color: #000;
} }
/* Icons */
.button.has-icon {
position: relative;
}
.button .phui-icon-view {
display: inline-block;
position: absolute;
top: 5px;
left: 8px;
}
.button.has_icon .phui-button-text {
margin-left: 16px;
}
/* Login Buttons */
.button.big.has-icon {
padding: 6px 20px 6px 12px;
border-radius: 4px;
}
.button.big.has-icon .phui-button-text {
margin-left: 36px;
font-size: 14px;
display: block;
}
.button.big.has-icon .phui-button-subtext {
color: #888;
font-size: 12px;
line-height: 16px;
font-weight: normal;
float: left;
}

3
webroot/rsrc/css/phui/phui-icon.css
View file

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

2
webroot/rsrc/css/core/spacing.css → webroot/rsrc/css/phui/phui-spacing.css
View file

@ -1,5 +1,5 @@
/** /**
* @provides spacing-css * @provides phui-spacing-css
*/ */
.pl { .pl {