Changeset 33056

Timestamp:

07/03/2015 03:28:15 AM (9 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();