From 02b59e685fb7702445fd701783d20c7ff77bef80 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 12 Jun 2013 18:23:35 -0700 Subject: [PATCH] PHUIButtonView class 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 --- scripts/celerity_mapper.php | 4 +- src/__celerity_resource_map__.php | 130 ++++++------ src/__phutil_library_map__.php | 6 +- .../uiexample/examples/PHUIButtonExample.php | 185 ++++++++++++++++++ .../examples/PhabricatorButtonsExample.php | 59 ------ src/view/page/PhabricatorStandardPageView.php | 6 +- src/view/phui/PHUIButtonView.php | 110 +++++++++++ .../buttons.css => phui/phui-button.css} | 39 +++- webroot/rsrc/css/phui/phui-icon.css | 3 +- .../spacing.css => phui/phui-spacing.css} | 2 +- 10 files changed, 410 insertions(+), 134 deletions(-) create mode 100644 src/applications/uiexample/examples/PHUIButtonExample.php delete mode 100644 src/applications/uiexample/examples/PhabricatorButtonsExample.php create mode 100644 src/view/phui/PHUIButtonView.php rename webroot/rsrc/css/{core/buttons.css => phui/phui-button.css} (87%) rename webroot/rsrc/css/{core/spacing.css => phui/phui-spacing.css} (96%) diff --git a/scripts/celerity_mapper.php b/scripts/celerity_mapper.php index 967c474502..e3f50db425 100755 --- a/scripts/celerity_mapper.php +++ b/scripts/celerity_mapper.php @@ -67,7 +67,7 @@ $package_spec = array( 'core.pkg.css' => array( 'phabricator-core-css', 'phabricator-zindex-css', - 'phabricator-core-buttons-css', + 'phui-button-css', 'phabricator-standard-page-view', 'aphront-dialog-view-css', 'aphront-form-view-css', @@ -104,7 +104,7 @@ $package_spec = array( 'phabricator-crumbs-view-css', 'phabricator-object-item-list-view-css', 'global-drag-and-drop-css', - 'spacing-css', + 'phui-spacing-css', 'phui-form-css', 'phui-icon-view-css', diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 7d7f492828..4ac23b0ef5 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -2965,15 +2965,6 @@ celerity_register_resource_map(array( ), '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' => array( 'uri' => '/res/dc204369/rsrc/css/core/core.css', @@ -3694,6 +3685,15 @@ celerity_register_resource_map(array( ), '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' => array( 'uri' => '/res/fe374dee/rsrc/css/phui/phui-document.css', @@ -3723,7 +3723,7 @@ celerity_register_resource_map(array( ), 'phui-icon-view-css' => array( - 'uri' => '/res/7fd37b96/rsrc/css/phui/phui-icon.css', + 'uri' => '/res/f78f4c64/rsrc/css/phui/phui-icon.css', 'type' => 'css', 'requires' => array( @@ -3739,6 +3739,15 @@ celerity_register_resource_map(array( ), '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' => array( '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', ), - 'spacing-css' => - array( - 'uri' => '/res/61563661/rsrc/css/core/spacing.css', - 'type' => 'css', - 'requires' => - array( - ), - 'disk' => '/rsrc/css/core/spacing.css', - ), 'sprite-actions-css' => array( 'uri' => '/res/bd43efa8/rsrc/css/sprite-actions.css', @@ -4048,14 +4048,14 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '76d08512' => + '0a101340' => array( 'name' => 'core.pkg.css', 'symbols' => array( 0 => 'phabricator-core-css', 1 => 'phabricator-zindex-css', - 2 => 'phabricator-core-buttons-css', + 2 => 'phui-button-css', 3 => 'phabricator-standard-page-view', 4 => 'aphront-dialog-view-css', 5 => 'aphront-form-view-css', @@ -4088,7 +4088,7 @@ celerity_register_resource_map(array( 32 => 'phabricator-crumbs-view-css', 33 => 'phabricator-object-item-list-view-css', 34 => 'global-drag-and-drop-css', - 35 => 'spacing-css', + 35 => 'phui-spacing-css', 36 => 'phui-form-css', 37 => 'phui-icon-view-css', 38 => 'phabricator-application-launch-view-css', @@ -4096,7 +4096,7 @@ celerity_register_resource_map(array( 40 => 'phabricator-property-list-view-css', 41 => 'phabricator-tag-view-css', ), - 'uri' => '/res/pkg/76d08512/core.pkg.css', + 'uri' => '/res/pkg/0a101340/core.pkg.css', 'type' => 'css', ), 'f2ad0683' => @@ -4290,16 +4290,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => 'a7ca34a9', - 'aphront-dialog-view-css' => '76d08512', - 'aphront-error-view-css' => '76d08512', - 'aphront-form-view-css' => '76d08512', - 'aphront-list-filter-view-css' => '76d08512', - 'aphront-pager-view-css' => '76d08512', - 'aphront-panel-view-css' => '76d08512', - 'aphront-table-view-css' => '76d08512', - 'aphront-tokenizer-control-css' => '76d08512', - 'aphront-tooltip-css' => '76d08512', - 'aphront-typeahead-control-css' => '76d08512', + 'aphront-dialog-view-css' => '0a101340', + 'aphront-error-view-css' => '0a101340', + 'aphront-form-view-css' => '0a101340', + 'aphront-list-filter-view-css' => '0a101340', + 'aphront-pager-view-css' => '0a101340', + 'aphront-panel-view-css' => '0a101340', + 'aphront-table-view-css' => '0a101340', + 'aphront-tokenizer-control-css' => '0a101340', + 'aphront-tooltip-css' => '0a101340', + 'aphront-typeahead-control-css' => '0a101340', 'differential-changeset-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b', 'differential-inline-comment-editor' => '9488bb69', @@ -4313,7 +4313,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => 'dd27a69b', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '76d08512', + 'global-drag-and-drop-css' => '0a101340', 'inline-comment-summary-css' => 'dd27a69b', 'javelin-aphlict' => 'f2ad0683', 'javelin-behavior' => 'a9f14d76', @@ -4387,55 +4387,55 @@ celerity_register_resource_map(array( 'javelin-util' => 'a9f14d76', 'javelin-vector' => 'a9f14d76', 'javelin-workflow' => 'a9f14d76', - 'lightbox-attachment-css' => '76d08512', + 'lightbox-attachment-css' => '0a101340', 'maniphest-task-summary-css' => 'a7ca34a9', 'maniphest-transaction-detail-css' => 'a7ca34a9', - 'phabricator-action-list-view-css' => '76d08512', - 'phabricator-application-launch-view-css' => '76d08512', + 'phabricator-action-list-view-css' => '0a101340', + 'phabricator-application-launch-view-css' => '0a101340', 'phabricator-busy' => 'f2ad0683', 'phabricator-content-source-view-css' => 'dd27a69b', - 'phabricator-core-buttons-css' => '76d08512', - 'phabricator-core-css' => '76d08512', - 'phabricator-crumbs-view-css' => '76d08512', + 'phabricator-core-css' => '0a101340', + 'phabricator-crumbs-view-css' => '0a101340', 'phabricator-drag-and-drop-file-upload' => '9488bb69', 'phabricator-dropdown-menu' => 'f2ad0683', 'phabricator-file-upload' => 'f2ad0683', - 'phabricator-filetree-view-css' => '76d08512', - 'phabricator-flag-css' => '76d08512', - 'phabricator-form-view-css' => '76d08512', - 'phabricator-header-view-css' => '76d08512', + 'phabricator-filetree-view-css' => '0a101340', + 'phabricator-flag-css' => '0a101340', + 'phabricator-form-view-css' => '0a101340', + 'phabricator-header-view-css' => '0a101340', 'phabricator-hovercard' => 'f2ad0683', - 'phabricator-jump-nav' => '76d08512', + 'phabricator-jump-nav' => '0a101340', 'phabricator-keyboard-shortcut' => 'f2ad0683', 'phabricator-keyboard-shortcut-manager' => 'f2ad0683', - 'phabricator-main-menu-view' => '76d08512', + 'phabricator-main-menu-view' => '0a101340', 'phabricator-menu-item' => 'f2ad0683', - 'phabricator-nav-view-css' => '76d08512', + 'phabricator-nav-view-css' => '0a101340', 'phabricator-notification' => 'f2ad0683', - 'phabricator-notification-css' => '76d08512', - 'phabricator-notification-menu-css' => '76d08512', - 'phabricator-object-item-list-view-css' => '76d08512', + 'phabricator-notification-css' => '0a101340', + 'phabricator-notification-menu-css' => '0a101340', + 'phabricator-object-item-list-view-css' => '0a101340', 'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-phtize' => 'f2ad0683', 'phabricator-prefab' => 'f2ad0683', 'phabricator-project-tag-css' => 'a7ca34a9', - 'phabricator-property-list-view-css' => '76d08512', - 'phabricator-remarkup-css' => '76d08512', + 'phabricator-property-list-view-css' => '0a101340', + 'phabricator-remarkup-css' => '0a101340', 'phabricator-shaped-request' => '9488bb69', - 'phabricator-side-menu-view-css' => '76d08512', - 'phabricator-standard-page-view' => '76d08512', - 'phabricator-tag-view-css' => '76d08512', + 'phabricator-side-menu-view-css' => '0a101340', + 'phabricator-standard-page-view' => '0a101340', + 'phabricator-tag-view-css' => '0a101340', 'phabricator-textareautils' => 'f2ad0683', 'phabricator-tooltip' => 'f2ad0683', - 'phabricator-transaction-view-css' => '76d08512', - 'phabricator-zindex-css' => '76d08512', - 'phui-form-css' => '76d08512', - 'phui-icon-view-css' => '76d08512', - 'spacing-css' => '76d08512', - 'sprite-apps-large-css' => '76d08512', - 'sprite-gradient-css' => '76d08512', - 'sprite-icons-css' => '76d08512', - 'sprite-menu-css' => '76d08512', - 'syntax-highlighting-css' => '76d08512', + 'phabricator-transaction-view-css' => '0a101340', + 'phabricator-zindex-css' => '0a101340', + 'phui-button-css' => '0a101340', + 'phui-form-css' => '0a101340', + 'phui-icon-view-css' => '0a101340', + 'phui-spacing-css' => '0a101340', + 'sprite-apps-large-css' => '0a101340', + 'sprite-gradient-css' => '0a101340', + 'sprite-icons-css' => '0a101340', + 'sprite-menu-css' => '0a101340', + 'syntax-highlighting-css' => '0a101340', ), )); diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index f688d42c54..bdd0a5af9e 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -686,6 +686,8 @@ phutil_register_library_map(array( 'PHUI' => 'view/phui/PHUI.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', + 'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php', + 'PHUIButtonView' => 'view/phui/PHUIButtonView.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', @@ -835,7 +837,6 @@ phutil_register_library_map(array( 'PhabricatorBotUser' => 'infrastructure/daemon/bot/target/PhabricatorBotUser.php', 'PhabricatorBotWhatsNewHandler' => 'infrastructure/daemon/bot/handler/PhabricatorBotWhatsNewHandler.php', 'PhabricatorBuiltinPatchList' => 'infrastructure/storage/patch/PhabricatorBuiltinPatchList.php', - 'PhabricatorButtonsExample' => 'applications/uiexample/examples/PhabricatorButtonsExample.php', 'PhabricatorCacheDAO' => 'applications/cache/storage/PhabricatorCacheDAO.php', 'PhabricatorCacheManagementPurgeWorkflow' => 'applications/cache/management/PhabricatorCacheManagementPurgeWorkflow.php', 'PhabricatorCacheManagementWorkflow' => 'applications/cache/management/PhabricatorCacheManagementWorkflow.php', @@ -2531,6 +2532,8 @@ phutil_register_library_map(array( 'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler', 'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxView' => 'AphrontTagView', + 'PHUIButtonExample' => 'PhabricatorUIExample', + 'PHUIButtonView' => 'AphrontTagView', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', @@ -2683,7 +2686,6 @@ phutil_register_library_map(array( 'PhabricatorBotUser' => 'PhabricatorBotTarget', 'PhabricatorBotWhatsNewHandler' => 'PhabricatorBotHandler', 'PhabricatorBuiltinPatchList' => 'PhabricatorSQLPatchList', - 'PhabricatorButtonsExample' => 'PhabricatorUIExample', 'PhabricatorCacheDAO' => 'PhabricatorLiskDAO', 'PhabricatorCacheManagementPurgeWorkflow' => 'PhabricatorSearchManagementWorkflow', 'PhabricatorCacheManagementWorkflow' => 'PhutilArgumentWorkflow', diff --git a/src/applications/uiexample/examples/PHUIButtonExample.php b/src/applications/uiexample/examples/PHUIButtonExample.php new file mode 100644 index 0000000000..ff9e7e2266 --- /dev/null +++ b/src/applications/uiexample/examples/PHUIButtonExample.php @@ -0,0 +1,185 @@ +<button> 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('

'); + } + } + } + + $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('

'); + } + + $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('

'); + } + } + foreach ($colors as $color) { + $column[2][] = id(new PHUIButtonView()) + ->setColor($color) + ->setTag('button') + ->setText('Button') + ->setDropdown(true); + $column[2][] = hsprintf('

'); + } + + $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); + } +} diff --git a/src/applications/uiexample/examples/PhabricatorButtonsExample.php b/src/applications/uiexample/examples/PhabricatorButtonsExample.php deleted file mode 100644 index 6c4dbdcdff..0000000000 --- a/src/applications/uiexample/examples/PhabricatorButtonsExample.php +++ /dev/null @@ -1,59 +0,0 @@ -<button> 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('

'); - } - } - } - - 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('

'); - } - - return phutil_tag('div', array('style' => 'margin: 1em 2em;'), $view); - } -} diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 9539e8995e..0643c8b2ab 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -128,9 +128,9 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { require_celerity_resource('phabricator-core-css'); require_celerity_resource('phabricator-zindex-css'); - require_celerity_resource('phabricator-core-buttons-css'); - require_celerity_resource('spacing-css'); - require_celerity_resource('phui-form-css'); // Evan will hate this + require_celerity_resource('phui-button-css'); + require_celerity_resource('phui-spacing-css'); + require_celerity_resource('phui-form-css'); require_celerity_resource('sprite-gradient-css'); require_celerity_resource('phabricator-standard-page-view'); diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php new file mode 100644 index 0000000000..c85049335d --- /dev/null +++ b/src/view/phui/PHUIButtonView.php @@ -0,0 +1,110 @@ +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('
%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); + } +} diff --git a/webroot/rsrc/css/core/buttons.css b/webroot/rsrc/css/phui/phui-button.css similarity index 87% rename from webroot/rsrc/css/core/buttons.css rename to webroot/rsrc/css/phui/phui-button.css index 6ba58a98cc..d1d723a751 100644 --- a/webroot/rsrc/css/core/buttons.css +++ b/webroot/rsrc/css/phui/phui-button.css @@ -1,5 +1,5 @@ /** - * @provides phabricator-core-buttons-css + * @provides phui-button-css */ @@ -224,3 +224,40 @@ a.toggle-fixed { .grey.dropdown .caret { 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; +} diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index 014fdb0589..1e7ef4fd75 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -17,7 +17,8 @@ width: 24px; } -.phui-icon-view.sprite-apps { +.phui-icon-view.sprite-apps, +.phui-icon-view.sprite-icons { height: 14px; width: 14px; } diff --git a/webroot/rsrc/css/core/spacing.css b/webroot/rsrc/css/phui/phui-spacing.css similarity index 96% rename from webroot/rsrc/css/core/spacing.css rename to webroot/rsrc/css/phui/phui-spacing.css index 63050bc0a2..eebc76eddb 100644 --- a/webroot/rsrc/css/core/spacing.css +++ b/webroot/rsrc/css/phui/phui-spacing.css @@ -1,5 +1,5 @@ /** - * @provides spacing-css + * @provides phui-spacing-css */ .pl {