mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-04 18:01:42 +01:00
Fix menu hover when loaded folded, simplify menu JS and auto-folding, see #18382
git-svn-id: http://svn.automattic.com/wordpress/trunk@18901 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz
parent
53ac6d4a37
commit
0e358f2179
File diff suppressed because one or more lines are too long
@ -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
@ -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 {
|
||||
|
||||
@ -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
@ -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];
|
||||
|
||||
@ -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 );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user