Admin bar script/style improvements. props ocean90, see #15308.

git-svn-id: http://svn.automattic.com/wordpress/trunk@16862 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
nacin 2010-12-10 18:47:21 +00:00
parent 052500b76f
commit 4e386b29ce
7 changed files with 156 additions and 237 deletions

View File

@ -121,16 +121,16 @@ function wp_admin_bar_my_sites_menu() {
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
// @todo Replace with some favicon lookup.
//$blavatar = '<img src="' . esc_url( blavatar_url( blavatar_domain( $blog->siteurl ), 'img', 16, $default ) ) . '" alt="Blavatar" width="16" height="16" />';
$blavatar = '<img src="' . esc_url($default) . '" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" />';
$blavatar = '<img src="' . esc_url($default) . '" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';
$marker = '';
if ( strlen($blog->blogname) > 15 )
if ( strlen($blog->blogname) > 18 )
$marker = '...';
if ( empty( $blog->blogname ) )
$blogname = $blog->domain;
else
$blogname = substr( $blog->blogname, 0, 15 ) . $marker;
$blogname = substr( $blog->blogname, 0, 18 ) . $marker;
if ( ! isset( $blog->visible ) || $blog->visible === true ) {
$wp_admin_bar->add_menu( array( 'parent' => 'my-blogs', 'id' => 'blog-' . $blog->userblog_id, 'title' => $blavatar . $blogname, 'href' => get_admin_url($blog->userblog_id), ) );

View File

@ -89,7 +89,7 @@ class WP_Admin_Bar {
function render() {
?>
<div id="wpadminbar" class="snap_nopreview no-grav">
<div id="wpadminbar">
<div class="quicklinks">
<ul>
<?php foreach ( (array) $this->menu as $id => $menu_item ) : ?>

File diff suppressed because one or more lines are too long

View File

@ -13,6 +13,13 @@
min-width: 960px;
}
#wpadminbar a,
#wpadminbar a:hover {
outline: none;
border: none;
text-decoration: none;
}
#wpadminbar ul,
#wpadminbar ul li {
background: none;
@ -23,11 +30,12 @@
z-index: 99999;
}
#wpadminbar ul li img {
vertical-align: middle !important;
margin-right: 8px !important;
border: none !important;
padding: 0 !important;
#wpadminbar .quicklinks ul {
text-align: left;
}
#wpadminbar .quicklinks ul li {
float: left;
}
#wpadminbar .quicklinks > ul > li > a {
@ -43,98 +51,8 @@
border-left-color: #707070;
}
#wpadminbar a {
outline: none;
}
#wpadminbar .avatar {
border: 1px solid #999 !important;
padding: 0 !important;
margin: -3px 5px 0 0 !important;
vertical-align: middle;
float: none;
display: inline !important;
}
#wpadminbar li:hover > ul,
#wpadminbar li.hover > ul {
display: block;
}
#wpadminbar .menupop li:hover > ul,
#wpadminbar .menupop li.hover > ul {
margin-left: 100%;
margin-top: -28px;
}
#wpadminbar .menupop ul li a {
color: #555 !important;
text-shadow: none;
font-weight: normal;
white-space: nowrap;
}
#wpadminbar .menupop a > span {
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 100.4% no-repeat;
padding-right: .8em;
line-height: 28px;
}
#wpadminbar .menupop ul li a > span {
display: block;
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 97.2% no-repeat;
padding-right: 1.5em;
line-height: 28px;
}
#wpadminbar ul li a span#ab-awaiting-mod,
#wpadminbar ul li a span#ab-updates {
display: inline;
background: #eee;
color: #333;
padding: 1px 5px;
font-size: 10px;
font-family: verdana;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: none;
}
#wpadminbar ul li a:hover span#ab-awaiting-mod,
#wpadminbar ul li a:hover span#ab-updates {
background: #fff;
color: #000;
}
#wpadminbar .menupop ul {
-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background: #fff;
display: none;
position: absolute;
border: 1px solid #dfdfdf;
border-top: none !important;
float: none;
}
html>body #wpadminbar .menupop ul {
background: rgba(255,255,255,0.97);
border-color: rgba(0,0,0,0.1);
}
#wpadminbar .menupop li {
float: none;
margin: 0;
padding: 0;
background-image: none;
}
#wpadminbar .quicklinks a {
border: none;
color: #ddd !important;
color: #ddd;
height: 28px;
text-shadow: #555 0px -1px 0px;
display: block;
@ -143,115 +61,140 @@ html>body #wpadminbar .menupop ul {
letter-spacing: normal;
padding: 0 0.85em;
line-height: 28px;
text-decoration: none !important;
}
#wpadminbar .quicklinks li ul li a {
#wpadminbar .quicklinks .menupop ul {
-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background: #fff;
background: rgba(255,255,255,0.97);
display: none;
position: absolute;
border: 1px solid #dfdfdf;
border-top: none;
float: none;
}
#wpadminbar .quicklinks .menupop ul li {
float: none;
}
#wpadminbar .quicklinks .menupop ul li a {
color: #555;
text-shadow: none;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
width: 160px;
}
#wpadminbar .quicklinks a:hover {
text-shadow: #333 0px -1px 0px;
}
#wpadminbar li:hover {
background: #555 url(../images/admin-bar-sprite.png?d=08102010) 0 -282px repeat-x;
}
#wpadminbar li li:hover {
color: #fff !important;
background: #888 url(../images/admin-bar-sprite.png?d=08102010) 0 -222px repeat-x !important;
#wpadminbar .quicklinks .menupop ul li:hover > a {
color: #fff;
text-shadow: #666 0px -1px 0px;
}
#wpadminbar li li:hover > a {
color: #fff !important;
#wpadminbar .quicklinks li:hover > ul,
#wpadminbar .quicklinks li.hover > ul {
display: block;
}
.quicklinks ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
#wpadminbar .quicklinks .menupop li:hover > ul,
#wpadminbar .quicklinks .menupop li.hover > ul {
margin-left: 100%;
margin-top: -28px;
}
.quicklinks ul li {
float: left;
margin: 0;
#wpadminbar .quicklinks li:hover {
background: #555 url(../images/admin-bar-sprite.png?d=08102010) 0 -282px repeat-x;
}
#wpadminbar .quicklinks .menupop li:hover {
background: #888 url(../images/admin-bar-sprite.png?d=08102010) 0 -222px repeat-x;
}
#adminbarsearch {
#wpadminbar .quicklinks .menupop a > span {
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 100.4% no-repeat;
padding-right: .8em;
}
#wpadminbar .quicklinks .menupop ul li a > span {
display: block;
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 97.2% no-repeat;
padding-right: 1.5em;
}
#wpadminbar .quicklinks a span#ab-awaiting-mod,
#wpadminbar .quicklinks a span#ab-updates {
background: #eee;
color: #333;
text-shadow: none;
display: inline;
padding: 2px 5px;
font-size: 10px;
font-weight: bold;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#wpadminbar .quicklinks a:hover span#ab-awaiting-mod,
#wpadminbar .quicklinks a:hover span#ab-updates {
background: #fff;
color: #000;
}
#wpadminbar .quicklinks li.ab-me a {
border: none;
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 59.8% no-repeat;
}
#wpadminbar .quicklinks li.ab-my-account a {
border-left: none;
}
#wpadminbar .quicklinks li.ab-me:hover {
background: none;
}
#wpadminbar .quicklinks li.ab-me a img.avatar {
border: 1px solid #999;
margin: 5px 2px 0 -4px;
background: #eee;
width: 16px;
height: 16px;
}
#wpadminbar .quicklinks .menupop li a img.blavatar {
vertical-align: middle;
margin-right: 8px;
}
#wpadminbar #adminbarsearch {
float: right;
height: 18px;
padding: 3px;
}
#adminbarsearch * {
#wpadminbar #adminbarsearch .adminbar-input {
color: #555;
font-size: 12px;
}
#wpadminbar li.ab-me:hover {
background: none;
}
#wpadminbar li.ab-me > a {
line-height: 18px !important;
border: none !important;
background: url(../images/admin-bar-sprite.png?d=08102010) 100% 59.8% no-repeat;
height: 28px;
padding: 0 1.15em 0 0.7em;
}
#wpadminbar li.ab-blog > a:hover {
background-position: 67% 59.8%;
}
#wpadminbar li.ab-me img.avatar {
margin: 4px 0 0 0 !important;
vertical-align: middle;
background: #eee;
width: 16px !important;
height: 16px !important;
}
#wpadminbar li.ab-my-account a {
border-left: none !important;
padding-left: 0.7em !important;
margin-top: 0 !important;
}
#wpadminbar ul li img {
width: 16px !important;
height: 16px !important;
}
#wpadminbar #adminbar-search {
line-height: normal !important;
width: 140px !important;
margin-top: 0px !important;
}
.adminbar-input {
display: block !important;
float: left !important;
font: 12px Arial, Helvetica, sans-serif !important;
border: 1px solid #626262 !important;
padding: 2px 3px !important;
margin: 0 3px 0 0 !important;
background: #ddd url(../images/admin-bar-sprite.png?d=08102010) top left no-repeat !important;
-webkit-border-radius: 0 !important;
-khtml-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
width: 140px;
display: block;
float: left;
font: 12px Arial, Helvetica, sans-serif;
border: 1px solid #626262;
padding: 2px 3px;
margin: 0 3px 0 0;
background: #ddd url(../images/admin-bar-sprite.png?d=08102010) top left no-repeat;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
outline: none;
text-shadow: 0 1px 0 #fff;
}
button.adminbar-button {
#wpadminbar #adminbarsearch .adminbar-button {
position: relative;
border: 0;
cursor: pointer;
@ -261,58 +204,43 @@ button.adminbar-button {
background: url(../images/admin-bar-sprite.png?d=08102010) right -107px no-repeat;
padding: 0 14px 0 0;
text-align: center;
outline: none;
}
button.adminbar-button span {
#wpadminbar #adminbarsearch .adminbar-button span {
position: relative;
display: block;
white-space: nowrap;
height: 19px;
background: url(../images/admin-bar-sprite.png?d=08102010) left -69px no-repeat;
padding: 3px 0 0 14px;
font: 12px Arial, Helvetica, sans-serif !important;
font-weight: bold !important;
color: #444 !important;
text-shadow: 0px 1px 0px #eee !important;
font: 12px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #444;
text-shadow: 0px 1px 0px #eee;
}
button.adminbar-button:active {
background-position: right -184px !important;
text-shadow: 0px 1px 0px #eee !important;
#wpadminbar #adminbarsearch .adminbar-button:active {
background-position: right -184px;
text-shadow: 0px 1px 0px #eee;
}
button.adminbar-button:hover span {
color: #000 !important;
#wpadminbar #adminbarsearch .adminbar-button:hover span {
color: #000;
}
button.adminbar-button:active span {
background-position: left -146px !important;
#wpadminbar #adminbarsearch .adminbar-button:active span {
background-position: left -146px;
}
button.adminbar-button::-moz-focus-inner {
#wpadminbar #adminbarsearch .adminbar-button::-moz-focus-inner {
border: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
button.adminbar-button span {
margin-top: -1px;
}
}
/**
* IE 6-targeted rules
*/
* html #wpadminbar,
* html #wpadminbar .menupop a span,
* html #wpadminbar .menupop ul li a:hover,
* html .quicklinks a:hover,
* html #wpadminbar .menupop:hover {
background-image: none !important;
}
* html #wpadminbar {
overflow: hidden;
position: absolute;
@ -322,16 +250,9 @@ button.adminbar-button::-moz-focus-inner {
float: left;
}
* html #adminbarsearch-wrap {
position: absolute;
top: 0;
* html #wpadminbar,
* html #wpadminbar .menupop a span,
* html #wpadminbar .quicklinks li,
* html #wpadminbar .quicklinks li:hover {
background-image: none;
}
* html #wpadminbar ul,
* html #wpadminbar ul li {
zoom: 1;
}
/**
* End IE 6-targeted rules
*/

View File

@ -28,14 +28,14 @@
while ( t && t != aB && t != d ) {
if( 'LI' == t.nodeName.toUpperCase() ) {
ancestors[ ancestors.length ] = t;
id = getTOID(t);
id = getTOID(t);
if ( id )
clearTimeout( id );
t.className = t.className ? ( t.className.replace(hc, '') + ' hover' ) : 'hover';
}
t = t.parentNode;
}
/* remove the hover class for any objects not in the immediate element's ancestry */
while ( i-- ) {
inA = false;
@ -44,9 +44,8 @@
if ( ancestors[ ancestorLength ] == q[i][1] )
inA = true;
}
/* keep delayed hover on mu (superadmin) menu because it's so easy to mouse away from */
if ( ! inA && -1 == q[i][1].className.indexOf('ab-superadmin') )
if ( ! inA )
q[i][1].className = q[i][1].className ? q[i][1].className.replace(hc, '') : '';
}
},
@ -67,7 +66,6 @@
clickShortlink = function(e) {
var t = e.target || e.srcElement, links, i;
if ( 'undefined' == typeof adminBarL10n )
return;
@ -95,7 +93,7 @@
return false;
}
}
alert( adminBarL10n.noShortlink );
return false;
}
@ -104,7 +102,7 @@
addEvent(w, 'load', function() {
var b = d.getElementsByTagName('body')[0],
s = d.getElementById('adminbar-search');
aB = d.getElementById('wpadminbar');
if ( b && aB ) {
@ -132,7 +130,7 @@
this.value = this.getAttribute('title') == this.value ? '' : this.value;
}
}
if ( w.location.hash )
w.scrollBy(0,-32);
});

View File

@ -1 +1 @@
(function(i,j){var c=function(m,l,d){if(m.addEventListener){m.addEventListener(l,d,false)}else{if(m.attachEvent){m.attachEvent("on"+l,function(){return d.call(m,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],g=function(l){var d=a.length;while(d--){if(a[d]&&l==a[d][1]){return a[d][0]}}return false},h=function(l){var m=[],p=0,o,d=a.length,n;while(l&&l!=e&&l!=i){if("LI"==l.nodeName.toUpperCase()){m[m.length]=l;o=g(l);if(o){clearTimeout(o)}l.className=l.className?(l.className.replace(f,"")+" hover"):"hover"}l=l.parentNode}while(d--){n=false;p=m.length;while(p--){if(m[p]==a[d][1]){n=true}}if(!n&&-1==a[d][1].className.indexOf("ab-superadmin")){a[d][1].className=a[d][1].className?a[d][1].className.replace(f,""):""}}},k=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(l){var m=setTimeout(function(){l.className=l.className?l.className.replace(f,""):""},500);a[a.length]=[m,l]})(d)}d=d.parentNode}},b=function(n){var m=n.target||n.srcElement,d,l;if("undefined"==typeof adminBarL10n){return}while(m&&m!=e&&m!=i&&(!m.className||-1==m.className.indexOf("ab-get-shortlink"))){m=m.parentNode}if(m&&m.className&&-1!=m.className.indexOf("ab-get-shortlink")){d=i.getElementsByTagName("link");if(!d.length){d=i.links}l=d.length;if(n.preventDefault){n.preventDefault()}n.returnValue=false;while(l--){if(d[l]&&"shortlink"==d[l].getAttribute("rel")){prompt(adminBarL10n.url,d[l].href);return false}}alert(adminBarL10n.noShortlink);return false}};c(j,"load",function(){var d=i.getElementsByTagName("body")[0],l=i.getElementById("adminbar-search");e=i.getElementById("wpadminbar");if(d&&e){d.appendChild(e);c(e,"mouseover",function(m){h(m.target||m.srcElement)});c(e,"mouseout",function(m){k(m.target||m.srcElement)});c(e,"click",b)}if(l){if(""==l.value){l.value=l.getAttribute("title")}l.onblur=function(){this.value=""==this.value?this.getAttribute("title"):this.value};l.onfocus=function(){this.value=this.getAttribute("title")==this.value?"":this.value}}if(j.location.hash){j.scrollBy(0,-32)}})})(document,window);
(function(i,j){var c=function(m,l,d){if(m.addEventListener){m.addEventListener(l,d,false)}else{if(m.attachEvent){m.attachEvent("on"+l,function(){return d.call(m,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],g=function(l){var d=a.length;while(d--){if(a[d]&&l==a[d][1]){return a[d][0]}}return false},h=function(l){var m=[],p=0,o,d=a.length,n;while(l&&l!=e&&l!=i){if("LI"==l.nodeName.toUpperCase()){m[m.length]=l;o=g(l);if(o){clearTimeout(o)}l.className=l.className?(l.className.replace(f,"")+" hover"):"hover"}l=l.parentNode}while(d--){n=false;p=m.length;while(p--){if(m[p]==a[d][1]){n=true}}if(!n){a[d][1].className=a[d][1].className?a[d][1].className.replace(f,""):""}}},k=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(l){var m=setTimeout(function(){l.className=l.className?l.className.replace(f,""):""},500);a[a.length]=[m,l]})(d)}d=d.parentNode}},b=function(n){var m=n.target||n.srcElement,d,l;if("undefined"==typeof adminBarL10n){return}while(m&&m!=e&&m!=i&&(!m.className||-1==m.className.indexOf("ab-get-shortlink"))){m=m.parentNode}if(m&&m.className&&-1!=m.className.indexOf("ab-get-shortlink")){d=i.getElementsByTagName("link");if(!d.length){d=i.links}l=d.length;if(n.preventDefault){n.preventDefault()}n.returnValue=false;while(l--){if(d[l]&&"shortlink"==d[l].getAttribute("rel")){prompt(adminBarL10n.url,d[l].href);return false}}alert(adminBarL10n.noShortlink);return false}};c(j,"load",function(){var d=i.getElementsByTagName("body")[0],l=i.getElementById("adminbar-search");e=i.getElementById("wpadminbar");if(d&&e){d.appendChild(e);c(e,"mouseover",function(m){h(m.target||m.srcElement)});c(e,"mouseout",function(m){k(m.target||m.srcElement)});c(e,"click",b)}if(l){if(""==l.value){l.value=l.getAttribute("title")}l.onblur=function(){this.value=""==this.value?this.getAttribute("title"):this.value};l.onfocus=function(){this.value=this.getAttribute("title")==this.value?"":this.value}}if(j.location.hash){j.scrollBy(0,-32)}})})(document,window);

View File

@ -262,7 +262,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), '20100925' );
$scripts->add_data( 'user-profile', 'group', 1 );
$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20101126');
$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20101210');
$scripts->add_data( 'admin-bar', 'group', 1 );
$scripts->localize( 'admin-bar', 'adminBarL10n', array(
'url' => __( 'URL:' ),
@ -516,7 +516,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100907' );
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20101209' );
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20101210' );
$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20101119' );
$styles->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/css/wplink$suffix.css", array(), '20101206' );