From 476b7ef81611e5293ae7409cffcacfecc101d673 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 6 May 2015 20:52:22 -0700 Subject: [PATCH] Redesign main header Summary: First cut of redesign branch, simpler, lighter header. Will check in new graphics in follow up diff. Test Plan: Mostly all just new colors, but this also removes setting of `header-color` in Config. Reviewers: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12745 --- resources/celerity/map.php | 40 +++++++------- .../page/menu/PhabricatorMainMenuView.php | 7 +-- .../css/application/base/main-menu-view.css | 52 +++++++++---------- .../application/base/standard-page-view.css | 16 +----- webroot/rsrc/css/core/core.css | 2 +- .../aphlict/behavior-aphlict-dropdown.js | 4 +- 6 files changed, 51 insertions(+), 70 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index d6dd3971fd..329a154260 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'ca3f6a60', - 'core.pkg.js' => 'ff529dc7', + 'core.pkg.css' => '84f8e6af', + 'core.pkg.js' => '60924527', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'bb338e4b', 'differential.pkg.js' => '3cfa26f9', @@ -34,10 +34,10 @@ return array( 'rsrc/css/aphront/typeahead.css' => '0e403212', 'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af', 'rsrc/css/application/auth/auth.css' => '1e655982', - 'rsrc/css/application/base/main-menu-view.css' => '663e3810', + 'rsrc/css/application/base/main-menu-view.css' => '0275c7b0', 'rsrc/css/application/base/notification-menu.css' => '3c9d8aa1', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f', - 'rsrc/css/application/base/standard-page-view.css' => 'd3e1abe9', + 'rsrc/css/application/base/standard-page-view.css' => 'dc14c671', 'rsrc/css/application/chatlog/chatlog.css' => '852140ff', 'rsrc/css/application/config/config-options.css' => '7fedf08b', 'rsrc/css/application/config/config-template.css' => '8e6c6fcd', @@ -107,7 +107,7 @@ return array( 'rsrc/css/application/slowvote/slowvote.css' => '266df6a1', 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', - 'rsrc/css/core/core.css' => '76e8ee93', + 'rsrc/css/core/core.css' => '8971b2d1', 'rsrc/css/core/remarkup.css' => '0037bdbf', 'rsrc/css/core/syntax.css' => '6b7b24d9', 'rsrc/css/core/z-index.css' => '3b612549', @@ -341,7 +341,7 @@ return array( 'rsrc/image/texture/table_header_hover.png' => '038ec3b9', 'rsrc/image/texture/table_header_tall.png' => 'd56b434f', 'rsrc/js/application/aphlict/Aphlict.js' => '30a6303c', - 'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '0323afdd', + 'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '6e1f0cba', 'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'b1a59974', 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761', 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', @@ -541,7 +541,7 @@ return array( 'inline-comment-summary-css' => 'eb5f8e8c', 'javelin-aphlict' => '30a6303c', 'javelin-behavior' => '61cbc29a', - 'javelin-behavior-aphlict-dropdown' => '0323afdd', + 'javelin-behavior-aphlict-dropdown' => '6e1f0cba', 'javelin-behavior-aphlict-listen' => 'b1a59974', 'javelin-behavior-aphlict-status' => 'ea681761', 'javelin-behavior-aphront-basic-tokenizer' => 'b3a4b884', @@ -714,7 +714,7 @@ return array( 'phabricator-busy' => '59a7976a', 'phabricator-chatlog-css' => '852140ff', 'phabricator-content-source-view-css' => '4b8b05d4', - 'phabricator-core-css' => '76e8ee93', + 'phabricator-core-css' => '8971b2d1', 'phabricator-countdown-css' => '86b7b0a0', 'phabricator-dashboard-css' => '17937d22', 'phabricator-drag-and-drop-file-upload' => '07de8873', @@ -728,7 +728,7 @@ return array( 'phabricator-hovercard-view-css' => '44394670', 'phabricator-keyboard-shortcut' => '1ae869f2', 'phabricator-keyboard-shortcut-manager' => 'c1700f6f', - 'phabricator-main-menu-view' => '663e3810', + 'phabricator-main-menu-view' => '0275c7b0', 'phabricator-nav-view-css' => '7aeaf435', 'phabricator-notification' => '0c6946e7', 'phabricator-notification-css' => '9c279160', @@ -743,7 +743,7 @@ return array( 'phabricator-side-menu-view-css' => 'c1db9e9c', 'phabricator-slowvote-css' => '266df6a1', 'phabricator-source-code-view-css' => '2ceee894', - 'phabricator-standard-page-view' => 'd3e1abe9', + 'phabricator-standard-page-view' => 'dc14c671', 'phabricator-textareautils' => '5c93c52c', 'phabricator-title' => 'df5e11d2', 'phabricator-tooltip' => '1d298e3a', @@ -836,16 +836,6 @@ return array( '029a133d' => array( 'aphront-dialog-view-css', ), - '0323afdd' => array( - 'javelin-behavior', - 'javelin-request', - 'javelin-stratcom', - 'javelin-vector', - 'javelin-dom', - 'javelin-uri', - 'javelin-behavior-device', - 'phabricator-title', - ), '048330fa' => array( 'javelin-behavior', 'javelin-typeahead-ondemand-source', @@ -1347,6 +1337,16 @@ return array( 'phabricator-drag-and-drop-file-upload', 'phabricator-textareautils', ), + '6e1f0cba' => array( + 'javelin-behavior', + 'javelin-request', + 'javelin-stratcom', + 'javelin-vector', + 'javelin-dom', + 'javelin-uri', + 'javelin-behavior-device', + 'phabricator-title', + ), '6eff08aa' => array( 'javelin-install', 'javelin-util', diff --git a/src/view/page/menu/PhabricatorMainMenuView.php b/src/view/page/menu/PhabricatorMainMenuView.php index 065674e8fd..b905d90106 100644 --- a/src/view/page/menu/PhabricatorMainMenuView.php +++ b/src/view/page/menu/PhabricatorMainMenuView.php @@ -27,7 +27,6 @@ final class PhabricatorMainMenuView extends AphrontView { $user = $this->user; require_celerity_resource('phabricator-main-menu-view'); - require_celerity_resource('sprite-main-header-css'); $header_id = celerity_generate_unique_node_id(); $menus = array(); @@ -82,8 +81,6 @@ final class PhabricatorMainMenuView extends AphrontView { $application_menu = $this->renderApplicationMenu(); $classes = array(); $classes[] = 'phabricator-main-menu'; - $classes[] = 'sprite-main-header'; - $classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color'); return phutil_tag( 'div', @@ -161,7 +158,7 @@ final class PhabricatorMainMenuView extends AphrontView { 'meta' => array( 'map' => array( $header_id => 'phabricator-application-menu-expanded', - $button_id => 'white', + $button_id => 'sky', ), ), ), @@ -224,7 +221,7 @@ final class PhabricatorMainMenuView extends AphrontView { 'meta' => array( 'map' => array( $header_id => 'phabricator-search-menu-expanded', - $button_id => 'white', + $button_id => 'sky', ), ), ), diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css index 6b61c191b5..ef07dd0c54 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -13,11 +13,13 @@ .phabricator-main-menu { background-repeat: repeat-x; position: relative; - min-height: 44px; + min-height: 43px; + background: #ebecee; + border-bottom: 1px solid {$hovergrey}; } .device-desktop .phabricator-main-menu { - height: 44px; + height: 43px; padding-right: 4px; } @@ -84,7 +86,7 @@ font-size: 20px; height: 20px; width: 20px; - color: rgba(255,255,255,.8); + color: {$bluetext}; text-align: center; vertical-align: middle; line-height: 24px; @@ -147,28 +149,22 @@ box-shadow: none; transition: none; - color: {$lightgreytext}; + color: {$bluetext}; width: 100%; right: 0; position: absolute; font-size: 13px; - border-width: 2px; - border-color: rgba(0,0,0,.6); + border-width: 1px; + border-color: {$blueborder}; border-radius: 3px; - background-color: rgba(0,0,0,.5); + background-color: #fff; opacity: .8; height: 28px; - box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25); padding: 3px 30px 3px 6px; float: left; width: 205px; } -.phabricator-main-menu.main-header-dark .phabricator-main-menu-search input { - background-color: rgba(150,150,150,.5); - border-color: #333; -} - .device .phabricator-main-menu-search input { height: 32px; font-size: 15px; @@ -185,13 +181,13 @@ } .phabricator-main-menu-search input.jx-typeahead-placeholder { - color: #fff; + color: {$bluetext}; } .phabricator-main-menu-search button { - color: rgba(255,255,255,.8); + color: {$bluetext}; position: absolute; - background: #000; + background: {$lightgreybackground}; border: none; outline: none; box-shadow: none; @@ -216,7 +212,7 @@ .device-desktop .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown:hover .phui-icon-view { - color: #fff; + color: {$sky}; } .device .phabricator-main-menu-search @@ -238,11 +234,12 @@ button.phabricator-main-menu-search-dropdown .caret:before { content: "\f107"; font-family: FontAwesome; + color: {$bluetext}; } .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown .phui-icon-view { - color: rgba(255,255,255,.8); + color: {$bluetext}; } .phabricator-main-menu-search-dropdown .caret { @@ -254,7 +251,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { } .phabricator-main-menu-search button:hover { - color: #fff; + color: {$sky}; } .device .phabricator-main-menu-search button { @@ -346,8 +343,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { } .alert-notifications .phui-icon-view { - color: rgba(200,200,200, .4); - text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); + color: {$lightbluetext}; } .device-desktop .alert-notifications:hover { @@ -356,7 +352,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { } .device-desktop .alert-notifications:hover .phui-icon-view { - color: #fff; + color: {$sky}; } .phabricator-main-menu-alert-icon, @@ -365,7 +361,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { height: 18px; float: left; padding: 8px 6px 8px 4px; - color: white; + color: {$sky}; font-size: 18px; line-height: 20px; text-align: right; @@ -378,7 +374,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { .phabricator-main-menu-alert-count, .phabricator-main-menu-message-count { - color: #fff; + color: {$sky}; text-align: center; display: none; float: left; @@ -393,7 +389,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { .alert-unread .phabricator-main-menu-alert-icon, .message-unread .phabricator-main-menu-message-icon { - color: #fff; + color: {$sky}; } .alert-unread .phabricator-main-menu-alert-count, @@ -486,7 +482,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { font-size: 20px; height: 20px; width: 20px; - color: rgba(255,255,255,.8); + color: {$bluetext}; margin: 8px; text-align: center; vertical-align: middle; @@ -503,7 +499,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { .device-desktop .phabricator-application-menu .core-menu-item.phui-list-item-view:hover .phui-list-item-icon.phui-font-fa { - color: #fff; + color: {$sky}; } .device-desktop .phabricator-application-menu @@ -513,7 +509,7 @@ button.phabricator-main-menu-search-dropdown .caret:before { .device-desktop .phabricator-application-menu .core-menu-item.phui-list-item-view:hover { - background-color: rgba(0,0,0,.33); + background-color: rgba(0,0,0,.1); border-radius: 3px; } diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css index b2d7fff276..d31594852c 100644 --- a/webroot/rsrc/css/application/base/standard-page-view.css +++ b/webroot/rsrc/css/application/base/standard-page-view.css @@ -9,8 +9,8 @@ } .phabricator-chromeless-page .phabricator-standard-page { - background: transparent; - border-width: 0px; + background: transparent; + border-width: 0px; } .phabricator-standard-page-footer { @@ -58,18 +58,6 @@ border: 1px solid #999900; } -.workflow-header { - background: #efefef; - padding: 6px 2em; - text-align: right; - margin-bottom: 6px; - border-bottom: 1px solid #dfdfdf; -} - -.workflow-header button { - float: right; -} - a.handle-status-closed { text-decoration: line-through; color: #676767; diff --git a/webroot/rsrc/css/core/core.css b/webroot/rsrc/css/core/core.css index e06abed794..b8a014b6f0 100644 --- a/webroot/rsrc/css/core/core.css +++ b/webroot/rsrc/css/core/core.css @@ -47,7 +47,7 @@ body { direction: ltr; text-align: left; unicode-bidi: embed; - background: #ebecee; + background: #fff; /* By default, the iPhone zooms all text on the page by some percentage when you rotate from portrait mode to landscape mode. Disable this, since it diff --git a/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js b/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js index b1446593f3..042855ee4e 100644 --- a/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js +++ b/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js @@ -114,13 +114,13 @@ JX.behavior('aphlict-dropdown', function(config, statics) { if (menu) { statics.visible = {menu: menu, icon: icon}; if (icon) { - JX.DOM.alterClass(icon, 'white', true); + JX.DOM.alterClass(icon, 'sky', true); } } else { if (statics.visible) { JX.DOM.hide(statics.visible.menu); if (statics.visible.icon) { - JX.DOM.alterClass(statics.visible.icon, 'white', false); + JX.DOM.alterClass(statics.visible.icon, 'sky', false); } } statics.visible = null;