Switch admin menus to flyouts from dropdowns. First pass, see #18382.
git-svn-id: http://svn.automattic.com/wordpress/trunk@18621 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith
parent
81871e05b4
commit
51fa6f62f2
|
|
@ -89,6 +89,8 @@ do_action('admin_head');
|
|||
|
||||
if ( get_user_setting('mfold') == 'f' )
|
||||
$admin_body_class .= ' folded';
|
||||
else
|
||||
$admin_body_class .= ' expanded';
|
||||
|
||||
if ( is_admin_bar_showing() )
|
||||
$admin_body_class .= ' admin-bar';
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -952,11 +952,27 @@ table.widefat .spam a:hover,
|
|||
border-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.expanded #adminmenu li.wp-not-current-submenu:hover a.menu-top,
|
||||
.expanded #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow {
|
||||
background-color: #eee; /* Fallback */
|
||||
background-image: -ms-linear-gradient(bottom, #ccc, #eee); /* IE10 */
|
||||
background-image: -moz-linear-gradient(bottom, #ccc, #eee); /* Firefox */
|
||||
background-image: -o-linear-gradient(bottom, #ccc, #eee); /* Opera */
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee)); /* old Webkit */
|
||||
background-image: -webkit-linear-gradient(bottom, #ccc, #e4e4e4); /* new Webkit */
|
||||
background-image: linear-gradient(bottom, #ccc, #eee); /* proposed W3C Markup */
|
||||
border-top-color: #e4e4e4;
|
||||
border-bottom-color: #ccc;
|
||||
text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 );
|
||||
color: #d54e21;
|
||||
}
|
||||
|
||||
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
|
||||
#adminmenu li.current a.menu-top,
|
||||
.folded #adminmenu li.wp-has-current-submenu,
|
||||
.folded #adminmenu li.current.menu-top,
|
||||
#adminmenu .wp-menu-arrow,
|
||||
#adminmenu .wp-has-current-submenu .wp-menu-arrow,
|
||||
#adminmenu .current .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 */
|
||||
|
|
@ -967,6 +983,16 @@ table.widefat .spam a:hover,
|
|||
background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
|
||||
}
|
||||
|
||||
.expanded #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 */
|
||||
}
|
||||
|
||||
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
|
||||
#adminmenu li.current a.menu-top,
|
||||
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
|
||||
|
|
@ -997,12 +1023,12 @@ table.widefat .spam a:hover,
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.folded #adminmenu .wp-submenu-wrap,
|
||||
.folded #adminmenu .wp-submenu ul {
|
||||
#adminmenu .wp-submenu-wrap,
|
||||
#adminmenu .wp-submenu ul {
|
||||
border-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.folded #adminmenu .wp-submenu-wrap {
|
||||
#adminmenu .wp-submenu-wrap {
|
||||
-moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
|
||||
-webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
|
||||
box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -77,8 +77,9 @@ TABLE OF CONTENTS:
|
|||
#adminmenuback,
|
||||
#adminmenuwrap,
|
||||
#adminmenu,
|
||||
.js.folded #adminmenu .wp-submenu.sub-open,
|
||||
.js.folded #adminmenu .wp-submenu-wrap {
|
||||
.js #adminmenu .wp-submenu.sub-open,
|
||||
.js #adminmenu .wp-submenu-wrap,
|
||||
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
|
|
@ -1696,12 +1697,50 @@ form.upgrade .hint {
|
|||
}
|
||||
|
||||
#adminmenu .wp-submenu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#adminmenu .wp-not-current-submenu .wp-submenu,
|
||||
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 146px;
|
||||
z-index: 999;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
-moz-transition: width 200ms ease-out;
|
||||
-webkit-transition: width 200ms ease-out;
|
||||
-o-transition: width 200ms ease-out;
|
||||
transition: width 200ms ease-out;
|
||||
}
|
||||
|
||||
.expanded #adminmenu .wp-has-current-submenu .wp-submenu {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 145px;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expanded #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.js.folded #adminmenu .wp-submenu {
|
||||
top: -5px;
|
||||
left: 26px;
|
||||
}
|
||||
.js #adminmenu .wp-submenu.sub-open {
|
||||
padding: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
#adminmenu .wp-submenu a {
|
||||
|
|
@ -1786,11 +1825,20 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
|
|||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.expanded #adminmenu li.wp-not-current-submenu li {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.expanded #adminmenu li.wp-not-current-submenu li a {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.wp-menu-arrow {
|
||||
display: none;
|
||||
}
|
||||
#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
|
||||
#adminmenu li.menu-top.current .wp-menu-arrow {
|
||||
#adminmenu li.menu-top.current .wp-menu-arrow,
|
||||
.expanded #adminmenu li.wp-has-submenu:hover .wp-menu-arrow {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -9px;
|
||||
|
|
@ -1798,6 +1846,11 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
|
|||
cursor: auto;
|
||||
z-index: 25;
|
||||
}
|
||||
|
||||
.expanded #adminmenu li.menu-top:hover .wp-menu-arrow {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
#adminmenu .wp-menu-arrow div {
|
||||
width: 15px;
|
||||
height: 30px;
|
||||
|
|
@ -1845,24 +1898,6 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
|
|||
border-style: solid;
|
||||
}
|
||||
|
||||
.js.folded #adminmenu .wp-submenu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 26px;
|
||||
z-index: 999;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
-moz-transition: width 200ms ease-out;
|
||||
-webkit-transition: width 200ms ease-out;
|
||||
-o-transition: width 200ms ease-out;
|
||||
transition: width 200ms ease-out;
|
||||
}
|
||||
.js.folded #adminmenu .wp-submenu.sub-open {
|
||||
padding: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
#adminmenu .wp-submenu .wp-submenu-head {
|
||||
padding: 6px 4px 5px 10px;
|
||||
cursor: default;
|
||||
|
|
@ -1870,9 +1905,8 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
|
|||
border-style: solid;
|
||||
}
|
||||
|
||||
.js.folded #adminmenu .wp-submenu-wrap {
|
||||
margin-top: 4px;
|
||||
border-width: 0 1px 1px 0;
|
||||
.js #adminmenu .wp-not-current-submenu .wp-submenu-wrap {
|
||||
border-width: 1px 1px 1px 0;
|
||||
border-style: solid;
|
||||
position: relative;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
|
|
@ -1885,6 +1919,11 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
|
|||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.js.folded #adminmenu .wp-submenu .wp-submenu-wrap {
|
||||
margin-top: 4px;
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
.js.folded #adminmenu .wp-submenu ul {
|
||||
border-width: 0 0 0 1px;
|
||||
border-style: solid;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,6 @@ adminMenu = {
|
|||
init : function() {
|
||||
var menu = $('#adminmenu');
|
||||
|
||||
$('.wp-menu-toggle', menu).each( function() {
|
||||
var t = $(this), sub = t.siblings('.wp-submenu');
|
||||
if ( sub.length )
|
||||
t.click(function(){ adminMenu.toggle( sub ); });
|
||||
else
|
||||
t.hide();
|
||||
});
|
||||
|
||||
this.favorites();
|
||||
|
||||
$('#collapse-menu', menu).click(function(){
|
||||
|
|
@ -26,37 +18,22 @@ adminMenu = {
|
|||
return false;
|
||||
});
|
||||
|
||||
if ( $('body').hasClass('folded') )
|
||||
this.fold();
|
||||
this.flyout( $('#adminmenu li.wp-has-submenu') );
|
||||
|
||||
this.fold( ! $('body').hasClass('folded') );
|
||||
},
|
||||
|
||||
restoreMenuState : function() {
|
||||
// (perhaps) needed for back-compat
|
||||
},
|
||||
|
||||
toggle : function(el) {
|
||||
el.slideToggle(150, function() {
|
||||
var id = el.css('display','').parent().toggleClass( 'wp-menu-open' ).attr('id');
|
||||
if ( id ) {
|
||||
$('li.wp-has-submenu', '#adminmenu').each(function(i, e) {
|
||||
if ( id == e.id ) {
|
||||
var v = $(e).hasClass('wp-menu-open') ? 'o' : 'c';
|
||||
setUserSetting( 'm'+i, v );
|
||||
flyout: function( el, unbind ) {
|
||||
if ( unbind ) {
|
||||
el.unbind(); // Unbind flyout
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
fold : function(off) {
|
||||
if (off) {
|
||||
$('body').removeClass('folded');
|
||||
$('#adminmenu li.wp-has-submenu').unbind();
|
||||
} else {
|
||||
$('body').addClass('folded');
|
||||
$('#adminmenu li.wp-has-submenu').hoverIntent({
|
||||
el.hoverIntent({
|
||||
over: function(e){
|
||||
var m, b, h, o, f;
|
||||
m = $(this).find('.wp-submenu');
|
||||
|
|
@ -81,8 +58,23 @@ adminMenu = {
|
|||
sensitivity: 8,
|
||||
interval: 100
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
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 );
|
||||
$('body').toggleClass( 'expanded', off );
|
||||
this.flyout( current, off );
|
||||
|
||||
// Remove any potentially remaining hoverIntent positioning.
|
||||
if ( off )
|
||||
current.find('.wp-submenu').css( 'marginTop', '0' );
|
||||
},
|
||||
|
||||
favorites : function() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -58,8 +58,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
|
|||
$class[] = 'wp-has-current-submenu wp-menu-open';
|
||||
else
|
||||
$class[] = 'current';
|
||||
} elseif ( ! empty( $submenu[ $item[2] ] ) && isset( $user_settings[ 'm' . $menu_setting_increment ] ) && 'o' == $user_settings[ 'm' . $menu_setting_increment ] ) {
|
||||
$class[] = 'wp-menu-open';
|
||||
} else {
|
||||
$class[] = 'wp-not-current-submenu';
|
||||
}
|
||||
|
||||
if ( ! empty($item[4]) )
|
||||
|
|
@ -75,7 +75,6 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
|
|||
else
|
||||
$img = '<img src="' . $item[6] . '" alt="" />';
|
||||
}
|
||||
$toggle = '<div class="wp-menu-toggle"><br /></div>';
|
||||
$arrow = '<div class="wp-menu-arrow"><div></div></div>';
|
||||
|
||||
$title = wptexturize($item[0]);
|
||||
|
|
@ -92,9 +91,9 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
|
|||
$menu_file = substr($menu_file, 0, $pos);
|
||||
if ( ( ('index.php' != $submenu[$item[2]][0][2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") ) || !empty($menu_hook)) {
|
||||
$admin_is_parent = true;
|
||||
echo "<div class='wp-menu-image'><a href='admin.php?page={$submenu[$item[2]][0][2]}'>$img</a></div>$arrow$toggle<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class$tabindex>$title</a>";
|
||||
echo "<div class='wp-menu-image'><a href='admin.php?page={$submenu[$item[2]][0][2]}'>$img</a></div>$arrow<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class$tabindex>$title</a>";
|
||||
} else {
|
||||
echo "\n\t<div class='wp-menu-image'><a href='{$submenu[$item[2]][0][2]}'>$img</a></div>$arrow$toggle<a href='{$submenu[$item[2]][0][2]}'$class$tabindex>$title</a>";
|
||||
echo "\n\t<div class='wp-menu-image'><a href='{$submenu[$item[2]][0][2]}'>$img</a></div>$arrow<a href='{$submenu[$item[2]][0][2]}'$class$tabindex>$title</a>";
|
||||
}
|
||||
} else if ( !empty($item[2]) && current_user_can($item[1]) ) {
|
||||
$menu_hook = get_plugin_page_hook($item[2], 'admin.php');
|
||||
|
|
@ -103,9 +102,9 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
|
|||
$menu_file = substr($menu_file, 0, $pos);
|
||||
if ( ('index.php' != $item[2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") || !empty($menu_hook) ) {
|
||||
$admin_is_parent = true;
|
||||
echo "\n\t<div class='wp-menu-image'><a href='admin.php?page={$item[2]}'>$img</a></div>$arrow$toggle<a href='admin.php?page={$item[2]}'$class$tabindex>{$item[0]}</a>";
|
||||
echo "\n\t<div class='wp-menu-image'><a href='admin.php?page={$item[2]}'>$img</a></div>$arrow<a href='admin.php?page={$item[2]}'$class$tabindex>{$item[0]}</a>";
|
||||
} else {
|
||||
echo "\n\t<div class='wp-menu-image'><a href='{$item[2]}'>$img</a></div>$arrow$toggle<a href='{$item[2]}'$class$tabindex>{$item[0]}</a>";
|
||||
echo "\n\t<div class='wp-menu-image'><a href='{$item[2]}'>$img</a></div>$arrow<a href='{$item[2]}'$class$tabindex>{$item[0]}</a>";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'), '20110711', 1 );
|
||||
$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20110829', 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.")
|
||||
) );
|
||||
|
|
@ -402,13 +402,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(), '20110828' );
|
||||
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110829' );
|
||||
|
||||
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array('wp-admin'), '20110711' );
|
||||
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
|
||||
|
||||
// all colors stylesheets need to have the same query strings (cache manifest compat)
|
||||
$colors_version = '20110822';
|
||||
$colors_version = '20110829';
|
||||
|
||||
// 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