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
parent
9d077332ba
commit
08f650de1a
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
background: #f4f4f4;
|
||||
font-weight: bold;
|
||||
border-color: #dfdfdf;
|
||||
|
||||
#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 {
|
||||
background: #ececec;
|
||||
border-color:#ccc;
|
||||
border-bottom-color: #ececec;
|
||||
}
|
||||
|
||||
#select-nav-menu-container {
|
||||
text-align: right;
|
||||
padding: 0 10px 3px 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#select-nav-menu {
|
||||
width: 100px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#menu-management .nav-tab-active {
|
||||
background: #ececec;
|
||||
border-color:#ccc;
|
||||
border-bottom-color: #ececec;
|
||||
}
|
||||
|
||||
#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 {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#menu-name-label {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#wpbody .open-label {
|
||||
display: inline-block;
|
||||
}
|
||||
#wpbody .open-label span {
|
||||
padding-right: 10px;
|
||||
}
|
||||
/* Menu Toolbar */
|
||||
#menu-management #major-publishing-actions #delete-action {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#menu-name-label {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#wpbody .open-label {
|
||||
display: inline-block;
|
||||
}
|
||||
#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; }
|
||||
|
|
|
|||
|
|
@ -164,6 +164,8 @@ var WPNavMenuHandler = function ($) {
|
|||
this.initSortables();
|
||||
|
||||
this.initToggles();
|
||||
|
||||
this.initTabManager();
|
||||
},
|
||||
|
||||
initToggles : function() {
|
||||
|
|
@ -388,6 +390,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>«</a></div>');
|
||||
arrowRight = $('<div class="nav-tabs-arrow nav-tabs-arrow-right"><a>»</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.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
Loading…
Reference in New Issue