WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

First pass on sliding tabs for the nav menu admin UI. props koopersmith, see #13215. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@14368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
nacin 2010-05-03 10:28:35 +00:00
parent 9d077332ba
commit 08f650de1a
6 changed files with 186 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -8,6 +8,11 @@
* @subpackage Administration
*/
html,
body {
min-width: 950px;
}
#nav-menus-frame {
margin-left: 300px;
}
@ -95,48 +100,90 @@
font-weight:bold;
}
#menu-management .nav-tabs {
padding-left: 30px;
clear: both;
/* Menu Tabs */
#menu-management .nav-tabs-nav {
margin: 0 20px;
}
#menu-management .nav-tabs-arrow {
width: 10px;
padding: 0 5px 4px;
cursor: pointer;
position: absolute;
top: 0;
line-height: 22px;
font-size: 18px;
text-shadow: 0 1px 0 #fff;
}
#menu-management .nav-tabs-arrow a { color: #C1C1C1; }
#menu-management .nav-tabs-arrow a:hover { color: #D54E21; }
#menu-management .nav-tabs-arrow a:active { color: #464646; }
#menu-management .nav-tabs-arrow-left {
left: 0;
}
#menu-management .nav-tabs-arrow-right {
right: 0;
text-align: right;
}
#menu-management .nav-tab {
#menu-management .nav-tabs-wrapper {
width: 100%;
height: 28px;
margin-bottom: -1px;
overflow: hidden;
}
.no-js #menu-management .nav-tabs {
padding-left: 30px;
clear: both;
}
.js #menu-management .nav-tabs {
float: left;
margin-left: 0px;
margin-right: -400px;
}
#menu-management .nav-tab {
margin-bottom: 0;
background: #f4f4f4;
font-weight: bold;
border-color: #dfdfdf;
}
}
#menu-management .nav-tab-active {
#menu-management .nav-tab-active {
background: #ececec;
border-color:#ccc;
border-bottom-color: #ececec;
}
}
#select-nav-menu-container {
#select-nav-menu-container {
text-align: right;
padding: 0 10px 3px 10px;
margin-bottom: 5px;
}
}
#select-nav-menu {
width: 100px;
display: inline;
}
#menu-management #major-publishing-actions #delete-action {
/* Menu Toolbar */
#menu-management #major-publishing-actions #delete-action {
float: right;
margin-right: 10px;
}
}
#menu-name-label {
#menu-name-label {
margin-top: -2px;
}
}
#wpbody .open-label {
#wpbody .open-label {
display: inline-block;
}
#wpbody .open-label span {
}
#wpbody .open-label span {
padding-right: 10px;
}
}
.js .input-with-default-title {
color: #aaa;
@ -455,5 +502,5 @@ body.js .item-order {
/* Clearfix */
.menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; }
#nav-menus-frame:after, .menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#nav-menus-frame, .menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; }

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

@ -164,6 +164,8 @@ var WPNavMenuHandler = function ($) {
this.initSortables();
this.initToggles();
this.initTabManager();
},
initToggles : function() {
@ -389,6 +391,97 @@ var WPNavMenuHandler = function ($) {
});
},
initTabManager : function() {
var fixed = $('.nav-tabs-wrapper'),
fluid = fixed.children('.nav-tabs'),
active = fluid.children('.nav-tab-active'),
tabs = fluid.children('.nav-tab'),
tabsWidth = 0,
fixedRight, fixedLeft,
arrowLeft, arrowRight
resizing = false;
function resetMenuTabs() {
fixedLeft = fixed.offset().left;
fixedRight = fixedLeft + fixed.width();
active.makeTabVisible();
}
$.fn.extend({
makeTabVisible : function() {
var t = this.eq(0),
left = t.offset().left,
right = left + t.outerWidth();
if( right > fixedRight )
fluid.animate({ 'margin-left' : "+=" + (fixedRight - right) + 'px', }, 'fast');
else if ( left < fixedLeft )
fluid.animate({ 'margin-left' : "-=" + (left - fixedLeft) + 'px', }, 'fast');
return t;
},
isTabVisible : function() {
var t = this.eq(0),
left = t.offset().left,
right = left + t.outerWidth();
return ( right <= fixedRight && left >= fixedLeft ) ? true : false;
}
});
// Build tab navigation
arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>');
arrowRight = $('<div class="nav-tabs-arrow nav-tabs-arrow-right"><a>&raquo;</a></div>');
// Attach to the document
fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight );
// Set up right margin
tabs.each(function(){
tabsWidth += $(this).outerWidth(true);
});
fluid.css('margin-right', (-1 * tabsWidth) + 'px');
// Set the menu tabs
resetMenuTabs();
// Make sure the tabs reset on resize
$(window).resize(function() {
if( resizing ) return;
resizing = true;
setTimeout(function(){
resetMenuTabs();
resizing = false;
}, 1000);
});
// Build arrow functions
$.each([{
arrow : arrowLeft,
next : "next",
last : "first",
operator : "+=",
},{
arrow : arrowRight,
next : "prev",
last : "last",
operator : "-=",
}], 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();
}).mouseup(function(){
var tab, next;
fluid.stop(true);
tab = tabs[that.last]();
while( (next = tab[that.next]()) && next.length && ! next.isTabVisible() ) {
tab = next;
}
tab.makeTabVisible();
});
});
},
/**
* Set up quick-search input fields' events.
*

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

File diff suppressed because one or more lines are too long

2
wp-admin/nav-menus.php
View File

@ -362,6 +362,7 @@ require_once( 'admin-header.php' );
<input class="button-secondary" name="select_menu" type="submit" value="<?php esc_attr_e('Select'); ?>" />
</form>
</div>
<div class="nav-tabs-wrapper">
<div class="nav-tabs">
<?php
foreach( (array) $nav_menus as $_nav_menu ) :
@ -394,6 +395,7 @@ require_once( 'admin-header.php' );
echo ' nav-tab-active';
?>"><?php printf( '<abbr title="%s">+</abbr>', esc_html__( 'Add menu' ) ); ?></a>
</div>
</div>
<div class="menu-edit">
<form id="update-nav-menu" action="<?php echo admin_url( 'nav-menus.php' ); ?>" method="post" enctype="multipart/form-data">
<div id="nav-menu-header">

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

@ -393,7 +393,7 @@ function wp_default_scripts( &$scripts ) {
) );
// Custom Navigation
$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100502a' );
$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100503' );
$scripts->localize( 'nav-menu', 'navMenuL10n', array(
'custom' => _x('Custom', 'menu nav item type'),
'thickbox' => _x('Edit Menu Item', 'Thickbox Title'),
@ -474,7 +474,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(), '20100501b' );
$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100503' );
foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true );