sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Nav menu improvements. props koopersmith. RTL support for tabs, better tab handling, other improvements. see #13525. 

git-svn-id: https://develop.svn.wordpress.org/trunk@15080 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin 2010-05-31 20:22:49 +00:00
parent 4a0f1ff357
commit e21a5a1b24
6 changed files with 58 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/css/nav-menu-rtl.css
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:30px;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 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;}

2
wp-admin/css/nav-menu-rtl.dev.css
View File

@ -40,7 +40,7 @@
}
#menu-management .nav-tabs {
padding-right: 30px;
padding-right: 20px;
padding-left: 10px;
}
.js #menu-management .nav-tabs {

2
wp-admin/css/nav-menu.css
View File

File diff suppressed because one or more lines are too long

2
wp-admin/css/nav-menu.dev.css
View File

@ -140,7 +140,7 @@ body {
}
#menu-management .nav-tabs {
padding-left: 30px;
padding-left: 20px;
padding-right: 10px;
}
.js #menu-management .nav-tabs {

85
wp-admin/js/nav-menu.dev.js
View File

@ -23,6 +23,7 @@ var wpNavMenu;
targetList : undefined, // Set in init.
menusChanged : false,
isRTL: !! ( 'undefined' != typeof isRtl && isRtl ),
negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1,
// Functions that run on init.
init : function() {
@ -331,7 +332,7 @@ var wpNavMenu;
},
sort: function(e, ui) {
var offset = ui.helper.offset(),
depth = ( api.isRTL ? -1 : 1 ) * api.pxToDepth( offset.left - menuLeft );
depth = api.negateIfRTL * api.pxToDepth( offset.left - menuLeft );
// 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.
@ -658,26 +659,52 @@ var wpNavMenu;
tabs = fluid.children('.nav-tab'),
tabsWidth = 0,
fixedRight, fixedLeft,
arrowLeft, arrowRight,
resizing = false;
arrowLeft, arrowRight, resizeTimer, css = {},
marginFluid = api.isRTL ? 'margin-right' : 'margin-left',
marginFixed = api.isRTL ? 'margin-left' : 'margin-right',
msPerPx = 2;
function resetMenuTabs() {
var fixedWidth = fixed.width(),
margin = 0, css = {};
fixedLeft = fixed.offset().left;
fixedRight = fixedLeft + fixed.width();
fixedRight = fixedLeft + fixedWidth;
active.makeTabVisible();
// Prevent space from building up next to the last tab if there's more to show
if( tabs.last().isTabVisible() ) {
margin = fixed.width() - tabsWidth;
margin = margin > 0 ? 0 : margin;
css[marginFluid] = margin + 'px';
fluid.animate( css, 100, "linear" );
}
// Show the arrows only when necessary
if( fixedWidth > tabsWidth )
arrowLeft.add( arrowRight ).hide();
else
arrowLeft.add( arrowRight ).show();
}
$.fn.extend({
makeTabVisible : function() {
var t = this.eq(0), left, right;
if( ! t.length ) return;
var t = this.eq(0), left, right, css = {}, shift = 0;
if( ! t.length ) return this;
left = t.offset().left;
right = left + t.outerWidth();
if( right > fixedRight )
fluid.animate({ 'margin-left' : "+=" + (fixedRight - right) + 'px' }, 'fast');
shift = fixedRight - right;
else if ( left < fixedLeft )
fluid.animate({ 'margin-left' : "-=" + (left - fixedLeft) + 'px' }, 'fast');
return t;
shift = fixedLeft - left;
if( ! shift ) return this;
css[marginFluid] = "+=" + api.negateIfRTL * shift + 'px';
fluid.animate( css, Math.abs( shift ) * msPerPx, "linear" );
return this;
},
isTabVisible : function() {
var t = this.eq(0),
@ -692,17 +719,10 @@ var wpNavMenu;
tabsWidth += $(this).outerWidth(true);
});
// Check if we need the tab manager
if( tabsWidth <= fixed.width()
- fluid.css('padding-left').slice(0,-2)
- fluid.css('padding-right').slice(0,-2) )
return;
// Set up right margin for overflow, unset padding
fluid.css({
'margin-right' : (-1 * tabsWidth) + 'px',
'padding' : 0
});
// Set up fixed margin for overflow, unset padding
css['padding'] = 0;
css[marginFixed] = (-1 * tabsWidth) + 'px';
fluid.css( css );
// Build tab navigation
arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>');
@ -714,12 +734,8 @@ var wpNavMenu;
resetMenuTabs();
// Make sure the tabs reset on resize
$(window).resize(function() {
if( resizing ) return;
resizing = true;
setTimeout(function(){
resetMenuTabs();
resizing = false;
}, 1000);
if( resizeTimer ) clearTimeout(resizeTimer);
resizeTimer = setTimeout( resetMenuTabs, 200);
});
// Build arrow functions
@ -736,12 +752,17 @@ var wpNavMenu;
}], function(){
var that = this;
this.arrow.mousedown(function(){
var last = tabs[that.last](),
fn = function() {
if( ! last.isTabVisible() )
fluid.animate({ 'margin-left' : that.operator + '90px' }, 300, "linear", fn);
};
fn();
var marginFluidVal = Math.abs( parseInt( fluid.css(marginFluid) ) ),
shift = marginFluidVal,
css = {};
if( "-=" == that.operator )
shift = Math.abs( tabsWidth - fixed.width() ) - marginFluidVal;
if( ! shift ) return;
css[marginFluid] = that.operator + shift + 'px';
fluid.animate( css, shift * msPerPx, "linear" );
}).mouseup(function(){
var tab, next;
fluid.stop(true);

2
wp-includes/script-loader.php
View File

@ -465,7 +465,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(), '20100531' );
$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100531a' );
foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true );