From de86b02f42a1e5f4b9525c1f8e48f1fa38989874 Mon Sep 17 00:00:00 2001 From: ryan Date: Wed, 2 May 2012 21:33:43 +0000 Subject: [PATCH] Styling and RTL style fixes for user/site autocomplete. Props ocean90, helenyhou. fixes #20584 git-svn-id: http://core.svn.wordpress.org/trunk@20705 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/colors-classic.dev.css | 28 +++++++++++++++++++++++++++- wp-admin/css/colors-fresh.dev.css | 12 +++++++++++- wp-admin/css/wp-admin-rtl.dev.css | 12 ++++++++++++ wp-admin/css/wp-admin.dev.css | 18 +++++++++++++----- wp-admin/js/site-search.dev.js | 4 +++- wp-admin/js/user-search.dev.js | 12 +++++++++--- 6 files changed, 75 insertions(+), 11 deletions(-) diff --git a/wp-admin/css/colors-classic.dev.css b/wp-admin/css/colors-classic.dev.css index ea889cf08..3d49e1be7 100644 --- a/wp-admin/css/colors-classic.dev.css +++ b/wp-admin/css/colors-classic.dev.css @@ -48,6 +48,22 @@ select { color: #000; } +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="file"]:focus, +input[type="button"]:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +select:focus { + border-color: #d1e5ee; +} + kbd, code { background: #eaeaea; @@ -76,7 +92,8 @@ a.page-numbers:hover { body, #wpbody, -.form-table .pre { +.form-table .pre, +.ui-autocomplete li a { color: #333; } @@ -315,6 +332,15 @@ td.help { color: #9a9a9a; } +.ui-autocomplete { + background-color: #eff8ff; + border-color: #d1e5ee; +} + +.ui-autocomplete li a.ui-state-hover { + background-color: #def1ff; +} + .post-com-count { background-image: url(../images/bubble_bg.gif); color: #fff; diff --git a/wp-admin/css/colors-fresh.dev.css b/wp-admin/css/colors-fresh.dev.css index 4347dea2a..b39e42eb1 100644 --- a/wp-admin/css/colors-fresh.dev.css +++ b/wp-admin/css/colors-fresh.dev.css @@ -87,7 +87,8 @@ a.page-numbers:hover { body, #wpbody, -.form-table .pre { +.form-table .pre, +.ui-autocomplete li a { color: #333; } @@ -322,6 +323,15 @@ td.help { color: #9a9a9a; } +.ui-autocomplete { + background-color: #efefef; + border-color: #bbb; +} + +.ui-autocomplete li a.ui-state-hover { + background-color: #ddd; +} + .post-com-count { background-image: url(../images/bubble_bg.gif); color: #fff; diff --git a/wp-admin/css/wp-admin-rtl.dev.css b/wp-admin/css/wp-admin-rtl.dev.css index 2b6fb6056..f7afebc4e 100644 --- a/wp-admin/css/wp-admin-rtl.dev.css +++ b/wp-admin/css/wp-admin-rtl.dev.css @@ -117,6 +117,18 @@ input[type=password] { direction: ltr; } +input[type="text"].ui-autocomplete-loading { + background: transparent url('../images/loading.gif') no-repeat left center; +} + +ul#add-to-blog-users { + margin: 0 14px 0 0; +} + +.ui-autocomplete li { + text-align: right; +} + /*------------------------------------------------------------------------------ 3.0 - Actions ------------------------------------------------------------------------------*/ diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index f0f6d12ca..2a7cca0ef 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -874,21 +874,29 @@ ul#add-to-blog-users { margin: 0 0 0 14px; } +.ui-autocomplete-input.open { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + .ui-autocomplete { padding: 0; margin: 0; list-style: none; position: absolute; z-index: 10000; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-width: 1px; border-style: solid; + border-top: none; - background-color: #ececec; - border-color: gray; + background-color: #efefef; + border-color: #bbb; } .ui-autocomplete li { - padding: 2px 5px; + margin-bottom: 0; white-space: nowrap; text-align: left; color: #101010; @@ -897,12 +905,12 @@ ul#add-to-blog-users { .ui-autocomplete li a { display: block; height: 100%; - padding: 2px 5px; + padding: 4px 10px; color: #333; } .ui-autocomplete li a.ui-state-hover { - background-color: #f0f0b8; + background-color: #ddd; cursor: pointer; } diff --git a/wp-admin/js/site-search.dev.js b/wp-admin/js/site-search.dev.js index c98929418..8c8941088 100644 --- a/wp-admin/js/site-search.dev.js +++ b/wp-admin/js/site-search.dev.js @@ -2,6 +2,8 @@ jQuery( function($) { $( '#site-search-input' ).autocomplete({ source: ajaxurl + '?action=autocomplete-site', delay: 500, - minLength: 2 + minLength: 2, + open: function(e, ui) { $(this).addClass('open'); }, + close: function(e, ui) { $(this).removeClass('open'); } }); }); diff --git a/wp-admin/js/user-search.dev.js b/wp-admin/js/user-search.dev.js index 702dd6063..e8d7fec16 100644 --- a/wp-admin/js/user-search.dev.js +++ b/wp-admin/js/user-search.dev.js @@ -4,18 +4,24 @@ jQuery( function($) { $( '#adduser-email, #newuser' ).autocomplete({ source: ajaxurl + '?action=autocomplete-user&autocomplete_type=add' + id, delay: 500, - minLength: 2 + minLength: 2, + open: function(e, ui) { $(this).addClass('open'); }, + close: function(e, ui) { $(this).removeClass('open'); } }); $( '#user-search-input' ).autocomplete({ source: ajaxurl + '?action=autocomplete-user&autocomplete_type=search' + id, delay: 500, - minLength: 2 + minLength: 2, + open: function(e, ui) { $(this).addClass('open'); }, + close: function(e, ui) { $(this).removeClass('open'); } }); $( '#all-user-search-input' ).autocomplete({ source: ajaxurl + '?action=autocomplete-user&autocomplete_type=search-all' + id, delay: 500, - minLength: 2 + minLength: 2, + open: function(e, ui) { $(this).addClass('open'); }, + close: function(e, ui) { $(this).removeClass('open'); } }); });