Fix menu hover when loaded folded, simplify menu JS and auto-folding, see #18382

git-svn-id: https://develop.svn.wordpress.org/trunk@18901 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2011-10-06 09:18:56 +00:00
parent 7ac7aeae29
commit 04c169ba44
8 changed files with 102 additions and 149 deletions

File diff suppressed because one or more lines are too long

View File

@ -944,19 +944,10 @@ table.widefat .spam a:hover,
border-color: #dfdfdf;
}
#adminmenu li.wp-not-current-submenu:hover a.menu-top,
#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
background-color: #e4e4e4; /* Fallback */
background-image: -ms-linear-gradient(bottom, #ccc, #e4e4e4); /* IE10 */
background-image: -moz-linear-gradient(bottom, #ccc, #e4e4e4); /* Firefox */
background-image: -o-linear-gradient(bottom, #ccc, #e4e4e4); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#e4e4e4)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #ccc, #e4e4e4); /* new Webkit */
background-image: linear-gradient(bottom, #ccc, #e4e4e4); /* proposed W3C Markup */
border-top-color: #e4e4e4;
border-bottom-color: #ccc;
#adminmenu li.menu-top:hover > a,
#adminmenu li.menu-top:hover > .wp-menu-arrow {
background-color: #e4e4e4;
text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
color: #d54e21;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
@ -965,6 +956,8 @@ table.widefat .spam a:hover,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-has-current-submenu .wp-menu-arrow,
#adminmenu .current .wp-menu-arrow,
#adminmenu li.wp-has-current-submenu:hover > .wp-menu-arrow,
#adminmenu li.current:hover > .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background-color: #777; /* Fallback */
background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */
@ -975,16 +968,7 @@ table.widefat .spam a:hover,
background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
}
#adminmenu li.wp-not-current-submenu li:hover a {
background-color: #eaf2fa; /* Fallback */
background-image: -ms-linear-gradient(left, #fff, #eaf2fa 30px); /* IE10 */
background-image: -moz-linear-gradient(left, #fff, #eaf2fa 30px); /* Firefox */
background-image: -o-linear-gradient(left, #fff, #eaf2fa 30px); /* Opera */
background-image: -webkit-gradient(linear, left bottom, right bottom, from(#fff), color-stop(0.1, #eaf2fa)); /* old Webkit */
background-image: -webkit-linear-gradient(left, #fff, #eaf2fa 30px); /* new Webkit */
background-image: linear-gradient(left, #fff, #eaf2fa 30px); /* proposed W3C Markup */
}
.folded #adminmenu li.wp-not-current-submenu li:hover a {
.folded #adminmenu li.menu-top li:hover a {
background-image: none;
}
@ -1004,8 +988,8 @@ table.widefat .spam a:hover,
}
#adminmenu .wp-submenu a:hover {
background-color: #EAF2FA !important;
color: #333 !important;
background-color: #EAF2FA;
color: #333;
}
#adminmenu .wp-submenu li.current,

File diff suppressed because one or more lines are too long

View File

@ -1661,7 +1661,7 @@ form.upgrade .hint {
overflow: hidden;
}
#adminmenu .wp-not-current-submenu .wp-submenu,
#adminmenu li .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
display: none;
position: absolute;
@ -1679,6 +1679,7 @@ form.upgrade .hint {
#adminmenu .wp-has-current-submenu .wp-submenu {
position: relative;
display: block;
z-index: 2;
top: auto;
left: auto;
@ -1700,12 +1701,14 @@ form.upgrade .hint {
}
#adminmenu .wp-submenu.sub-open,
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
.no-js #adminmenu .wp-has-submenu:hover .wp-submenu,
.no-js.folded #adminmenu .wp-has-current-submenu:hover .wp-submenu {
padding: 0 8px 8px 0;
}
.no-js #adminmenu .wp-has-current-submenu:hover .wp-submenu {
.no-js #adminmenu .wp-has-current-submenu:hover .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu {
padding: 0;
}
@ -1762,7 +1765,7 @@ body.no-js #adminmenu .wp-menu-toggle,
}
#adminmenu li.menu-top {
min-height: 26px;
min-height: 29px;
position: relative;
}
@ -1785,18 +1788,22 @@ body.no-js #adminmenu .wp-menu-toggle,
padding-left: 12px;
}
#adminmenu li.wp-not-current-submenu li {
#adminmenu li li {
margin-left: 8px;
}
.folded #adminmenu li.wp-not-current-submenu li {
.js.folded #adminmenu li li {
margin-left: 0;
}
#adminmenu li.wp-not-current-submenu li a {
#adminmenu li li a {
padding-left: 12px;
}
.folded #adminmenu li li a {
padding-left: 0;
}
.wp-menu-arrow {
display: none;
}
@ -1813,13 +1820,18 @@ body.no-js #adminmenu .wp-menu-toggle,
}
#adminmenu li.menu-top:hover .wp-menu-arrow {
z-index: 1500;
z-index: 1001;
}
.folded #adminmenu li.menu-top:hover .wp-menu-arrow {
display: none;
}
.folded #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
display: block;
z-index: 125;
}
#adminmenu .wp-menu-arrow div {
width: 15px;
height: 30px;
@ -1832,10 +1844,8 @@ body.no-js #adminmenu .wp-menu-toggle,
}
.folded #adminmenu li.menu-top {
width: 32px;
height: 29px;
border-width: 1px 0;
border-style: solid;
border-style: solid none;
}
#adminmenu .wp-menu-image img {
@ -1874,9 +1884,9 @@ body.no-js #adminmenu .wp-menu-toggle,
border-style: solid;
}
#adminmenu .wp-not-current-submenu .wp-submenu-wrap {
#adminmenu li .wp-submenu-wrap {
border-width: 1px 1px 1px 0;
border-style: solid;
border-style: solid solid solid none;
position: relative;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
@ -1884,10 +1894,12 @@ body.no-js #adminmenu .wp-menu-toggle,
border-top-right-radius: 3px;
}
#adminmenu li.wp-menu-open .wp-submenu-wrap {
border: 0 none;
}
.folded #adminmenu .wp-submenu .wp-submenu-wrap {
margin-top: 4px;
border-width: 0 1px 1px 0;
border-style: solid;
}
.folded #adminmenu .wp-submenu ul {

View File

@ -1,106 +1,15 @@
var showNotice, adminMenu, columns, validateForm, screenMeta, autofold_menu;
(function($){
// sidebar admin menu
// Removed in 3.3.
// (perhaps) needed for back-compat
adminMenu = {
init : function() {
var menu = $('#adminmenu');
this.favorites();
$('#collapse-menu', menu).click(function(){
if ( $('body').hasClass('folded') ) {
adminMenu.fold(1);
deleteUserSetting( 'mfold' );
} else {
adminMenu.fold();
setUserSetting( 'mfold', 'f' );
}
return false;
});
this.flyout( $('#adminmenu li.wp-has-submenu') );
this.fold( ! $('body').hasClass('folded') );
},
restoreMenuState : function() {
// (perhaps) needed for back-compat
},
flyout: function( el, unbind ) {
if ( unbind ) {
el.unbind(); // Unbind flyout
return;
}
el.hoverIntent({
over: function(e){
var m, b, h, o, f;
m = $(this).find('.wp-submenu');
b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu
h = $('#wpwrap').height(); // Height of the entire page
o = 60 + b - h;
f = $(window).height() + $(window).scrollTop() - 15; // The fold
if ( f < (b - o) ) {
o = b - f;
}
if ( o > 1 ) {
m.css({'marginTop':'-'+o+'px'});
} else if ( m.css('marginTop') ) {
m.css({'marginTop':''});
}
m.addClass('sub-open');
},
out: function(){
$(this).find('.wp-submenu').removeClass('sub-open');
},
timeout: 220,
sensitivity: 4,
interval: 50
});
},
toggle : function() {
// Removed in 3.3.
// (perhaps) needed for back-compat
},
fold : function( off ) {
var current = $('#adminmenu li.wp-has-current-submenu');
$('body').toggleClass( 'folded', ! off );
this.flyout( current, off );
// Remove any potentially remaining hoverIntent positioning.
if ( off )
current.find('.wp-submenu').css( 'marginTop', '0' );
},
favorites : function() {
$('#favorite-inside').width( $('#favorite-actions').width() - 4 );
$('#favorite-toggle, #favorite-inside').bind('mouseenter', function() {
$('#favorite-inside').removeClass('slideUp').addClass('slideDown');
setTimeout(function() {
if ( $('#favorite-inside').hasClass('slideDown') ) {
$('#favorite-inside').slideDown(100);
$('#favorite-first').addClass('slide-down');
}
}, 200);
}).bind('mouseleave', function() {
$('#favorite-inside').removeClass('slideDown').addClass('slideUp');
setTimeout(function() {
if ( $('#favorite-inside').hasClass('slideUp') ) {
$('#favorite-inside').slideUp(100, function() {
$('#favorite-first').removeClass('slide-down');
});
}
}, 300);
});
}
init : function() {},
fold : function() {},
restoreMenuState : function() {},
toggle : function() {},
favorites : function() {}
};
$(document).ready(function(){ adminMenu.init(); });
// show/hide/save table columns
columns = {
init : function() {
@ -277,8 +186,49 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
});
$(document).ready( function() {
var lastClicked = false, checks, first, last, checked,
pageInput = $('input.current-page'), currentPage = pageInput.val();
var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
pageInput = $('input.current-page'), currentPage = pageInput.val(), folded;
// admin menu
$('#collapse-menu', menu).click(function(){
var body = $(document.body);
if ( body.hasClass('folded') ) {
body.removeClass('folded');
deleteUserSetting('mfold');
} else {
body.addClass('folded');
setUserSetting('mfold', 'f');
}
return false;
});
$('li.wp-has-submenu', menu).hoverIntent({
over: function(e){
var b, h, o, f, m = $(this).find('.wp-submenu');
b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu
h = $('#wpwrap').height(); // Height of the entire page
o = 60 + b - h;
f = $(window).height() + $(window).scrollTop() - 15; // The fold
if ( f < (b - o) )
o = b - f;
if ( o > 1 )
m.css({'marginTop':'-'+o+'px'});
else if ( m.css('marginTop') )
m.css({'marginTop':''});
m.addClass('sub-open');
},
out: function(){
$(this).find('.wp-submenu').removeClass('sub-open');
},
timeout: 200,
sensitivity: 7,
interval: 90
});
// Move .updated and .error alert boxes. Don't move boxes designed to be inline.
$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
@ -393,7 +343,17 @@ $(document).ready( function() {
var width = $(window).width();
// fold admin menu
adminMenu.fold( width >= 800 );
if ( width <= 800 ) {
if ( !folded ) {
$(document.body).addClass('folded');
folded = true;
}
} else {
if ( folded ) {
$(document.body).removeClass('folded');
folded = false;
}
}
}).triggerHandler('resize');
});

File diff suppressed because one or more lines are too long

View File

@ -57,11 +57,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
$menu_setting_increment++;
}
if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) ) {
if ( ( $parent_file && $item[2] == $parent_file ) || ( empty($typenow) && $self == $item[2] ) )
$class[] = ! empty( $submenu_items ) ? 'wp-has-current-submenu wp-menu-open' : 'current';
} else {
$class[] = 'wp-not-current-submenu';
}
if ( ! empty( $item[4] ) )
$class[] = $item[4];

View File

@ -61,7 +61,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'utils', "/wp-admin/js/utils$suffix.js", false, '20101110' );
$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20111004', 1 );
$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20111005', 1 );
$scripts->add_script_data( 'common', 'commonL10n', array(
'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.")
) );
@ -431,13 +431,13 @@ function wp_default_styles( &$styles ) {
// Any rtl stylesheets that don't have a .dev version for ltr
$no_suffix = array( 'farbtastic' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111005b' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111005c' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20110919' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
// all colors stylesheets need to have the same query strings (cache manifest compat)
$colors_version = '20111005';
$colors_version = '20111005a';
// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
$styles->add( 'colors', true, array('wp-admin'), $colors_version );