More admin bar markup improvements. Make primary and secondary submenu groups siblings (and prevent ul nesting issues). see #18197.

git-svn-id: http://svn.automattic.com/wordpress/trunk@19270 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2011-11-14 11:05:37 +00:00
parent 8740d2c65d
commit 9057e02e72
6 changed files with 35 additions and 25 deletions

View File

@ -191,19 +191,25 @@ class WP_Admin_Bar {
<?php <?php
if ( $is_parent ) : if ( $is_parent ) :
?><div class="ab-sub-wrapper"><?php
// Render primary submenu
?><ul class="ab-submenu"><?php ?><ul class="ab-submenu"><?php
foreach ( $node->children->primary as $child_node ) { foreach ( $node->children->primary as $child_node ) {
$this->recursive_render( $child_node ); $this->recursive_render( $child_node );
} }
?></ul><?php
// Render secondary submenu
if ( ! empty( $node->children->secondary ) ): if ( ! empty( $node->children->secondary ) ):
?><ul class="ab-sub-secondary"><?php ?><ul class="ab-submenu ab-sub-secondary"><?php
foreach ( $node->children->secondary as $child_node ) { foreach ( $node->children->secondary as $child_node ) {
$this->recursive_render( $child_node ); $this->recursive_render( $child_node );
} }
?></ul><?php ?></ul><?php
endif; endif;
?></ul><?php
?></div><?php
endif; endif;
if ( ! empty( $node->meta['html'] ) ) if ( ! empty( $node->meta['html'] ) )

File diff suppressed because one or more lines are too long

View File

@ -48,6 +48,8 @@
background-image: linear-gradient(bottom, #373737, #464646 5px); /* proposed W3C Markup */ background-image: linear-gradient(bottom, #373737, #464646 5px); /* proposed W3C Markup */
} }
#wpadminbar .ab-sub-wrapper,
#wpadminbar ul, #wpadminbar ul,
#wpadminbar ul li { #wpadminbar ul li {
background: none; background: none;
@ -97,11 +99,10 @@
margin: 0; margin: 0;
} }
#wpadminbar .quicklinks .menupop ul, #wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input { #wpadminbar .shortlink-input {
margin: 0 0 0 -1px; margin: 0 0 0 -1px;
padding-top: 6px; padding: 0;
padding-bottom: 6px;
-moz-box-shadow: 0 4px 6px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 6px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.2); -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.2);
box-shadow: 0 4px 6px rgba(0,0,0,0.2); box-shadow: 0 4px 6px rgba(0,0,0,0.2);
@ -114,11 +115,15 @@
border-color: #dfdfdf; border-color: #dfdfdf;
} }
#wpadminbar .quicklinks .ab-top-secondary .menupop ul { #wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper {
right: 0; right: 0;
margin: 0 -1px 0 0; margin: 0 -1px 0 0;
} }
#wpadminbar .ab-submenu {
padding: 6px 0;
}
#wpadminbar .selected .shortlink-input { #wpadminbar .selected .shortlink-input {
display: block; display: block;
} }
@ -148,20 +153,20 @@
width: 200px; width: 200px;
} }
#wpadminbar.nojs .quicklinks li:hover > ul, #wpadminbar.nojs li:hover > .ab-sub-wrapper,
#wpadminbar .quicklinks li.hover > ul { #wpadminbar li.hover > .ab-sub-wrapper {
display: block; display: block;
} }
#wpadminbar .quicklinks .menupop li:hover > ul, #wpadminbar .menupop li:hover > .ab-sub-wrapper,
#wpadminbar .quicklinks .menupop li.hover > ul { #wpadminbar .menupop li.hover > .ab-sub-wrapper {
margin-left: 100%; margin-left: 100%;
margin-top: -33px; margin-top: -33px;
border-width: 1px; border-width: 1px;
} }
#wpadminbar .quicklinks .ab-top-secondary .menupop li:hover > ul, #wpadminbar .ab-top-secondary .menupop li:hover > .ab-sub-wrapper,
#wpadminbar .quicklinks .ab-top-secondary .menupop li.hover > ul { #wpadminbar .ab-top-secondary .menupop li.hover > .ab-sub-wrapper {
margin-left: 0; margin-left: 0;
left: inherit; left: inherit;
right: 100%; right: 100%;
@ -222,7 +227,6 @@
border: 0; border: 0;
background: #eee; background: #eee;
margin: 6px 0 -6px;
border-top: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf;
-moz-box-shadow: none; -moz-box-shadow: none;

View File

@ -33,7 +33,7 @@ if ( typeof(jQuery) != 'undefined' ) {
var t = $(this); var t = $(this);
setTimeout(function(){ setTimeout(function(){
if ( !t.siblings('ul').find('a:focus').length ) if ( !t.siblings('div').find('a:focus').length )
t.parent().removeClass('hover'); t.parent().removeClass('hover');
}, 200); }, 200);
}); });

View File

@ -1 +1 @@
if(typeof(jQuery)!="undefined"){if(typeof(jQuery.fn.hoverIntent)=="undefined"){(function(b){b.fn.hoverIntent=function(p,r){var g={sensitivity:7,interval:100,timeout:0};g=b.extend(g,r?{over:p,out:r}:p);var a,f,t,v;var u=function(c){a=c.pageX;f=c.pageY};var w=function(c,d){d.hoverIntent_t=clearTimeout(d.hoverIntent_t);if((Math.abs(t-a)+Math.abs(v-f))<g.sensitivity){b(d).unbind("mousemove",u);d.hoverIntent_s=1;return g.over.apply(d,[c])}else{t=a;v=f;d.hoverIntent_t=setTimeout(function(){w(c,d)},g.interval)}};var s=function(c,d){d.hoverIntent_t=clearTimeout(d.hoverIntent_t);d.hoverIntent_s=0;return g.out.apply(d,[c])};var x=function(e){var d=this;var c=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(c&&c!=this){try{c=c.parentNode}catch(e){c=this}}if(c==this){if(b.browser.mozilla){if(e.type=="mouseout"){d.mtout=setTimeout(function(){q(e,d)},30)}else{if(d.mtout){d.mtout=clearTimeout(d.mtout)}}}return}else{if(d.mtout){d.mtout=clearTimeout(d.mtout)}q(e,d)}};var q=function(e,d){var c=jQuery.extend({},e);if(d.hoverIntent_t){d.hoverIntent_t=clearTimeout(d.hoverIntent_t)}if(e.type=="mouseover"){t=c.pageX;v=c.pageY;b(d).bind("mousemove",u);if(d.hoverIntent_s!=1){d.hoverIntent_t=setTimeout(function(){w(c,d)},g.interval)}}else{b(d).unbind("mousemove",u);if(d.hoverIntent_s==1){d.hoverIntent_t=setTimeout(function(){s(c,d)},g.timeout)}}};return this.mouseover(x).mouseout(x)}})(jQuery)}jQuery(document).ready(function(a){a("#wpadminbar").removeClass("nojq").removeClass("nojs").find("li.menupop").hoverIntent({over:function(b){a(this).addClass("hover")},out:function(b){a(this).removeClass("hover")},timeout:180,sensitivity:7,interval:100});a("#wp-admin-bar-get-shortlink").click(function(b){b.preventDefault();a(this).addClass("selected").children(".shortlink-input").blur(function(){a(this).parents("#wp-admin-bar-get-shortlink").removeClass("selected")}).focus().select()});a(".ab-top-menu > li > a").bind("focus.adminbar",function(){a(this).parent().addClass("hover").find("a").each(function(b,d){var e=a(d),c=e.attr("tabindex");if(c){e.attr("tabindex","0").attr("tabindex",c)}})}).bind("blur.adminbar",function(){var b=a(this);setTimeout(function(){if(!b.siblings("ul").find("a:focus").length){b.parent().removeClass("hover")}},200)});a(".ab-top-menu li ul li a").bind("blur.adminbar",function(){var b=a(this).parents("li.menupop");setTimeout(function(){if(!b.find("a:focus").length){b.removeClass("hover")}},150)})})}else{(function(i,k){var c=function(n,m,d){if(n.addEventListener){n.addEventListener(m,d,false)}else{if(n.attachEvent){n.attachEvent("on"+m,function(){return d.call(n,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],j=new RegExp("\\bselected\\b","g"),g=function(m){var d=a.length;while(d--){if(a[d]&&m==a[d][1]){return a[d][0]}}return false},h=function(s){var n,d,q,m,p,r,u=[],o=0;while(s&&s!=e&&s!=i){if("LI"==s.nodeName.toUpperCase()){u[u.length]=s;d=g(s);if(d){clearTimeout(d)}s.className=s.className?(s.className.replace(f,"")+" hover"):"hover";m=s}s=s.parentNode}if(m&&m.parentNode){p=m.parentNode;if(p&&"UL"==p.nodeName.toUpperCase()){n=p.childNodes.length;while(n--){r=p.childNodes[n];if(r!=m){r.className=r.className?r.className.replace(j,""):""}}}}n=a.length;while(n--){q=false;o=u.length;while(o--){if(u[o]==a[n][1]){q=true}}if(!q){a[n][1].className=a[n][1].className?a[n][1].className.replace(f,""):""}}},l=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(m){var n=setTimeout(function(){m.className=m.className?m.className.replace(f,""):""},500);a[a.length]=[n,m]})(d)}d=d.parentNode}},b=function(p){var n,d,o,m=p.target||p.srcElement;while(true){if(!m||m==i||m==e){return}if(m.id&&m.id=="wp-admin-bar-get-shortlink"){break}m=m.parentNode}if(p.preventDefault){p.preventDefault()}p.returnValue=false;if(-1==m.className.indexOf("selected")){m.className+=" selected"}for(n=0,d=m.childNodes.length;n<d;n++){o=m.childNodes[n];if(o.className&&-1!=o.className.indexOf("shortlink-input")){o.focus();o.select();o.onblur=function(){m.className=m.className?m.className.replace(j,""):""};break}}return false};c(k,"load",function(){e=i.getElementById("wpadminbar");if(i.body&&e){i.body.appendChild(e);if(e.className){e.className=e.className.replace(/nojs/,"")}c(e,"mouseover",function(d){h(d.target||d.srcElement)});c(e,"mouseout",function(d){l(d.target||d.srcElement)});c(e,"click",b)}if(k.location.hash){k.scrollBy(0,-32)}})})(document,window)}; if(typeof(jQuery)!="undefined"){if(typeof(jQuery.fn.hoverIntent)=="undefined"){(function(b){b.fn.hoverIntent=function(p,r){var g={sensitivity:7,interval:100,timeout:0};g=b.extend(g,r?{over:p,out:r}:p);var a,f,t,v;var u=function(c){a=c.pageX;f=c.pageY};var w=function(c,d){d.hoverIntent_t=clearTimeout(d.hoverIntent_t);if((Math.abs(t-a)+Math.abs(v-f))<g.sensitivity){b(d).unbind("mousemove",u);d.hoverIntent_s=1;return g.over.apply(d,[c])}else{t=a;v=f;d.hoverIntent_t=setTimeout(function(){w(c,d)},g.interval)}};var s=function(c,d){d.hoverIntent_t=clearTimeout(d.hoverIntent_t);d.hoverIntent_s=0;return g.out.apply(d,[c])};var x=function(e){var d=this;var c=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(c&&c!=this){try{c=c.parentNode}catch(e){c=this}}if(c==this){if(b.browser.mozilla){if(e.type=="mouseout"){d.mtout=setTimeout(function(){q(e,d)},30)}else{if(d.mtout){d.mtout=clearTimeout(d.mtout)}}}return}else{if(d.mtout){d.mtout=clearTimeout(d.mtout)}q(e,d)}};var q=function(e,d){var c=jQuery.extend({},e);if(d.hoverIntent_t){d.hoverIntent_t=clearTimeout(d.hoverIntent_t)}if(e.type=="mouseover"){t=c.pageX;v=c.pageY;b(d).bind("mousemove",u);if(d.hoverIntent_s!=1){d.hoverIntent_t=setTimeout(function(){w(c,d)},g.interval)}}else{b(d).unbind("mousemove",u);if(d.hoverIntent_s==1){d.hoverIntent_t=setTimeout(function(){s(c,d)},g.timeout)}}};return this.mouseover(x).mouseout(x)}})(jQuery)}jQuery(document).ready(function(a){a("#wpadminbar").removeClass("nojq").removeClass("nojs").find("li.menupop").hoverIntent({over:function(b){a(this).addClass("hover")},out:function(b){a(this).removeClass("hover")},timeout:180,sensitivity:7,interval:100});a("#wp-admin-bar-get-shortlink").click(function(b){b.preventDefault();a(this).addClass("selected").children(".shortlink-input").blur(function(){a(this).parents("#wp-admin-bar-get-shortlink").removeClass("selected")}).focus().select()});a(".ab-top-menu > li > a").bind("focus.adminbar",function(){a(this).parent().addClass("hover").find("a").each(function(b,d){var e=a(d),c=e.attr("tabindex");if(c){e.attr("tabindex","0").attr("tabindex",c)}})}).bind("blur.adminbar",function(){var b=a(this);setTimeout(function(){if(!b.siblings("div").find("a:focus").length){b.parent().removeClass("hover")}},200)});a(".ab-top-menu li ul li a").bind("blur.adminbar",function(){var b=a(this).parents("li.menupop");setTimeout(function(){if(!b.find("a:focus").length){b.removeClass("hover")}},150)})})}else{(function(i,k){var c=function(n,m,d){if(n.addEventListener){n.addEventListener(m,d,false)}else{if(n.attachEvent){n.attachEvent("on"+m,function(){return d.call(n,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],j=new RegExp("\\bselected\\b","g"),g=function(m){var d=a.length;while(d--){if(a[d]&&m==a[d][1]){return a[d][0]}}return false},h=function(s){var n,d,q,m,p,r,u=[],o=0;while(s&&s!=e&&s!=i){if("LI"==s.nodeName.toUpperCase()){u[u.length]=s;d=g(s);if(d){clearTimeout(d)}s.className=s.className?(s.className.replace(f,"")+" hover"):"hover";m=s}s=s.parentNode}if(m&&m.parentNode){p=m.parentNode;if(p&&"UL"==p.nodeName.toUpperCase()){n=p.childNodes.length;while(n--){r=p.childNodes[n];if(r!=m){r.className=r.className?r.className.replace(j,""):""}}}}n=a.length;while(n--){q=false;o=u.length;while(o--){if(u[o]==a[n][1]){q=true}}if(!q){a[n][1].className=a[n][1].className?a[n][1].className.replace(f,""):""}}},l=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(m){var n=setTimeout(function(){m.className=m.className?m.className.replace(f,""):""},500);a[a.length]=[n,m]})(d)}d=d.parentNode}},b=function(p){var n,d,o,m=p.target||p.srcElement;while(true){if(!m||m==i||m==e){return}if(m.id&&m.id=="wp-admin-bar-get-shortlink"){break}m=m.parentNode}if(p.preventDefault){p.preventDefault()}p.returnValue=false;if(-1==m.className.indexOf("selected")){m.className+=" selected"}for(n=0,d=m.childNodes.length;n<d;n++){o=m.childNodes[n];if(o.className&&-1!=o.className.indexOf("shortlink-input")){o.focus();o.select();o.onblur=function(){m.className=m.className?m.className.replace(j,""):""};break}}return false};c(k,"load",function(){e=i.getElementById("wpadminbar");if(i.body&&e){i.body.appendChild(e);if(e.className){e.className=e.className.replace(/nojs/,"")}c(e,"mouseover",function(d){h(d.target||d.srcElement)});c(e,"mouseout",function(d){l(d.target||d.srcElement)});c(e,"click",b)}if(k.location.hash){k.scrollBy(0,-32)}})})(document,window)};

View File

@ -259,7 +259,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), '20110628', 1 ); $scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), '20110628', 1 );
$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20111107', 1 ); $scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20111114', 1 );
$scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wpdialogs' ), '20110929', 1 ); $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wpdialogs' ), '20110929', 1 );
$scripts->localize( 'wplink', 'wpLinkL10n', array( $scripts->localize( 'wplink', 'wpLinkL10n', array(
@ -453,7 +453,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' ); $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' ); $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( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20111111' ); $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20111114' );
$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20111107' ); $styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20111107' );
$styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css", array(), '20111107' ); $styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css", array(), '20111107' );
$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array(), '20111114' ); $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array(), '20111114' );