Changeset 33056

Timestamp:

07/03/2015 03:28:15 AM (11 years ago)

Author:

helen

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/admin-menu.css (modified) (1 diff)
• wp-admin/js/common.js (modified) (1 diff)
• wp-includes/css/admin-bar.css (modified) (3 diffs)
• wp-includes/js/admin-bar.js (modified) (2 diffs)

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

@@ -921 +921 @@
                 box-sizing: border-box;
         }
+
+        .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+                color: #00b9eb;
+        }
 }
 

trunk/src/wp-admin/js/common.js

@@ -753 +753 @@
                         $( '#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' ) ) {

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

@@ -208 +208 @@
 }
 
-#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;
@@ -216 +216 @@
 }
 
-#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;
 }
@@ -285 +285 @@
 #wpadminbar li:hover #adminbarsearch:before,
 #wpadminbar li #adminbarsearch.adminbar-focused:before {
+        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;
 }

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

@@ -29 +29 @@
                                         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');
                                 }
 
@@ -125 +131 @@
 
                 $('#wpadminbar').click( function(e) {
-                        if ( e.target.id != 'wpadminbar' && e.target.id != 'wp-admin-bar-top-secondary' )
-                                return;
+                        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();