Fix menu hover when loaded folded, simplify menu JS and auto-folding, see #18382

git-svn-id: http://svn.automattic.com/wordpress/trunk@18901 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-fresh.dev.css

@@ -944,19 +944,10 @@ table.widefat .spam a:hover,
 	border-color: #dfdfdf;
 }
 
-#adminmenu li.wp-not-current-submenu:hover a.menu-top,
+#adminmenu li.menu-top:hover > a,
-#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
+#adminmenu li.menu-top:hover > .wp-menu-arrow {
-	background-color: #e4e4e4; /* Fallback */
+	background-color: #e4e4e4;
-	background-image: -ms-linear-gradient(bottom, #ccc, #e4e4e4); /* IE10 */
-	background-image: -moz-linear-gradient(bottom, #ccc, #e4e4e4); /* Firefox */
-	background-image: -o-linear-gradient(bottom, #ccc, #e4e4e4); /* Opera */
-	background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#e4e4e4)); /* old Webkit */
-	background-image: -webkit-linear-gradient(bottom, #ccc, #e4e4e4); /* new Webkit */
-	background-image: linear-gradient(bottom, #ccc, #e4e4e4); /* proposed W3C Markup */
-	border-top-color: #e4e4e4;
-	border-bottom-color: #ccc;
 	text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
-	color: #d54e21;
 }
 
 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
@@ -965,6 +956,8 @@ table.widefat .spam a:hover,
 .folded #adminmenu li.current.menu-top,
 #adminmenu .wp-has-current-submenu .wp-menu-arrow,
 #adminmenu .current .wp-menu-arrow,
+#adminmenu li.wp-has-current-submenu:hover > .wp-menu-arrow,
+#adminmenu li.current:hover > .wp-menu-arrow,
 #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
 	background-color: #777; /* Fallback */
 	background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */
@@ -975,16 +968,7 @@ table.widefat .spam a:hover,
 	background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
 }
 
-#adminmenu li.wp-not-current-submenu li:hover a {
+.folded #adminmenu li.menu-top li:hover a {
-	background-color: #eaf2fa; /* Fallback */
-	background-image: -ms-linear-gradient(left, #fff, #eaf2fa 30px); /* IE10 */
-	background-image: -moz-linear-gradient(left, #fff, #eaf2fa 30px); /* Firefox */
-	background-image: -o-linear-gradient(left, #fff, #eaf2fa 30px); /* Opera */
-	background-image: -webkit-gradient(linear, left bottom, right bottom, from(#fff), color-stop(0.1, #eaf2fa)); /* old Webkit */
-	background-image: -webkit-linear-gradient(left, #fff, #eaf2fa 30px); /* new Webkit */
-	background-image: linear-gradient(left, #fff, #eaf2fa 30px); /* proposed W3C Markup */
-}
-.folded #adminmenu li.wp-not-current-submenu li:hover a {
 	background-image: none;
 }
 
@@ -1004,8 +988,8 @@ table.widefat .spam a:hover,
 }
 
 #adminmenu .wp-submenu a:hover {
-	background-color: #EAF2FA !important;
+	background-color: #EAF2FA;
-	color: #333 !important;
+	color: #333;
 }
 
 #adminmenu .wp-submenu li.current,

wp-admin/css/wp-admin.dev.css

@@ -1661,7 +1661,7 @@ form.upgrade .hint {
 	overflow: hidden;
 }
 
-#adminmenu .wp-not-current-submenu .wp-submenu,
+#adminmenu li .wp-submenu,
 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 	display: none;
 	position: absolute;
@@ -1679,6 +1679,7 @@ form.upgrade .hint {
 
 #adminmenu .wp-has-current-submenu .wp-submenu {
 	position: relative;
+	display: block;
 	z-index: 2;
 	top: auto;
 	left: auto;
@@ -1700,12 +1701,14 @@ form.upgrade .hint {
 }
 
 #adminmenu .wp-submenu.sub-open,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
 .no-js #adminmenu .wp-has-submenu:hover .wp-submenu,
 .no-js.folded #adminmenu .wp-has-current-submenu:hover .wp-submenu {
 	padding: 0 8px 8px 0;
 }
 
-.no-js #adminmenu .wp-has-current-submenu:hover .wp-submenu {
+.no-js #adminmenu .wp-has-current-submenu:hover .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu {
 	padding: 0;
 }
 
@@ -1762,7 +1765,7 @@ body.no-js #adminmenu .wp-menu-toggle,
 }
 
 #adminmenu li.menu-top {
-	min-height: 26px;
+	min-height: 29px;
 	position: relative;
 }
 
@@ -1785,18 +1788,22 @@ body.no-js #adminmenu .wp-menu-toggle,
 	padding-left: 12px;
 }
 
-#adminmenu li.wp-not-current-submenu li {
+#adminmenu li li {
 	margin-left: 8px;
 }
 
-.folded #adminmenu li.wp-not-current-submenu li {
+.js.folded #adminmenu li li {
 	margin-left: 0;
 }
 
-#adminmenu li.wp-not-current-submenu li a {
+#adminmenu li li a {
 	padding-left: 12px;
 }
 
+.folded #adminmenu li li a {
+	padding-left: 0;
+}
+
 .wp-menu-arrow {
 	display: none;
 }
@@ -1813,13 +1820,18 @@ body.no-js #adminmenu .wp-menu-toggle,
 }
 
 #adminmenu li.menu-top:hover .wp-menu-arrow {
-	z-index: 1500;
+	z-index: 1001;
 }
 
 .folded #adminmenu li.menu-top:hover .wp-menu-arrow {
 	display: none;
 }
 
+.folded #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
+	display: block;
+	z-index: 125;
+}
+
 #adminmenu .wp-menu-arrow div {
 	width: 15px;
 	height: 30px;
@@ -1832,10 +1844,8 @@ body.no-js #adminmenu .wp-menu-toggle,
 }
 
 .folded #adminmenu li.menu-top {
-	width: 32px;
-	height: 29px;
 	border-width: 1px 0;
-	border-style: solid;
+	border-style: solid none;
 }
 
 #adminmenu .wp-menu-image img {
@@ -1874,9 +1884,9 @@ body.no-js #adminmenu .wp-menu-toggle,
 	border-style: solid;
 }
 
-#adminmenu .wp-not-current-submenu .wp-submenu-wrap {
+#adminmenu li .wp-submenu-wrap {
 	border-width: 1px 1px 1px 0;
-	border-style: solid;
+	border-style: solid solid solid none;
 	position: relative;
 	-webkit-border-bottom-right-radius: 3px;
 	-webkit-border-top-right-radius: 3px;
@@ -1884,10 +1894,12 @@ body.no-js #adminmenu .wp-menu-toggle,
 	border-top-right-radius: 3px;
 }
 
+#adminmenu li.wp-menu-open .wp-submenu-wrap {
+	border: 0 none;
+}
+
 .folded #adminmenu .wp-submenu .wp-submenu-wrap {
 	margin-top: 4px;
-	border-width: 0 1px 1px 0;
-	border-style: solid;
 }
 
 .folded #adminmenu .wp-submenu ul {

wp-admin/js/common.dev.js

@@ -1,106 +1,15 @@
 var showNotice, adminMenu, columns, validateForm, screenMeta, autofold_menu;
 (function($){
-// sidebar admin menu
+// Removed in 3.3.
+// (perhaps) needed for back-compat
 adminMenu = {
-	init : function() {
+	init : function() {},
-		var menu = $('#adminmenu');
+	fold : function() {},
-
+	restoreMenuState : function() {},
-		this.favorites();
+	toggle : function() {},
-
+	favorites : function() {}
-		$('#collapse-menu', menu).click(function(){
-			if ( $('body').hasClass('folded') ) {
-				adminMenu.fold(1);
-				deleteUserSetting( 'mfold' );
-			} else {
-				adminMenu.fold();
-				setUserSetting( 'mfold', 'f' );
-			}
-			return false;
-		});
-
-		this.flyout( $('#adminmenu li.wp-has-submenu') );
-
-		this.fold( ! $('body').hasClass('folded') );
-	},
-
-	restoreMenuState : function() {
-		// (perhaps) needed for back-compat
-	},
-
-	flyout: function( el, unbind ) {
-		if ( unbind ) {
-			el.unbind(); // Unbind flyout
-			return;
-		}
-
-		el.hoverIntent({
-			over: function(e){
-				var m, b, h, o, f;
-				m = $(this).find('.wp-submenu');
-				b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu
-				h = $('#wpwrap').height(); // Height of the entire page
-				o = 60 + b - h;
-				f = $(window).height() + $(window).scrollTop() - 15; // The fold
-				if ( f < (b - o) ) {
-					o = b - f;
-				}
-				if ( o > 1 ) {
-					m.css({'marginTop':'-'+o+'px'});
-				} else if ( m.css('marginTop') ) {
-					m.css({'marginTop':''});
-				}
-				m.addClass('sub-open');
-			},
-			out: function(){
-				$(this).find('.wp-submenu').removeClass('sub-open');
-			},
-			timeout: 220,
-			sensitivity: 4,
-			interval: 50
-		});
-	},
-
-	toggle : function() {
-		// Removed in 3.3.
-		// (perhaps) needed for back-compat
-	},
-
-	fold : function( off ) {
-		var current = $('#adminmenu li.wp-has-current-submenu');
-
-		$('body').toggleClass( 'folded', ! off );
-		this.flyout( current, off );
-
-		// Remove any potentially remaining hoverIntent positioning.
-		if ( off )
-			current.find('.wp-submenu').css( 'marginTop', '0' );
-	},
-
-	favorites : function() {
-		$('#favorite-inside').width( $('#favorite-actions').width() - 4 );
-		$('#favorite-toggle, #favorite-inside').bind('mouseenter', function() {
-			$('#favorite-inside').removeClass('slideUp').addClass('slideDown');
-			setTimeout(function() {
-				if ( $('#favorite-inside').hasClass('slideDown') ) {
-					$('#favorite-inside').slideDown(100);
-					$('#favorite-first').addClass('slide-down');
-				}
-			}, 200);
-		}).bind('mouseleave', function() {
-			$('#favorite-inside').removeClass('slideDown').addClass('slideUp');
-			setTimeout(function() {
-				if ( $('#favorite-inside').hasClass('slideUp') ) {
-					$('#favorite-inside').slideUp(100, function() {
-						$('#favorite-first').removeClass('slide-down');
-					});
-				}
-			}, 300);
-		});
-	}
 };
 
-$(document).ready(function(){ adminMenu.init(); });
-
 // show/hide/save table columns
 columns = {
 	init : function() {
@@ -277,8 +186,49 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
 });
 
 $(document).ready( function() {
-	var lastClicked = false, checks, first, last, checked,
+	var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
-		pageInput = $('input.current-page'), currentPage = pageInput.val();
+		pageInput = $('input.current-page'), currentPage = pageInput.val(), folded;
+
+	// admin menu
+	$('#collapse-menu', menu).click(function(){
+		var body = $(document.body);
+
+		if ( body.hasClass('folded') ) {
+			body.removeClass('folded');
+			deleteUserSetting('mfold');
+		} else {
+			body.addClass('folded');
+			setUserSetting('mfold', 'f');
+		}
+		return false;
+	});
+
+	$('li.wp-has-submenu', menu).hoverIntent({
+		over: function(e){
+			var b, h, o, f, m = $(this).find('.wp-submenu');
+
+			b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu
+			h = $('#wpwrap').height(); // Height of the entire page
+			o = 60 + b - h;
+			f = $(window).height() + $(window).scrollTop() - 15; // The fold
+
+			if ( f < (b - o) )
+				o = b - f;
+
+			if ( o > 1 )
+				m.css({'marginTop':'-'+o+'px'});
+			else if ( m.css('marginTop') )
+				m.css({'marginTop':''});
+
+			m.addClass('sub-open');
+		},
+		out: function(){
+			$(this).find('.wp-submenu').removeClass('sub-open');
+		},
+		timeout: 200,
+		sensitivity: 7,
+		interval: 90
+	});
 
 	// Move .updated and .error alert boxes. Don't move boxes designed to be inline.
 	$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
@@ -393,7 +343,17 @@ $(document).ready( function() {
 		var width = $(window).width();
 
 		// fold admin menu
-		adminMenu.fold( width >= 800 );
+		if ( width <= 800 ) {
+			if ( !folded ) {
+				$(document.body).addClass('folded');
+				folded = true;
+			}
+		} else {
+			if ( folded ) {
+				$(document.body).removeClass('folded');
+				folded = false;
+			}
+		}
 
 	}).triggerHandler('resize');
 });

wp-admin/menu-header.php

@@ -57,11 +57,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 			$menu_setting_increment++;
 		}
 
-		if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) ) {
+		if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) )
 			$class[] = ! empty( $submenu_items ) ? 'wp-has-current-submenu wp-menu-open' : 'current';
-		} else {
-			$class[] = 'wp-not-current-submenu';
-		}
 
 		if ( ! empty( $item[4] ) )
 			$class[] = $item[4];

wp-includes/script-loader.php

@@ -61,7 +61,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'utils', "/wp-admin/js/utils$suffix.js", false, '20101110' );
 
-	$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20111004', 1 );
+	$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20111005', 1 );
 	$scripts->add_script_data( 'common', 'commonL10n', array(
 		'warnDelete' => __("You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete.")
 	) );
@@ -431,13 +431,13 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111005b' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111005c' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20110919' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
 	// all colors stylesheets need to have the same query strings (cache manifest compat)
-	$colors_version = '20111005';
+	$colors_version = '20111005a';
 
 	// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
 	$styles->add( 'colors', true, array('wp-admin'), $colors_version );