Toolbar: Allow submenus to be closed with a second tap on touch devices.

Also closes submenus when the admin menu is toggled open, as it opens below and thus can be obscured.

props stephdau, seanchayes.
see #29906.


git-svn-id: https://develop.svn.wordpress.org/trunk@33056 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2015-07-03 03:28:15 +00:00
parent e709e91218
commit e7a184a832
4 changed files with 34 additions and 5 deletions

View File

@ -920,6 +920,10 @@ li#wp-admin-bar-menu-toggle {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #00b9eb;
}
}
/* Smartphone */

View File

@ -752,6 +752,10 @@ $(document).ready( function() {
// Toggle sidebar when toggle is clicked
$( '#wp-admin-bar-menu-toggle' ).on( 'click.wp-responsive', function( event ) {
event.preventDefault();
// close any open toolbar submenus
$adminbar.find( '.hover' ).removeClass( 'hover' );
$wpwrap.toggleClass( 'wp-responsive-open' );
if ( $wpwrap.hasClass( 'wp-responsive-open' ) ) {
$(this).find('a').attr( 'aria-expanded', 'true' );

View File

@ -207,17 +207,17 @@ html:lang(he-il) .rtl #wpadminbar * {
right: 100%;
}
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
background: #32373c;
color: #00b9eb;
}
#wpadminbar > #wp-toolbar li:hover span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
#wpadminbar > #wp-toolbar li.hover span.ab-label,
#wpadminbar > #wp-toolbar a:focus span.ab-label {
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
color: #00b9eb;
}
@ -287,6 +287,16 @@ html:lang(he-il) .rtl #wpadminbar * {
color: #00b9eb;
}
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
color: #b4b9be;
}
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: #00b9eb;
}
#wpadminbar .menupop .menupop > .ab-item:before,
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
position: absolute;

View File

@ -28,6 +28,12 @@ if ( typeof(jQuery) != 'undefined' ) {
e.stopPropagation();
e.preventDefault();
el.addClass('hover');
} else if ( ! $( e.target ).closest( 'div' ).hasClass( 'ab-sub-wrapper' ) ) {
// We're dealing with an already-touch-opened menu genericon (we know el.hasClass('hover')),
// so close it on a second tap and prevent propag and defaults. See #29906
e.stopPropagation();
e.preventDefault();
el.removeClass('hover');
}
if ( unbind ) {
@ -124,8 +130,13 @@ if ( typeof(jQuery) != 'undefined' ) {
});
$('#wpadminbar').click( function(e) {
if ( e.target.id != 'wpadminbar' && e.target.id != 'wp-admin-bar-top-secondary' )
if ( e.target.id != 'wpadminbar' && e.target.id != 'wp-admin-bar-top-secondary' ) {
return;
} else {
adminbar.find( 'li.menupop.hover' ).removeClass( 'hover' );
e.stopPropagation();
return;
}
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'fast');