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
This commit is contained in:
nacin 2010-06-11 05:19:36 +00:00
parent cb7e7334d8
commit 975b2cdb6d
9 changed files with 94 additions and 27 deletions

View File

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

View File

@ -103,7 +103,7 @@
padding-left: 0; padding-left: 0;
} }
.menu-item-edit-active .menu-item-handle { .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-left-radius: 0;
-webkit-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0;
-khtml-border-bottom-left-radius: 0; -khtml-border-bottom-left-radius: 0;

File diff suppressed because one or more lines are too long

View File

@ -377,6 +377,19 @@ li.menu-item.ui-sortable-helper dl {
.menu-item-depth-10 .menu-item-transport { margin-left: -300px; } .menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
.menu-item-depth-11 .menu-item-transport { margin-left: -330px; } .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 */ /* Menu item controls */
.item-type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; } .item-type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; }
.item-controls { font-size: 11px; position: absolute; right: 20px; top: -1px; } .item-controls { font-size: 11px; position: absolute; right: 20px; top: -1px; }

View File

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

View File

@ -242,13 +242,18 @@ var wpNavMenu;
initSortables : function() { initSortables : function() {
var currentDepth = 0, originalDepth, minDepth, maxDepth, var currentDepth = 0, originalDepth, minDepth, maxDepth,
prev, next, prevBottom, nextThreshold, helperHeight, transport, 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({ api.menuList.sortable({
handle: '.menu-item-handle', handle: '.menu-item-handle',
placeholder: 'sortable-placeholder', placeholder: 'sortable-placeholder',
start: function(e, ui) { start: function(e, ui) {
var height, width, parent, children, maxChildDepth, tempHolder; var height, width, parent, children, tempHolder;
// handle placement for rtl orientation // handle placement for rtl orientation
if ( api.isRTL ) if ( api.isRTL )
@ -307,8 +312,10 @@ var wpNavMenu;
if( depthChange != 0 ) { if( depthChange != 0 ) {
ui.item.updateDepthClass( currentDepth ); ui.item.updateDepthClass( currentDepth );
children.shiftDepthClass( depthChange ); children.shiftDepthClass( depthChange );
api.registerChange(); updateMenuMaxDepth( depthChange );
} }
// Register a change
api.registerChange();
// Update the item data. // Update the item data.
ui.item.updateParentMenuItemDBId(); ui.item.updateParentMenuItemDBId();
@ -321,6 +328,8 @@ var wpNavMenu;
ui.item[0].style.right = 0; 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) { change: function(e, ui) {
// Make sure the placeholder is inside the menu. // Make sure the placeholder is inside the menu.
@ -332,7 +341,8 @@ var wpNavMenu;
}, },
sort: function(e, ui) { sort: function(e, ui) {
var offset = ui.helper.offset(), 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. // Check and correct if depth is not within range.
// Also, if the dragged element is dragged upwards over // Also, if the dragged element is dragged upwards over
// an item, shift the placeholder to a child position. // an item, shift the placeholder to a child position.
@ -348,9 +358,6 @@ var wpNavMenu;
updateSharedVars( ui ); updateSharedVars( ui );
$(this).sortable( "refreshPositions" ); $(this).sortable( "refreshPositions" );
} }
},
update: function(e, ui) {
api.registerChange();
} }
}); });
@ -378,6 +385,29 @@ var wpNavMenu;
ui.placeholder.updateDepthClass( depth, currentDepth ); ui.placeholder.updateDepthClass( depth, currentDepth );
currentDepth = depth; 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() { attachMenuEditListeners : function() {
@ -664,11 +694,21 @@ var wpNavMenu;
marginFixed = api.isRTL ? 'margin-left' : 'margin-right', marginFixed = api.isRTL ? 'margin-left' : 'margin-right',
msPerPx = 2; 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(), var fixedWidth = fixed.width(),
margin = 0, css = {}; margin = 0, css = {};
fixedLeft = fixed.offset().left; fixedLeft = fixed.offset().left;
fixedRight = fixedLeft + fixedWidth; fixedRight = fixedLeft + fixedWidth;
if( !savePosition )
active.makeTabVisible(); active.makeTabVisible();
// Prevent space from building up next to the last tab if there's more to show // 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 ); fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight );
// Set the menu tabs // Set the menu tabs
resetMenuTabs(); api.refreshMenuTabs();
// Make sure the tabs reset on resize // Make sure the tabs reset on resize
$(window).resize(function() { $(window).resize(function() {
if( resizeTimer ) clearTimeout(resizeTimer); if( resizeTimer ) clearTimeout(resizeTimer);
resizeTimer = setTimeout( resetMenuTabs, 200); resizeTimer = setTimeout( api.refreshMenuTabs, 200);
}); });
// Build arrow functions // Build arrow functions

File diff suppressed because one or more lines are too long

View File

@ -430,6 +430,22 @@ foreach( (array) $nav_menus as $key => $_nav_menu ) {
$nav_menus[$key]->truncated_name = $_nav_menu->truncated_name; $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_nav_menu_setup();
wp_initial_nav_menu_meta_boxes(); wp_initial_nav_menu_meta_boxes();
@ -564,18 +580,16 @@ require_once( 'admin-header.php' );
<div id="post-body"> <div id="post-body">
<div id="post-body-content"> <div id="post-body-content">
<?php <?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; echo $edit_markup;
endif; } else if ( empty( $nav_menu_selected_id ) ) {
elseif ( empty( $nav_menu_selected_id ) ) :
echo '<div class="post-body-plain">'; 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>' . __('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>' . __('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 '<p>' . __('When you have finished building your custom menu, make sure you click the Save Menu button.') . '</p>';
echo '</div>'; echo '</div>';
endif; }
?> ?>
</div><!-- /#post-body-content --> </div><!-- /#post-body-content -->
</div><!-- /#post-body --> </div><!-- /#post-body -->

View File

@ -384,12 +384,9 @@ function wp_default_scripts( &$scripts ) {
'done' => __( 'Done' ) '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( $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'), 'noResultsFound' => _x('No results found.', 'search results'),
'warnDeleteMenu' => __( "You are about to permanently delete this menu. \n 'Cancel' to stop, 'OK' to delete." ), '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.'), '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( '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( '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( '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 ) { foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true ); $styles->add_data( $rtl_style, 'rtl', true );