Horizontal scrolling/resizing fixes for nav menu UI. Also some RTL fixes. props koopersmith, see #13525

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

wp-admin/css/nav-menu-rtl.css

@@ -1 +1 @@
-#nav-menus-frame{margin-right:300px;margin-left:0;}#wpbody-content #menu-settings-column{margin-right:-300px;margin-left:0;float:right;}#menu-management-liquid{float:right;}#menu-management{margin-left:20px;margin-right:0;}#post-body{padding:0 10px 10px 0;}.post-body-plain{padding:10px 0 0 10px;}#menu-management .nav-tabs-arrow-left{right:0;left:auto;}#menu-management .nav-tabs-arrow-right{left:0;right:auto;text-align:left;}#menu-management .nav-tabs{padding-right:20px;padding-left:10px;}.js #menu-management .nav-tabs{float:right;margin-right:0;margin-left:-400px;}#select-nav-menu-container{text-align:left;}#wpbody .open-label{float:right;}#wpbody .open-label span{padding-left:10px;padding-right:0;}.js .input-with-default-title{font-style:normal;font-weight:bold;}.postbox .howto input{float:left;}#nav-menu-theme-locations .button-controls{text-align:left;}.meta-sep,.submitdelete,.submitcancel{float:right;}#cancel-save{margin-right:20px;margin-left:0;}.list-controls{float:right;}.add-to-menu{float:left;}#add-custom-link label span{float:right;padding-left:5px;padding-right:0;}.howto span{float:right;}.list li .menu-item-title input{margin-left:3px;margin-right:0;}.menu-item-handle{padding-right:10px;padding-left:0;}.menu-item-edit-active .menu-item-handle{-moz-border-radius:6px 0 0 6px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-khtml-border-bottom-left-radius:0;-khtml-border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}.menu-item-handle .item-title{margin-left:13em;margin-right:0;}.menu-item-depth-0{margin-right:0;margin-left:0;}.menu-item-depth-1{margin-right:30px;margin-left:0;}.menu-item-depth-2{margin-right:60px;margin-left:0;}.menu-item-depth-3{margin-right:90px;margin-left:0;}.menu-item-depth-4{margin-right:120px;margin-left:0;}.menu-item-depth-5{margin-right:150px;margin-left:0;}.menu-item-depth-6{margin-right:180px;margin-left:0;}.menu-item-depth-7{margin-right:210px;margin-left:0;}.menu-item-depth-8{margin-right:240px;margin-left:0;}.menu-item-depth-9{margin-right:270px;margin-left:0;}.menu-item-depth-10{margin-right:300px;margin-left:0;}.menu-item-depth-11{margin-right:330px;margin-left:0;}.menu-item-depth-0 .menu-item-transport{margin-right:0;margin-left:0;}.menu-item-depth-1 .menu-item-transport{margin-right:-30px;margin-left:0;}.menu-item-depth-2 .menu-item-transport{margin-right:-60px;margin-left:0;}.menu-item-depth-3 .menu-item-transport{margin-right:-90px;margin-left:0;}.menu-item-depth-4 .menu-item-transport{margin-right:-120px;margin-left:0;}.menu-item-depth-5 .menu-item-transport{margin-right:-150px;margin-left:0;}.menu-item-depth-6 .menu-item-transport{margin-right:-180px;margin-left:0;}.menu-item-depth-7 .menu-item-transport{margin-right:-210px;margin-left:0;}.menu-item-depth-8 .menu-item-transport{margin-right:-240px;margin-left:0;}.menu-item-depth-9 .menu-item-transport{margin-right:-270px;margin-left:0;}.menu-item-depth-10 .menu-item-transport{margin-right:-300px;margin-left:0;}.menu-item-depth-11 .menu-item-transport{margin-right:-330px;margin-left:0;}.item-type{padding-left:10px;padding-right:0;}.item-controls{left:20px;right:auto;}.item-controls .item-order{padding-left:10px;padding-right:0;}.item-edit{background-image:url("../images/menu-bits-rtl.gif?ver=20100531");background-position:100% -105px;left:-20px;right:auto;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:0;-khtml-border-bottom-right-radius:3px;-khtml-border-bottom-left-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:0;}.menu-item-settings{padding:10px 10px 10px 0;border-width:0 1px 1px 1px;}.link-to-original{font-style:normal;font-weight:bold;}.link-to-original a{padding-right:4px;padding-left:0;}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-left:10px;margin-right:0;float:right;}.major-publishing-actions .publishing-action{text-align:left;float:left;}.major-publishing-actions .delete-action{text-align:right;float:right;padding-left:15px;padding-right:0;}.menu-name-label{margin-left:15px;margin-right:0;}.auto-add-pages{float:right;}
+#nav-menus-frame{margin-right:300px;margin-left:0;}#wpbody-content #menu-settings-column{margin-right:-300px;margin-left:0;float:right;}#menu-management-liquid{float:right;}#menu-management{margin-left:20px;margin-right:0;}#post-body{padding:0 10px 10px 0;}.post-body-plain{padding:10px 0 0 10px;}#menu-management .nav-tabs-arrow-left{right:0;left:auto;}#menu-management .nav-tabs-arrow-right{left:0;right:auto;text-align:left;}#menu-management .nav-tabs{padding-right:20px;padding-left:10px;}.js #menu-management .nav-tabs{float:right;margin-right:0;margin-left:-400px;}#select-nav-menu-container{text-align:left;}#wpbody .open-label{float:right;}#wpbody .open-label span{padding-left:10px;padding-right:0;}.js .input-with-default-title{font-style:normal;font-weight:bold;}.postbox .howto input{float:left;}#nav-menu-theme-locations .button-controls{text-align:left;}.meta-sep,.submitdelete,.submitcancel{float:right;}#cancel-save{margin-right:20px;margin-left:0;}.list-controls{float:right;}.add-to-menu{float:left;}#add-custom-link label span{float:right;padding-left:5px;padding-right:0;}.howto span{float:right;}.list li .menu-item-title input{margin-left:3px;margin-right:0;}.menu-item-handle{padding-right:10px;padding-left:0;}.menu-item-edit-active .menu-item-handle{-moz-border-radius:6px 6px 0 0;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-khtml-border-bottom-left-radius:0;-khtml-border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}.menu-item-handle .item-title{margin-left:13em;margin-right:0;}.menu-item-depth-0{margin-right:0;margin-left:0;}.menu-item-depth-1{margin-right:30px;margin-left:0;}.menu-item-depth-2{margin-right:60px;margin-left:0;}.menu-item-depth-3{margin-right:90px;margin-left:0;}.menu-item-depth-4{margin-right:120px;margin-left:0;}.menu-item-depth-5{margin-right:150px;margin-left:0;}.menu-item-depth-6{margin-right:180px;margin-left:0;}.menu-item-depth-7{margin-right:210px;margin-left:0;}.menu-item-depth-8{margin-right:240px;margin-left:0;}.menu-item-depth-9{margin-right:270px;margin-left:0;}.menu-item-depth-10{margin-right:300px;margin-left:0;}.menu-item-depth-11{margin-right:330px;margin-left:0;}.menu-item-depth-0 .menu-item-transport{margin-right:0;margin-left:0;}.menu-item-depth-1 .menu-item-transport{margin-right:-30px;margin-left:0;}.menu-item-depth-2 .menu-item-transport{margin-right:-60px;margin-left:0;}.menu-item-depth-3 .menu-item-transport{margin-right:-90px;margin-left:0;}.menu-item-depth-4 .menu-item-transport{margin-right:-120px;margin-left:0;}.menu-item-depth-5 .menu-item-transport{margin-right:-150px;margin-left:0;}.menu-item-depth-6 .menu-item-transport{margin-right:-180px;margin-left:0;}.menu-item-depth-7 .menu-item-transport{margin-right:-210px;margin-left:0;}.menu-item-depth-8 .menu-item-transport{margin-right:-240px;margin-left:0;}.menu-item-depth-9 .menu-item-transport{margin-right:-270px;margin-left:0;}.menu-item-depth-10 .menu-item-transport{margin-right:-300px;margin-left:0;}.menu-item-depth-11 .menu-item-transport{margin-right:-330px;margin-left:0;}.item-type{padding-left:10px;padding-right:0;}.item-controls{left:20px;right:auto;}.item-controls .item-order{padding-left:10px;padding-right:0;}.item-edit{background-image:url("../images/menu-bits-rtl.gif?ver=20100531");background-position:100% -105px;left:-20px;right:auto;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:0;-khtml-border-bottom-right-radius:3px;-khtml-border-bottom-left-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:0;}.menu-item-settings{padding:10px 10px 10px 0;border-width:0 1px 1px 1px;}.link-to-original{font-style:normal;font-weight:bold;}.link-to-original a{padding-right:4px;padding-left:0;}.menu-item-settings .description-thin,.menu-item-settings .description-wide{margin-left:10px;margin-right:0;float:right;}.major-publishing-actions .publishing-action{text-align:left;float:left;}.major-publishing-actions .delete-action{text-align:right;float:right;padding-left:15px;padding-right:0;}.menu-name-label{margin-left:15px;margin-right:0;}.auto-add-pages{float:right;}

wp-admin/css/nav-menu-rtl.dev.css

@@ -103,7 +103,7 @@
 	padding-left: 0;
 }
 .menu-item-edit-active .menu-item-handle {
-	-moz-border-radius: 6px 0 0 6px;
+	-moz-border-radius: 6px 6px 0 0;
 	-webkit-border-bottom-left-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
 	-khtml-border-bottom-left-radius: 0;

wp-admin/css/nav-menu.dev.css

@@ -377,6 +377,19 @@ li.menu-item.ui-sortable-helper dl {
 .menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
 .menu-item-depth-11 .menu-item-transport { margin-left: -330px; }
 
+body.menu-max-depth-0 { min-width: 950px !important; }
+body.menu-max-depth-1 { min-width: 980px !important; }
+body.menu-max-depth-2 { min-width: 1010px !important; }
+body.menu-max-depth-3 { min-width: 1040px !important; }
+body.menu-max-depth-4 { min-width: 1070px !important; }
+body.menu-max-depth-5 { min-width: 1100px !important; }
+body.menu-max-depth-6 { min-width: 1130px !important; }
+body.menu-max-depth-7 { min-width: 1160px !important; }
+body.menu-max-depth-8 { min-width: 1190px !important; }
+body.menu-max-depth-9 { min-width: 1220px !important; }
+body.menu-max-depth-10 { min-width: 1250px !important; }
+body.menu-max-depth-11 { min-width: 1280px !important; }
+
 /* Menu item controls */
 .item-type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; }
 .item-controls { font-size: 11px; position: absolute; right: 20px; top: -1px; }

wp-admin/includes/nav-menu.php

@@ -38,6 +38,9 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu  {
 	 * @param object $args
 	 */
 	function start_el(&$output, $item, $depth, $args) {
+		global $_wp_nav_menu_max_depth;
+		$_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
+
 		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
 		ob_start();

wp-admin/js/nav-menu.dev.js

@@ -242,13 +242,18 @@ var wpNavMenu;
 		initSortables : function() {
 			var currentDepth = 0, originalDepth, minDepth, maxDepth,
 				prev, next, prevBottom, nextThreshold, helperHeight, transport,
-				menuLeft = api.menuList.offset().left;
+				menuEdge = api.menuList.offset().left,
+				body = $('body'), maxChildDepth,
+				menuMaxDepth = initialMenuMaxDepth();
+
+			// Use the right edge if RTL.
+			menuEdge += api.isRTL ? api.menuList.width() : 0;
 
 			api.menuList.sortable({
 				handle: '.menu-item-handle',
 				placeholder: 'sortable-placeholder',
 				start: function(e, ui) {
-					var height, width, parent, children, maxChildDepth, tempHolder;
+					var height, width, parent, children, tempHolder;
 
 					// handle placement for rtl orientation
 					if ( api.isRTL )
@@ -307,8 +312,10 @@ var wpNavMenu;
 					if( depthChange != 0 ) {
 						ui.item.updateDepthClass( currentDepth );
 						children.shiftDepthClass( depthChange );
-						api.registerChange();
+						updateMenuMaxDepth( depthChange );
 					}
+					// Register a change
+					api.registerChange();
 					// Update the item data.
 					ui.item.updateParentMenuItemDBId();
 
@@ -321,6 +328,8 @@ var wpNavMenu;
 						ui.item[0].style.right = 0;
 					}
 
+					// The width of the tab bar might have changed. Just in case.
+					api.refreshMenuTabs( true );
 				},
 				change: function(e, ui) {
 					// Make sure the placeholder is inside the menu.
@@ -332,7 +341,8 @@ var wpNavMenu;
 				},
 				sort: function(e, ui) {
 					var offset = ui.helper.offset(),
-						depth = api.negateIfRTL * api.pxToDepth( offset.left - menuLeft );
+						edge = api.isRTL ? offset.left + ui.helper.width() : offset.left,
+						depth = api.negateIfRTL * api.pxToDepth( edge - menuEdge );
 					// Check and correct if depth is not within range.
 					// Also, if the dragged element is dragged upwards over
 					// an item, shift the placeholder to a child position.
@@ -348,9 +358,6 @@ var wpNavMenu;
 						updateSharedVars( ui );
 						$(this).sortable( "refreshPositions" );
 					}
-				},
-				update: function(e, ui) {
-					api.registerChange();
 				}
 			});
 
@@ -378,6 +385,29 @@ var wpNavMenu;
 				ui.placeholder.updateDepthClass( depth, currentDepth );
 				currentDepth = depth;
 			}
+
+			function initialMenuMaxDepth() {
+				if( ! body[0].className ) return 0;
+				var match = body[0].className.match(/menu-max-depth-(\d+)/);
+				return match && match[1] ? parseInt(match[1]) : 0;
+			}
+
+			function updateMenuMaxDepth( depthChange ) {
+				var depth, newDepth = menuMaxDepth;
+				if ( depthChange === 0 ) {
+					return;
+				} else if ( depthChange > 0 ) {
+					depth = maxChildDepth + depthChange;
+					if( depth > menuMaxDepth )
+						newDepth = depth;
+				} else if ( depthChange < 0 && maxChildDepth == menuMaxDepth ) {
+					while( ! $('.menu-item-depth-' + newDepth, api.menuList).length && newDepth > 0 )
+						newDepth--;
+				}
+				// Update the depth class.
+				body.removeClass( 'menu-max-depth-' + menuMaxDepth ).addClass( 'menu-max-depth-' + newDepth );
+				menuMaxDepth = newDepth;
+			}
 		},
 
 		attachMenuEditListeners : function() {
@@ -664,11 +694,21 @@ var wpNavMenu;
 				marginFixed = api.isRTL ? 'margin-left' : 'margin-right',
 				msPerPx = 2;
 
-			function resetMenuTabs() {
+			/**
+			 * Refreshes the menu tabs.
+			 * Will show and hide arrows where necessary.
+			 * Scrolls to the active tab by default.
+			 * 
+			 * @param savePosition {boolean} Optional. Prevents scrolling so
+			 * 		  that the current position is maintained. Default false. 
+			 **/
+			api.refreshMenuTabs = function( savePosition ) {
 				var fixedWidth = fixed.width(),
 					margin = 0, css = {};
 				fixedLeft = fixed.offset().left;
 				fixedRight = fixedLeft + fixedWidth;
+
+				if( !savePosition )
 					active.makeTabVisible();
 
 				// Prevent space from building up next to the last tab if there's more to show
@@ -731,11 +771,11 @@ var wpNavMenu;
 			fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight );
 
 			// Set the menu tabs
-			resetMenuTabs();
+			api.refreshMenuTabs();
 			// Make sure the tabs reset on resize
 			$(window).resize(function() {
 				if( resizeTimer ) clearTimeout(resizeTimer);
-				resizeTimer = setTimeout( resetMenuTabs, 200);
+				resizeTimer = setTimeout( api.refreshMenuTabs, 200);
 			});
 
 			// Build arrow functions

wp-admin/nav-menus.php

@@ -430,6 +430,22 @@ foreach( (array) $nav_menus as $key => $_nav_menu ) {
 	$nav_menus[$key]->truncated_name = $_nav_menu->truncated_name;
 }
 
+// Ensure the user will be able to scroll horizontally
+// by adding a class for the max menu depth.
+global $_wp_nav_menu_max_depth;
+$_wp_nav_menu_max_depth = 0;
+
+// Calling wp_get_nav_menu_to_edit generates $_wp_nav_menu_max_depth
+if ( is_nav_menu( $nav_menu_selected_id ) )
+	$edit_markup = wp_get_nav_menu_to_edit( $nav_menu_selected_id  );
+
+function wp_nav_menu_max_depth() {
+	global $_wp_nav_menu_max_depth;
+	return "menu-max-depth-$_wp_nav_menu_max_depth";
+}
+
+add_action('admin_body_class','wp_nav_menu_max_depth');
+
 wp_nav_menu_setup();
 wp_initial_nav_menu_meta_boxes();
 
@@ -564,18 +580,16 @@ require_once( 'admin-header.php' );
 					<div id="post-body">
 						<div id="post-body-content">
 							<?php
-							if ( is_nav_menu( $nav_menu_selected_id ) ) :
+							if ( isset( $edit_markup ) ) {
-								$edit_markup = wp_get_nav_menu_to_edit( $nav_menu_selected_id  );
+								if ( ! is_wp_error( $edit_markup ) )
-								if ( ! is_wp_error( $edit_markup ) ) :
 									echo $edit_markup;
-								endif;
+							} else if ( empty( $nav_menu_selected_id ) ) {
-							elseif ( empty( $nav_menu_selected_id ) ) :
 								echo '<div class="post-body-plain">';
 								echo '<p>' . __('To create a custom menu, give it a name above and click Create Menu. Then choose items like pages, categories or custom links from the left column to add to this menu.') . '</p>';
 								echo '<p>' . __('After you have added your items, drag and drop to put them in the order you want. You can also click each item to reveal additional configuration options.') . '</p>';
 								echo '<p>' . __('When you have finished building your custom menu, make sure you click the Save Menu button.') . '</p>';
 								echo '</div>';
-							endif;
+							}
 							?>
 						</div><!-- /#post-body-content -->
 					</div><!-- /#post-body -->

wp-includes/script-loader.php

@@ -384,12 +384,9 @@ function wp_default_scripts( &$scripts ) {
 			'done' => __( 'Done' )
 		) );
 
-		// Custom Navigation
+		// Navigation Menus
-		$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100603' );
+		$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100611' );
 		$scripts->localize( 'nav-menu', 'navMenuL10n', array(
-			'custom' => _x('Custom', 'menu nav item type'),
-			'thickbox' => _x('Edit Menu Item', 'Thickbox Title'),
-			'edit' => _x('Edit', 'menu item edit text'),
 			'noResultsFound' => _x('No results found.', 'search results'),
 			'warnDeleteMenu' => __( "You are about to permanently delete this menu. \n 'Cancel' to stop, 'OK' to delete." ),
 			'saveAlert' => __('The changes you made will be lost if you navigate away from this page.'),
@@ -463,7 +460,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' );
 	$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
 	$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
-	$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100610' );
+	$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100611' );
 
 	foreach ( $rtl_styles as $rtl_style ) {
 		$styles->add_data( $rtl_style, 'rtl', true );