From c4add5af9b75047c980008c45ead727131544263 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 27 May 2014 15:26:16 -0700 Subject: [PATCH] Common Colors, Spacing for Menus and Typeaheads Summary: Adds more consistent colors and spacing to notifications, conpherence dropdowns, search dropdowns, and typeaheads. Test Plan: Tested Notifications, menu and page. Conpherence, menu and page, Search, and Typeaheads. Reviewers: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9313 --- resources/celerity/map.php | 22 ++++---- .../celerity/CelerityResourceTransformer.php | 2 + webroot/rsrc/css/aphront/typeahead.css | 11 ++-- .../css/application/base/main-menu-view.css | 14 ++--- .../application/base/notification-menu.css | 30 +++++------ .../rsrc/css/application/conpherence/menu.css | 15 +++--- .../application/conpherence/notification.css | 52 +++++++------------ 7 files changed, 66 insertions(+), 80 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index df1e8d34aa..5a61354495 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ return array( 'names' => array( - 'core.pkg.css' => '8b46eb01', + 'core.pkg.css' => '45c8100d', 'core.pkg.js' => '7db41c19', 'darkconsole.pkg.js' => 'ca8671ce', 'differential.pkg.css' => 'fbf57382', @@ -34,19 +34,19 @@ return array( 'rsrc/css/aphront/tooltip.css' => '9c90229d', 'rsrc/css/aphront/transaction.css' => 'ce491938', 'rsrc/css/aphront/two-column.css' => '16ab3ad2', - 'rsrc/css/aphront/typeahead.css' => '1f4c9e23', + 'rsrc/css/aphront/typeahead.css' => 'a989b5b3', 'rsrc/css/application/auth/auth.css' => '1e655982', - 'rsrc/css/application/base/main-menu-view.css' => '5f0e9e05', - 'rsrc/css/application/base/notification-menu.css' => '99ffef72', + 'rsrc/css/application/base/main-menu-view.css' => '5f08823b', + 'rsrc/css/application/base/notification-menu.css' => '8637a3db', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '137e794e', 'rsrc/css/application/base/standard-page-view.css' => '517cdfb1', 'rsrc/css/application/chatlog/chatlog.css' => '852140ff', 'rsrc/css/application/config/config-options.css' => '7fedf08b', 'rsrc/css/application/config/config-template.css' => '25d446d6', 'rsrc/css/application/config/setup-issue.css' => '69e640e7', - 'rsrc/css/application/conpherence/menu.css' => 'c5fe56f9', + 'rsrc/css/application/conpherence/menu.css' => '3690ec7a', 'rsrc/css/application/conpherence/message-pane.css' => '7703a9a9', - 'rsrc/css/application/conpherence/notification.css' => '403cf598', + 'rsrc/css/application/conpherence/notification.css' => '04a6e10a', 'rsrc/css/application/conpherence/update.css' => '1099a660', 'rsrc/css/application/conpherence/widget-pane.css' => 'bf275a6c', 'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4', @@ -501,12 +501,12 @@ return array( 'aphront-tokenizer-control-css' => '36903077', 'aphront-tooltip-css' => '9c90229d', 'aphront-two-column-view-css' => '16ab3ad2', - 'aphront-typeahead-control-css' => '1f4c9e23', + 'aphront-typeahead-control-css' => 'a989b5b3', 'auth-css' => '1e655982', 'config-options-css' => '7fedf08b', - 'conpherence-menu-css' => 'c5fe56f9', + 'conpherence-menu-css' => '3690ec7a', 'conpherence-message-pane-css' => '7703a9a9', - 'conpherence-notification-css' => '403cf598', + 'conpherence-notification-css' => '04a6e10a', 'conpherence-update-css' => '1099a660', 'conpherence-widget-pane-css' => 'bf275a6c', 'differential-changeset-view-css' => 'f234b888', @@ -710,11 +710,11 @@ return array( 'phabricator-jump-nav' => 'f0c5e726', 'phabricator-keyboard-shortcut' => '1ae869f2', 'phabricator-keyboard-shortcut-manager' => 'ad7a69ca', - 'phabricator-main-menu-view' => '5f0e9e05', + 'phabricator-main-menu-view' => '5f08823b', 'phabricator-nav-view-css' => '9283c2df', 'phabricator-notification' => '0c6946e7', 'phabricator-notification-css' => 'ef2c9b34', - 'phabricator-notification-menu-css' => '99ffef72', + 'phabricator-notification-menu-css' => '8637a3db', 'phabricator-object-selector-css' => '029a133d', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '41ed7994', diff --git a/src/infrastructure/celerity/CelerityResourceTransformer.php b/src/infrastructure/celerity/CelerityResourceTransformer.php index 327785af39..d17b33d63c 100644 --- a/src/infrastructure/celerity/CelerityResourceTransformer.php +++ b/src/infrastructure/celerity/CelerityResourceTransformer.php @@ -194,6 +194,8 @@ final class CelerityResourceTransformer { 'charcoal' => '#4b4d51', 'backdrop' => '#c4cde0', 'hovergrey' => '#c5cbcf', + 'hoverblue' => '#eceff5', + 'hoverborder' => '#dfe1e9', // Base Greys 'lightgreyborder' => '#C7CCD9', diff --git a/webroot/rsrc/css/aphront/typeahead.css b/webroot/rsrc/css/aphront/typeahead.css index bd889bb571..05461e5af5 100644 --- a/webroot/rsrc/css/aphront/typeahead.css +++ b/webroot/rsrc/css/aphront/typeahead.css @@ -9,7 +9,7 @@ div.jx-typeahead-hardpoint { div.jx-typeahead-results { position: absolute; - border: 1px solid #96a6c7; + border: 1px solid {$hoverborder}; border-top: 0px; padding: 0; background: #fefefe; @@ -25,19 +25,16 @@ div.jx-typeahead-results { } div.jx-typeahead-results a.jx-result { - color: #333; + color: {$darkgreytext}; display: block; font-size: 13px; - border-bottom: 1px solid #e7e7e7; - border-top: 1px solid #fff; + border-top: 1px solid {$hoverborder}; } div.jx-typeahead-results a.jx-result:hover, div.jx-typeahead-results a.focused { display: block; - background: {$lightblue}; - border-top: 1px solid {$thinblueborder}; - border-bottom: 1px solid {$thinblueborder}; + background: {$hoverblue}; text-decoration: none; } diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css index ec53df1f28..b9dfdde017 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -197,25 +197,25 @@ background: #ffffff; word-wrap: break-word; overflow-y: auto; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); - border: 2px solid #33393d; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); + border: {$blueborder}; border-radius: 3px; margin-left: 40px; } .phabricator-main-search-typeahead-result { display: block; - padding: 6px 12px 6px 46px; - background-position: 12px 9px; - background-size: 25px 25px; + padding: 6px 8px 8px 44px; + background-position: 8px; + background-size: 30px 30px; background-repeat: no-repeat; } .phabricator-main-search-typeahead-result .result-name { display: block; - font-size: 12px; + font-size: 13px; font-weight: bold; - color: #333; + color: {$darkgreytext}; } .phabricator-main-search-typeahead-result .result-type { diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css index ffe636186d..4f2d230523 100644 --- a/webroot/rsrc/css/application/base/notification-menu.css +++ b/webroot/rsrc/css/application/base/notification-menu.css @@ -3,13 +3,12 @@ */ .phabricator-notification-menu { - background: #ffffff; + background: #fff; font-size: 11px; word-wrap: break-word; overflow-y: auto; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); - border: 2px solid #33393d; - border-top-width: 0; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); + border: 1px solid {$blueborder}; border-radius: 3px; } @@ -32,7 +31,7 @@ } .device-phone .phabricator-notification-menu { - border-bottom: 1px solid #222222; + border-bottom: 1px solid {$thinblueborder}; width: 94%; max-width: 390px; top: 42px !important; @@ -42,7 +41,7 @@ } .phabricator-notification { - padding: 6px; + padding: 6px 8px; } .phabricator-notification-menu .phabricator-notification { @@ -50,11 +49,11 @@ } .device-desktop .phabricator-notification-menu .phabricator-notification:hover { - background: #e6ebf5; + background: {$hoverblue}; } .phabricator-notification + .phabricator-notification { - border-top: 1px solid #e9e9e9; + border-top: 1px solid {$hoverborder}; } .no-notifications { @@ -63,15 +62,14 @@ .phabricator-notification-list .phabricator-notification-unread, .phabricator-notification-menu .phabricator-notification-unread { - background: #eceff5; - border-color: #e3e8f0; + background: {$hoverblue}; } .phabricator-notification-header { font-weight: bold; - padding: 6px; + padding: 10px 8px; font-size: 12px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid {$thinblueborder}; } .phabricator-notification-header a { @@ -81,14 +79,16 @@ .phabricator-notification-header .phabricator-notification-clear-all { color: #18559D; float: right; + font-weight: normal; } .phabricator-notification-view-all { text-align: center; font-weight: bold; - background: #f7f7f7; - border-top: 1px solid #e9e9e9; + background: {$greybackground}; + border-top: 1px solid {$thinblueborder}; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; - padding: 6px; + padding: 8px; + font-size: 12px; } diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css index 3cc6c3e4ff..feaf76bdb5 100644 --- a/webroot/rsrc/css/application/conpherence/menu.css +++ b/webroot/rsrc/css/application/conpherence/menu.css @@ -132,7 +132,7 @@ color: {$darkbluetext}; text-shadow: 0px 1px 1px #fff; overflow: hidden; - width: 180px; + width: 160px; text-overflow: ellipsis; } @@ -147,14 +147,13 @@ .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-unread-count { position: absolute; - left: 35px; - top: 3px; - background: {$red}; - border-radius: 10px; - color: #FFF; + right: 8px; + top: 15px; + background: {$blue}; + border-radius: 2px; + color: #fff; font-weight: bold; - padding: 1px 5px 2px; - border: 1px solid #333; + padding: 0 5px 1px; font-size: 11px; } diff --git a/webroot/rsrc/css/application/conpherence/notification.css b/webroot/rsrc/css/application/conpherence/notification.css index ec55ad0b3a..a12c13dff9 100644 --- a/webroot/rsrc/css/application/conpherence/notification.css +++ b/webroot/rsrc/css/application/conpherence/notification.css @@ -9,7 +9,7 @@ .phabricator-notification .conpherence-menu-item-view { display: block; - height: 55px; + height: 46px; overflow: hidden; position: relative; text-decoration: none; @@ -20,60 +20,48 @@ .phabricator-notification .conpherence-menu-item-view .conpherence-menu-item-image { - top: 6px; - left: 6px; + top: 8px; + left: 8px; display: block; position: absolute; - width: 35px; - height: 35px; - background-size: 35px; - border: 4px solid #e7e7e7; - border-radius: 3px; + width: 30px; + height: 30px; + background-size: 30px; } .phabricator-notification .conpherence-menu-item-view .conpherence-menu-item-title { display: block; - margin-top: 12px; - margin-left: 58px; + margin-top: 8px; + margin-left: 46px; text-align: left; font-weight: bold; font-size: 13px; - color: #333; - overflow: hidden; - width: 220px; + color: {$darkgreytext}; + width: 280px; text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .phabricator-notification .conpherence-menu-item-view .conpherence-menu-item-subtitle { display: block; - color: #a1a5a9; + color: {$lightgreytext}; font-size: 11px; margin-top: 2px; - margin-left: 58px; - font-style: italic; + margin-left: 46px; } .phabricator-notification .conpherence-menu-item-view .conpherence-menu-item-unread-count { position: absolute; - left: 35px; - top: 3px; - background: {$red}; - border-radius: 10px; - color: #FFF; - font-weight: bold; - padding: 1px 5px 2px; - border: 1px solid #333; - font-size: 11px; -} - -.phabricator-notification .conpherence-menu-item-view -.conpherence-menu-item-date { - position: absolute; + right: 8px; top: 15px; - right: 16px; - color: #a1a5a9; + background: {$blue}; + border-radius: 2px; + color: #fff; + font-weight: bold; + padding: 0 5px 1px; font-size: 11px; }