From f72ff51bbec2e020237096f8e4a6353b537ee0d3 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 16 May 2013 13:10:06 -0700 Subject: [PATCH] Cleanup Typeahead and Global Search Typeahead Summary: - Makes text larger (12px, 13px) - Makes global search match notifications container look - Makes the jx typeahead feel a bit more attached, and similar to tokens and other inputs. Test Plan: Tested global search and jx typeahead in maniphest. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5939 --- src/__celerity_resource_map__.php | 80 +++++++++---------- webroot/rsrc/css/aphront/typeahead.css | 27 ++++--- .../css/application/base/main-menu-view.css | 56 +++++-------- 3 files changed, 77 insertions(+), 86 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index bd75dc9667..c9cfcbb4cc 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -900,7 +900,7 @@ celerity_register_resource_map(array( ), 'aphront-typeahead-control-css' => array( - 'uri' => '/res/ef59c20c/rsrc/css/aphront/typeahead.css', + 'uri' => '/res/e4a4cd4b/rsrc/css/aphront/typeahead.css', 'type' => 'css', 'requires' => array( @@ -3148,7 +3148,7 @@ celerity_register_resource_map(array( ), 'phabricator-main-menu-view' => array( - 'uri' => '/res/9263e409/rsrc/css/application/base/main-menu-view.css', + 'uri' => '/res/dedaa329/rsrc/css/application/base/main-menu-view.css', 'type' => 'css', 'requires' => array( @@ -4025,7 +4025,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '58f50abd' => + '47e82bf8' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4067,7 +4067,7 @@ celerity_register_resource_map(array( 34 => 'phabricator-object-item-list-view-css', 35 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/58f50abd/core.pkg.css', + 'uri' => '/res/pkg/47e82bf8/core.pkg.css', 'type' => 'css', ), '26980a1c' => @@ -4258,16 +4258,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '6b1fccc6', - 'aphront-dialog-view-css' => '58f50abd', - 'aphront-error-view-css' => '58f50abd', - 'aphront-form-view-css' => '58f50abd', - 'aphront-list-filter-view-css' => '58f50abd', - 'aphront-pager-view-css' => '58f50abd', - 'aphront-panel-view-css' => '58f50abd', - 'aphront-table-view-css' => '58f50abd', - 'aphront-tokenizer-control-css' => '58f50abd', - 'aphront-tooltip-css' => '58f50abd', - 'aphront-typeahead-control-css' => '58f50abd', + 'aphront-dialog-view-css' => '47e82bf8', + 'aphront-error-view-css' => '47e82bf8', + 'aphront-form-view-css' => '47e82bf8', + 'aphront-list-filter-view-css' => '47e82bf8', + 'aphront-pager-view-css' => '47e82bf8', + 'aphront-panel-view-css' => '47e82bf8', + 'aphront-table-view-css' => '47e82bf8', + 'aphront-tokenizer-control-css' => '47e82bf8', + 'aphront-tooltip-css' => '47e82bf8', + 'aphront-typeahead-control-css' => '47e82bf8', 'differential-changeset-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b', 'differential-inline-comment-editor' => '77e07ff4', @@ -4281,7 +4281,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' => '58f50abd', + 'global-drag-and-drop-css' => '47e82bf8', 'inline-comment-summary-css' => 'dd27a69b', 'javelin-aphlict' => '26980a1c', 'javelin-behavior' => '202a3dd0', @@ -4353,48 +4353,48 @@ celerity_register_resource_map(array( 'javelin-util' => '202a3dd0', 'javelin-vector' => '202a3dd0', 'javelin-workflow' => '202a3dd0', - 'lightbox-attachment-css' => '58f50abd', + 'lightbox-attachment-css' => '47e82bf8', 'maniphest-task-summary-css' => '6b1fccc6', 'maniphest-transaction-detail-css' => '6b1fccc6', 'phabricator-busy' => '26980a1c', 'phabricator-content-source-view-css' => 'dd27a69b', - 'phabricator-core-buttons-css' => '58f50abd', - 'phabricator-core-css' => '58f50abd', - 'phabricator-crumbs-view-css' => '58f50abd', - 'phabricator-directory-css' => '58f50abd', + 'phabricator-core-buttons-css' => '47e82bf8', + 'phabricator-core-css' => '47e82bf8', + 'phabricator-crumbs-view-css' => '47e82bf8', + 'phabricator-directory-css' => '47e82bf8', 'phabricator-drag-and-drop-file-upload' => '77e07ff4', 'phabricator-dropdown-menu' => '26980a1c', 'phabricator-file-upload' => '26980a1c', - 'phabricator-filetree-view-css' => '58f50abd', - 'phabricator-flag-css' => '58f50abd', - 'phabricator-form-view-css' => '58f50abd', - 'phabricator-header-view-css' => '58f50abd', - 'phabricator-jump-nav' => '58f50abd', + 'phabricator-filetree-view-css' => '47e82bf8', + 'phabricator-flag-css' => '47e82bf8', + 'phabricator-form-view-css' => '47e82bf8', + 'phabricator-header-view-css' => '47e82bf8', + 'phabricator-jump-nav' => '47e82bf8', 'phabricator-keyboard-shortcut' => '26980a1c', 'phabricator-keyboard-shortcut-manager' => '26980a1c', - 'phabricator-main-menu-view' => '58f50abd', + 'phabricator-main-menu-view' => '47e82bf8', 'phabricator-menu-item' => '26980a1c', - 'phabricator-nav-view-css' => '58f50abd', + 'phabricator-nav-view-css' => '47e82bf8', 'phabricator-notification' => '26980a1c', - 'phabricator-notification-css' => '58f50abd', - 'phabricator-notification-menu-css' => '58f50abd', - 'phabricator-object-item-list-view-css' => '58f50abd', + 'phabricator-notification-css' => '47e82bf8', + 'phabricator-notification-menu-css' => '47e82bf8', + 'phabricator-object-item-list-view-css' => '47e82bf8', 'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-phtize' => '26980a1c', 'phabricator-prefab' => '26980a1c', 'phabricator-project-tag-css' => '6b1fccc6', - 'phabricator-remarkup-css' => '58f50abd', + 'phabricator-remarkup-css' => '47e82bf8', 'phabricator-shaped-request' => '77e07ff4', - 'phabricator-side-menu-view-css' => '58f50abd', - 'phabricator-standard-page-view' => '58f50abd', + 'phabricator-side-menu-view-css' => '47e82bf8', + 'phabricator-standard-page-view' => '47e82bf8', 'phabricator-textareautils' => '26980a1c', 'phabricator-tooltip' => '26980a1c', - 'phabricator-transaction-view-css' => '58f50abd', - 'phabricator-zindex-css' => '58f50abd', - 'sprite-apps-large-css' => '58f50abd', - 'sprite-gradient-css' => '58f50abd', - 'sprite-icons-css' => '58f50abd', - 'sprite-menu-css' => '58f50abd', - 'syntax-highlighting-css' => '58f50abd', + 'phabricator-transaction-view-css' => '47e82bf8', + 'phabricator-zindex-css' => '47e82bf8', + 'sprite-apps-large-css' => '47e82bf8', + 'sprite-gradient-css' => '47e82bf8', + 'sprite-icons-css' => '47e82bf8', + 'sprite-menu-css' => '47e82bf8', + 'syntax-highlighting-css' => '47e82bf8', ), )); diff --git a/webroot/rsrc/css/aphront/typeahead.css b/webroot/rsrc/css/aphront/typeahead.css index 41d1bafd8c..3004b3814f 100644 --- a/webroot/rsrc/css/aphront/typeahead.css +++ b/webroot/rsrc/css/aphront/typeahead.css @@ -4,32 +4,35 @@ div.jx-typeahead-hardpoint { position: relative; - _zoom: 1; /* Some kind of IE6 fix? */ + _zoom: 1; /* Some kind of IE6 fix? */ /* yes */ } div.jx-typeahead-results { position: absolute; - border-bottom: 1px solid #203b75; + border: 1px solid #96a6c7; + border-top: 0px; padding: 0; - background: #ffffff; - width: 100%; + background: #fefefe; + width: 98%; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); + margin: -1px 1% 0; } div.jx-typeahead-results a.jx-result { - color: #222; + color: #333; display: block; - padding: .4em .5em .45em; - font-size: 11px; - border-width: 0px 1px 1px; - border-style: solid; - border-color: #dddddd #203b75; + padding: 5px 8px; + font-size: 13px; + border-bottom: 1px solid #e7e7e7; + border-top: 1px solid #fff; } div.jx-typeahead-results a.jx-result:hover, div.jx-typeahead-results a.focused { display: block; - background: #3b5998; - color: #ffffff; + background: #dde6f9; + border-top: 1px solid #dde6f9; + border-bottom: 1px solid #d0dbf3; 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 ae073054cb..9a09c46eff 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -107,6 +107,7 @@ padding: 10px 0; position: relative; height: 24px; + margin: 0 8px; } .phabricator-main-menu-search-target { @@ -122,16 +123,10 @@ .device .phabricator-main-menu-search-target { width: 100%; margin-left: -25px; - -} - -.device-desktop .phabricator-main-menu-search-container { - margin: 0 8px 0 50px; } .device .phabricator-main-menu-search-container { padding: 0; - margin: 0 8px ; } .phabricator-main-menu .phabricator-main-menu-search input { @@ -140,6 +135,7 @@ box-shadow: none; transition: none; + color: #999; width: 100%; right: 0; position: absolute; @@ -160,12 +156,16 @@ } .phabricator-main-menu .phabricator-main-menu-search input:focus { - background: #c9c9c9; - border: none; + background: #fff; + color: #333; + border-color: #e7e7e7; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; } .phabricator-main-menu-search input.jx-typeahead-placeholder { - color: #999999; + color: #999; } .phabricator-main-menu-search button { @@ -189,23 +189,18 @@ } .phabricator-main-menu-search-target div.jx-typeahead-results { - border-radius: 4px; - box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35); - border: 1px solid #33393d; -} - -.phabricator-main-menu-search-target div.jx-typeahead-results a.jx-result { - border: 0; -} - -.phabricator-main-menu-search-target div.jx-typeahead-results a.focused, -.phabricator-main-menu-search-target div.jx-typeahead-results a:hover { - background: #3875d7; + background: #ffffff; + word-wrap: break-word; + overflow-y: auto; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); + border: 2px solid #33393d; + border-radius: 3px; + margin-left: 40px; } .phabricator-main-search-typeahead-result { display: block; - padding: 4px 4px 4px 38px; + padding: 1px 4px 1px 38px; background-position: 4px 4px; background-size: 25px 25px; background-repeat: no-repeat; @@ -213,22 +208,15 @@ .phabricator-main-search-typeahead-result .result-name { display: block; + font-size: 12px; font-weight: bold; - color: #444444; -} - -.focused .phabricator-main-search-typeahead-result .result-name, -a:hover .phabricator-main-search-typeahead-result .result-name { - color: #eeeeee; + color: #333; } .phabricator-main-search-typeahead-result .result-type { - color: #888888; -} - -.focused .phabricator-main-search-typeahead-result .result-type, -a:hover .phabricator-main-search-typeahead-result .result-type { - color: #dddddd; + color: #888; + font-size: 11px; + font-weight: normal; }