Changeset 20705

Timestamp:

05/02/2012 09:33:43 PM (13 years ago)

Author:

ryan

Message:

Styling and RTL style fixes for user/site autocomplete. Props ocean90, helenyhou. fixes #20584

Location:

trunk/wp-admin

Files:

• css/colors-classic.dev.css (modified) (3 diffs)
• css/colors-fresh.dev.css (modified) (2 diffs)
• css/wp-admin-rtl.dev.css (modified) (1 diff)
• css/wp-admin.dev.css (modified) (3 diffs)
• js/site-search.dev.js (modified) (1 diff)
• js/user-search.dev.js (modified) (3 diffs)

trunk/wp-admin/css/colors-classic.dev.css

@@ -49 +49 @@
 }
 
+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 {
@@ -77 +93 @@
 body,
 #wpbody,
-.form-table .pre {
+.form-table .pre,
+.ui-autocomplete li a {
     color: #333;
 }
@@ -314 +331 @@
 td.help {
     color: #9a9a9a;
+}
+
+.ui-autocomplete {
+    background-color: #eff8ff;
+    border-color: #d1e5ee;
+}
+
+.ui-autocomplete li a.ui-state-hover {
+    background-color: #def1ff;
 }
 

trunk/wp-admin/css/colors-fresh.dev.css

@@ -88 +88 @@
 body,
 #wpbody,
-.form-table .pre {
+.form-table .pre,
+.ui-autocomplete li a {
     color: #333;
 }
@@ -321 +322 @@
 td.help {
     color: #9a9a9a;
+}
+
+.ui-autocomplete {
+    background-color: #efefef;
+    border-color: #bbb;
+}
+
+.ui-autocomplete li a.ui-state-hover {
+    background-color: #ddd;
 }
 

trunk/wp-admin/css/wp-admin-rtl.dev.css

@@ -116 +116 @@
 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;
 }
 

trunk/wp-admin/css/wp-admin.dev.css

@@ -875 +875 @@
 }
 
+.ui-autocomplete-input.open {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
 .ui-autocomplete {
     padding: 0;
@@ -881 +886 @@
     position: absolute;
     z-index: 10000;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-width: 1px;
     border-style: solid;
-
-    background-color: #ececec;
-    border-color: gray;
+    border-top: none;
+
+    background-color: #efefef;
+    border-color: #bbb;
 }
 
 .ui-autocomplete li {
-    padding: 2px 5px;
+    margin-bottom: 0;
     white-space: nowrap;
     text-align: left;
@@ -898 +906 @@
     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;
 }

trunk/wp-admin/js/site-search.dev.js

@@ -3 +3 @@
         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'); }
     });
 });

trunk/wp-admin/js/user-search.dev.js

@@ -5 +5 @@
         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'); }
     });
 
@@ -11 +13 @@
         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'); }
     });
 
@@ -17 +21 @@
         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'); }
     });
 });