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

src/wp-admin/css/admin-menu.css

@@ -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 */

src/wp-admin/js/common.js

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

src/wp-includes/css/admin-bar.css

@@ -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;

src/wp-includes/js/admin-bar.js

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