From c42f986e1ad89a7e79e2d0ac20f3d89255c5f89f Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 18 Jun 2013 15:35:14 -0700 Subject: [PATCH] Color Palette Summary: Picked a set of standard colors. Based on our current Maniphest color set, but tweaked to the same hue with http://color.hailpixel.com/ Test Plan: Not intended to be end all be all, but a decent first cut. Applied to Maniphest and Tags. Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6229 --- src/__celerity_resource_map__.php | 92 +++++++++---------- src/__phutil_library_map__.php | 2 + .../examples/PHUIColorPalletteExample.php | 87 ++++++++++++++++++ .../examples/PhabricatorTagExample.php | 90 ++++++++++-------- src/view/layout/PhabricatorTagView.php | 2 - .../phabricator-object-item-list-view.css | 20 ++-- .../rsrc/css/layout/phabricator-tag-view.css | 33 +++---- 7 files changed, 212 insertions(+), 114 deletions(-) create mode 100644 src/applications/uiexample/examples/PHUIColorPalletteExample.php diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 2c2b081d86..819db90911 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3233,7 +3233,7 @@ celerity_register_resource_map(array( ), 'phabricator-object-item-list-view-css' => array( - 'uri' => '/res/4ba9eeaf/rsrc/css/layout/phabricator-object-item-list-view.css', + 'uri' => '/res/2a0eb432/rsrc/css/layout/phabricator-object-item-list-view.css', 'type' => 'css', 'requires' => array( @@ -3410,7 +3410,7 @@ celerity_register_resource_map(array( ), 'phabricator-tag-view-css' => array( - 'uri' => '/res/e10bf844/rsrc/css/layout/phabricator-tag-view.css', + 'uri' => '/res/148230a5/rsrc/css/layout/phabricator-tag-view.css', 'type' => 'css', 'requires' => array( @@ -4057,7 +4057,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'd6a36d96' => + '24fadc3c' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4105,7 +4105,7 @@ celerity_register_resource_map(array( 40 => 'phabricator-property-list-view-css', 41 => 'phabricator-tag-view-css', ), - 'uri' => '/res/pkg/d6a36d96/core.pkg.css', + 'uri' => '/res/pkg/24fadc3c/core.pkg.css', 'type' => 'css', ), 'f2ad0683' => @@ -4299,16 +4299,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => 'a7ca34a9', - 'aphront-dialog-view-css' => 'd6a36d96', - 'aphront-error-view-css' => 'd6a36d96', - 'aphront-form-view-css' => 'd6a36d96', - 'aphront-list-filter-view-css' => 'd6a36d96', - 'aphront-pager-view-css' => 'd6a36d96', - 'aphront-panel-view-css' => 'd6a36d96', - 'aphront-table-view-css' => 'd6a36d96', - 'aphront-tokenizer-control-css' => 'd6a36d96', - 'aphront-tooltip-css' => 'd6a36d96', - 'aphront-typeahead-control-css' => 'd6a36d96', + 'aphront-dialog-view-css' => '24fadc3c', + 'aphront-error-view-css' => '24fadc3c', + 'aphront-form-view-css' => '24fadc3c', + 'aphront-list-filter-view-css' => '24fadc3c', + 'aphront-pager-view-css' => '24fadc3c', + 'aphront-panel-view-css' => '24fadc3c', + 'aphront-table-view-css' => '24fadc3c', + 'aphront-tokenizer-control-css' => '24fadc3c', + 'aphront-tooltip-css' => '24fadc3c', + 'aphront-typeahead-control-css' => '24fadc3c', 'differential-changeset-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b', 'differential-inline-comment-editor' => '9488bb69', @@ -4322,7 +4322,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' => 'd6a36d96', + 'global-drag-and-drop-css' => '24fadc3c', 'inline-comment-summary-css' => 'dd27a69b', 'javelin-aphlict' => 'f2ad0683', 'javelin-behavior' => 'a9f14d76', @@ -4396,55 +4396,55 @@ celerity_register_resource_map(array( 'javelin-util' => 'a9f14d76', 'javelin-vector' => 'a9f14d76', 'javelin-workflow' => 'a9f14d76', - 'lightbox-attachment-css' => 'd6a36d96', + 'lightbox-attachment-css' => '24fadc3c', 'maniphest-task-summary-css' => 'a7ca34a9', 'maniphest-transaction-detail-css' => 'a7ca34a9', - 'phabricator-action-list-view-css' => 'd6a36d96', - 'phabricator-application-launch-view-css' => 'd6a36d96', + 'phabricator-action-list-view-css' => '24fadc3c', + 'phabricator-application-launch-view-css' => '24fadc3c', 'phabricator-busy' => 'f2ad0683', 'phabricator-content-source-view-css' => 'dd27a69b', - 'phabricator-core-css' => 'd6a36d96', - 'phabricator-crumbs-view-css' => 'd6a36d96', + 'phabricator-core-css' => '24fadc3c', + 'phabricator-crumbs-view-css' => '24fadc3c', 'phabricator-drag-and-drop-file-upload' => '9488bb69', 'phabricator-dropdown-menu' => 'f2ad0683', 'phabricator-file-upload' => 'f2ad0683', - 'phabricator-filetree-view-css' => 'd6a36d96', - 'phabricator-flag-css' => 'd6a36d96', - 'phabricator-form-view-css' => 'd6a36d96', - 'phabricator-header-view-css' => 'd6a36d96', + 'phabricator-filetree-view-css' => '24fadc3c', + 'phabricator-flag-css' => '24fadc3c', + 'phabricator-form-view-css' => '24fadc3c', + 'phabricator-header-view-css' => '24fadc3c', 'phabricator-hovercard' => 'f2ad0683', - 'phabricator-jump-nav' => 'd6a36d96', + 'phabricator-jump-nav' => '24fadc3c', 'phabricator-keyboard-shortcut' => 'f2ad0683', 'phabricator-keyboard-shortcut-manager' => 'f2ad0683', - 'phabricator-main-menu-view' => 'd6a36d96', + 'phabricator-main-menu-view' => '24fadc3c', 'phabricator-menu-item' => 'f2ad0683', - 'phabricator-nav-view-css' => 'd6a36d96', + 'phabricator-nav-view-css' => '24fadc3c', 'phabricator-notification' => 'f2ad0683', - 'phabricator-notification-css' => 'd6a36d96', - 'phabricator-notification-menu-css' => 'd6a36d96', - 'phabricator-object-item-list-view-css' => 'd6a36d96', + 'phabricator-notification-css' => '24fadc3c', + 'phabricator-notification-menu-css' => '24fadc3c', + 'phabricator-object-item-list-view-css' => '24fadc3c', 'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-phtize' => 'f2ad0683', 'phabricator-prefab' => 'f2ad0683', 'phabricator-project-tag-css' => 'a7ca34a9', - 'phabricator-property-list-view-css' => 'd6a36d96', - 'phabricator-remarkup-css' => 'd6a36d96', + 'phabricator-property-list-view-css' => '24fadc3c', + 'phabricator-remarkup-css' => '24fadc3c', 'phabricator-shaped-request' => '9488bb69', - 'phabricator-side-menu-view-css' => 'd6a36d96', - 'phabricator-standard-page-view' => 'd6a36d96', - 'phabricator-tag-view-css' => 'd6a36d96', + 'phabricator-side-menu-view-css' => '24fadc3c', + 'phabricator-standard-page-view' => '24fadc3c', + 'phabricator-tag-view-css' => '24fadc3c', 'phabricator-textareautils' => 'f2ad0683', 'phabricator-tooltip' => 'f2ad0683', - 'phabricator-transaction-view-css' => 'd6a36d96', - 'phabricator-zindex-css' => 'd6a36d96', - 'phui-button-css' => 'd6a36d96', - 'phui-form-css' => 'd6a36d96', - 'phui-icon-view-css' => 'd6a36d96', - 'phui-spacing-css' => 'd6a36d96', - 'sprite-apps-large-css' => 'd6a36d96', - 'sprite-gradient-css' => 'd6a36d96', - 'sprite-icons-css' => 'd6a36d96', - 'sprite-menu-css' => 'd6a36d96', - 'syntax-highlighting-css' => 'd6a36d96', + 'phabricator-transaction-view-css' => '24fadc3c', + 'phabricator-zindex-css' => '24fadc3c', + 'phui-button-css' => '24fadc3c', + 'phui-form-css' => '24fadc3c', + 'phui-icon-view-css' => '24fadc3c', + 'phui-spacing-css' => '24fadc3c', + 'sprite-apps-large-css' => '24fadc3c', + 'sprite-gradient-css' => '24fadc3c', + 'sprite-icons-css' => '24fadc3c', + 'sprite-menu-css' => '24fadc3c', + 'syntax-highlighting-css' => '24fadc3c', ), )); diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 64e43cba3f..da2e4f2b3d 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -688,6 +688,7 @@ phutil_register_library_map(array( 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', 'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php', 'PHUIButtonView' => 'view/phui/PHUIButtonView.php', + 'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', @@ -2562,6 +2563,7 @@ phutil_register_library_map(array( 'PHUIBoxView' => 'AphrontTagView', 'PHUIButtonExample' => 'PhabricatorUIExample', 'PHUIButtonView' => 'AphrontTagView', + 'PHUIColorPalletteExample' => 'PhabricatorUIExample', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', diff --git a/src/applications/uiexample/examples/PHUIColorPalletteExample.php b/src/applications/uiexample/examples/PHUIColorPalletteExample.php new file mode 100644 index 0000000000..81b2586fea --- /dev/null +++ b/src/applications/uiexample/examples/PHUIColorPalletteExample.php @@ -0,0 +1,87 @@ + 'Base Red', + 'd35400' => 'Base Orange', + 'f1c40f' => 'Base Yellow', + '27ae60' => 'Base Green', + '298094' => 'Base Blue', + 'c6539d' => 'Base Indigo', + '8e44ad' => 'Base Violet', + ); + + $darks = array( + 'ecf0f1', + 'bdc3c7', + '95a5a6', + '7f8c8d', + '34495e', + '2c3e50'); + + $d_column = array(); + foreach ($darks as $dark) { + $d_column[] = phutil_tag( + 'div', + array( + 'style' => 'background-color: #'.$dark.';', + 'class' => 'pl'), + '#'.$dark); + } + + $c_column = array(); + foreach ($colors as $color => $name) { + $c_column[] = phutil_tag( + 'div', + array( + 'style' => 'background-color: #'.$color.';', + 'class' => 'pl'), + $name.' #'.$color); + } + + $layout1 = id(new PHUIBoxView()) + ->appendChild($d_column) + ->setShadow(true) + ->addPadding(PHUI::PADDING_LARGE); + + $layout2 = id(new PHUIBoxView()) + ->appendChild($c_column) + ->setShadow(true) + ->addPadding(PHUI::PADDING_LARGE); + + $head1 = id(new PhabricatorHeaderView()) + ->setHeader(pht('Darks')); + + $wrap1 = id(new PHUIBoxView()) + ->appendChild($layout1) + ->addMargin(PHUI::MARGIN_LARGE); + + $head2 = id(new PhabricatorHeaderView()) + ->setHeader(pht('Colors')); + + $wrap2 = id(new PHUIBoxView()) + ->appendChild($layout2) + ->addMargin(PHUI::MARGIN_LARGE); + + return phutil_tag( + 'div', + array(), + array( + $head1, + $wrap1, + $head2, + $wrap2 + )); + } +} diff --git a/src/applications/uiexample/examples/PhabricatorTagExample.php b/src/applications/uiexample/examples/PhabricatorTagExample.php index f8eac66917..cfdd20f2a7 100644 --- a/src/applications/uiexample/examples/PhabricatorTagExample.php +++ b/src/applications/uiexample/examples/PhabricatorTagExample.php @@ -11,79 +11,84 @@ final class PhabricatorTagExample extends PhabricatorUIExample { } public function renderExample() { - $tags = array(); + $intro = array(); - $tags[] = 'Hey, '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = 'Hey, '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_PERSON) ->setName('@alincoln') ->setHref('#'); - $tags[] = ' how is stuff?'; - $tags[] = hsprintf('

'); + $intro[] = ' how is stuff?'; + $intro[] = hsprintf('

'); - $tags[] = 'Did you hear that '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = 'Did you hear that '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_PERSON) ->setName('@gwashington') ->setDotColor(PhabricatorTagView::COLOR_RED) ->setHref('#'); - $tags[] = ' is away, '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = ' is away, '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_PERSON) ->setName('@tjefferson') ->setDotColor(PhabricatorTagView::COLOR_ORANGE) ->setHref('#'); - $tags[] = ' has some errands, and '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = ' has some errands, and '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_PERSON) ->setName('@rreagan') ->setDotColor(PhabricatorTagView::COLOR_GREY) ->setHref('#'); - $tags[] = ' is gone?'; - $tags[] = hsprintf('

'); + $intro[] = ' is gone?'; + $intro[] = hsprintf('

'); - $tags[] = 'Take a look at '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = 'Take a look at '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_OBJECT) ->setName('D123') ->setHref('#'); - $tags[] = ' when you get a chance.'; - $tags[] = hsprintf('

'); + $intro[] = ' when you get a chance.'; + $intro[] = hsprintf('

'); - $tags[] = 'Hmm? '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = 'Hmm? '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_OBJECT) ->setName('D123') ->setClosed(true) ->setHref('#'); - $tags[] = ' is '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = ' is '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_STATE) ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK) ->setName('Abandoned'); - $tags[] = '.'; - $tags[] = hsprintf('

'); + $intro[] = '.'; + $intro[] = hsprintf('

'); - $tags[] = 'I hope someone is going to '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = 'I hope someone is going to '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_OBJECT) ->setName('T123: Water The Dog') - ->setBarColor(PhabricatorTagView::COLOR_REDORANGE) + ->setBarColor(PhabricatorTagView::COLOR_RED) ->setHref('#'); - $tags[] = ' -- that task is '; - $tags[] = id(new PhabricatorTagView()) + $intro[] = ' -- that task is '; + $intro[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_STATE) - ->setBackgroundColor(PhabricatorTagView::COLOR_REDORANGE) + ->setBackgroundColor(PhabricatorTagView::COLOR_RED) ->setName('High Priority'); - $tags[] = '!'; - $tags[] = hsprintf('

'); + $intro[] = '!'; + $intro = id(new PHUIBoxView()) + ->appendChild($intro) + ->setShadow(true) + ->addPadding(PHUI::PADDING_LARGE) + ->addMargin(PHUI::MARGIN_LARGE); - $tags[] = id(new PhabricatorHeaderView()) + $header1 = id(new PhabricatorHeaderView()) ->setHeader('Colors'); $colors = PhabricatorTagView::getColors(); + $tags = array(); foreach ($colors as $color) { $tags[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_STATE) @@ -92,9 +97,17 @@ final class PhabricatorTagExample extends PhabricatorUIExample { $tags[] = hsprintf('

'); } - $tags[] = id(new PhabricatorHeaderView()) + $content1 = id(new PHUIBoxView()) + ->appendChild($tags) + ->setShadow(true) + ->addPadding(PHUI::PADDING_LARGE) + ->addMargin(PHUI::MARGIN_LARGE); + + $header2 = id(new PhabricatorHeaderView()) ->setHeader('Holidays?'); + + $tags = array(); $tags[] = id(new PhabricatorTagView()) ->setType(PhabricatorTagView::TYPE_STATE) ->setBackgroundColor(PhabricatorTagView::COLOR_GREEN) @@ -116,9 +129,12 @@ final class PhabricatorTagExample extends PhabricatorUIExample { ->setBarColor(PhabricatorTagView::COLOR_BLUE) ->setName('Easter'); - return phutil_tag( - 'div', - array('class' => 'ml'), - $tags); + $content2 = id(new PHUIBoxView()) + ->appendChild($tags) + ->setShadow(true) + ->addPadding(PHUI::PADDING_LARGE) + ->addMargin(PHUI::MARGIN_LARGE); + + return array($intro, $header1, $content1, $header2, $content2); } } diff --git a/src/view/layout/PhabricatorTagView.php b/src/view/layout/PhabricatorTagView.php index 85b523e40b..18d4ed9363 100644 --- a/src/view/layout/PhabricatorTagView.php +++ b/src/view/layout/PhabricatorTagView.php @@ -7,7 +7,6 @@ final class PhabricatorTagView extends AphrontView { const TYPE_STATE = 'state'; const COLOR_RED = 'red'; - const COLOR_REDORANGE = 'redorange'; const COLOR_ORANGE = 'orange'; const COLOR_YELLOW = 'yellow'; const COLOR_BLUE = 'blue'; @@ -165,7 +164,6 @@ final class PhabricatorTagView extends AphrontView { public static function getColors() { return array( self::COLOR_RED, - self::COLOR_REDORANGE, self::COLOR_ORANGE, self::COLOR_YELLOW, self::COLOR_BLUE, diff --git a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css index 2ad4d08fe9..0f85c27a46 100644 --- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css +++ b/webroot/rsrc/css/layout/phabricator-object-item-list-view.css @@ -294,43 +294,43 @@ */ .phabricator-object-item-bar-color-red { - border-left-color: #cc0000; + border-left-color: #c0392b; } .phabricator-object-item-bar-color-orange { - border-left-color: #cc7300; + border-left-color: #e67e22; } .phabricator-object-item-bar-color-yellow { - border-left-color: #ccc000; + border-left-color: #f1c40f; } .phabricator-object-item-bar-color-green { - border-left-color: #009b2d; + border-left-color: #27ae60; } .phabricator-object-item-bar-color-sky { - border-left-color: #6498cf; + border-left-color: #3498db; } .phabricator-object-item-bar-color-blue { - border-left-color: #00659a; + border-left-color: #2980b9; } -.phabricator-object-item-bar-color-indigo { +.phabricator-object-item-bar-color-indigo { /* TODO */ border-left-color: #3a00cc; } .phabricator-object-item-bar-color-violet { - border-left-color: #67009b; + border-left-color: #8e44ad; } .phabricator-object-item-bar-color-magenta { - border-left-color: #cc00c0; + border-left-color: #cB4d9f; } .phabricator-object-item-bar-color-grey { - border-left-color: #999999; + border-left-color: #7f8cbd; } .phabricator-object-item-bar-color-black { diff --git a/webroot/rsrc/css/layout/phabricator-tag-view.css b/webroot/rsrc/css/layout/phabricator-tag-view.css index af64762ddd..54f61fafdd 100644 --- a/webroot/rsrc/css/layout/phabricator-tag-view.css +++ b/webroot/rsrc/css/layout/phabricator-tag-view.css @@ -42,7 +42,7 @@ a.phabricator-tag-view:hover { .phabricator-tag-type-state { color: #ffffff; - text-shadow: rgba(0, 0, 0, 0.40) 0px -1px 1px; + text-shadow: rgba(100, 100, 100, 0.40) 0px -1px 1px; } .phabricator-tag-type-object, @@ -57,38 +57,33 @@ a.phabricator-tag-type-object:link { } .phabricator-tag-color-red { - background-color: #e12320; - border-color: #e12320; -} - -.phabricator-tag-color-redorange { - background-color: #ff6604; - border-color: #ff6604; + background-color: #c0392b; + border-color: #c0392b; } .phabricator-tag-color-orange { - background-color: #fa9400; - border-color: #fa9400; + background-color: #F39C12; + border-color: #F39C12; } .phabricator-tag-color-yellow { - background-color: #f2ed5b; - border-color: #f2ed5b; + background-color: #f1c40f; + border-color: #f1c40f; } .phabricator-tag-color-blue { - background-color: #0573d2; - border-color: #0573d2; + background-color: #2980b9; + border-color: #2980b9; } .phabricator-tag-color-magenta { - background-color: #ce00ce; + background-color: #cb4d9f; border-color: #ce00ce; } .phabricator-tag-color-green { - background-color: #438944; - border-color: #438944; + background-color: #27ae60; + border-color: #27ae60; } .phabricator-tag-color-black { @@ -102,8 +97,8 @@ a.phabricator-tag-type-object:link { } .phabricator-tag-color-white { - background-color: #ffffff; - border-color: #ffffff; + background-color: #f7f7f7; + border-color: #f7f7f7; } .phabricator-tag-color-object {