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
parent
cb7e7334d8
commit
975b2cdb6d
|
|
@ -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;}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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,12 +694,22 @@ 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;
|
||||
active.makeTabVisible();
|
||||
|
||||
if( !savePosition )
|
||||
active.makeTabVisible();
|
||||
|
||||
// Prevent space from building up next to the last tab if there's more to show
|
||||
if( tabs.last().isTabVisible() ) {
|
||||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 ) ) :
|
||||
$edit_markup = wp_get_nav_menu_to_edit( $nav_menu_selected_id );
|
||||
if ( ! is_wp_error( $edit_markup ) ) :
|
||||
if ( isset( $edit_markup ) ) {
|
||||
if ( ! is_wp_error( $edit_markup ) )
|
||||
echo $edit_markup;
|
||||
endif;
|
||||
elseif ( empty( $nav_menu_selected_id ) ) :
|
||||
} else if ( 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 -->
|
||||
|
|
|
|||
|
|
@ -384,12 +384,9 @@ function wp_default_scripts( &$scripts ) {
|
|||
'done' => __( 'Done' )
|
||||
) );
|
||||
|
||||
// Custom Navigation
|
||||
$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100603' );
|
||||
// Navigation Menus
|
||||
$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 );
|
||||
|
|
|
|||
Loading…
Reference in New Issue