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

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 2011-08-30 01:12:26 +00:00
parent 81871e05b4
commit 51fa6f62f2
9 changed files with 159 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/admin-header.php
View File

@ -89,6 +89,8 @@ do_action('admin_head');
if ( get_user_setting('mfold') == 'f' ) if ( get_user_setting('mfold') == 'f' )
$admin_body_class .= ' folded'; $admin_body_class .= ' folded';
else
$admin_body_class .= ' expanded';
if ( is_admin_bar_showing() ) if ( is_admin_bar_showing() )
$admin_body_class .= ' admin-bar'; $admin_body_class .= ' admin-bar';

2
wp-admin/css/colors-fresh.css
View File

File diff suppressed because one or more lines are too long

36
wp-admin/css/colors-fresh.dev.css
View File

@ -1,7 +1,7 @@
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
Howdy! This is the CSS file that controls the Howdy! This is the CSS file that controls the
Gray (fresh) color style on the WordPress Dashboard. Gray (fresh) color style on the WordPress Dashboard.
This file contains both LTR and RTL styles. This file contains both LTR and RTL styles.
@ -952,11 +952,27 @@ table.widefat .spam a:hover,
border-color: #dfdfdf; 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.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top, #adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top, .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 { #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background-color: #777; /* Fallback */ background-color: #777; /* Fallback */
background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */ 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 */ 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.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top, #adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
@ -997,12 +1023,12 @@ table.widefat .spam a:hover,
background-color: #fff; background-color: #fff;
} }
.folded #adminmenu .wp-submenu-wrap, #adminmenu .wp-submenu-wrap,
.folded #adminmenu .wp-submenu ul { #adminmenu .wp-submenu ul {
border-color: #dfdfdf; border-color: #dfdfdf;
} }
.folded #adminmenu .wp-submenu-wrap { #adminmenu .wp-submenu-wrap {
-moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
-webkit-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 ); box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );

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

File diff suppressed because one or more lines are too long

89
wp-admin/css/wp-admin.dev.css
View File

@ -77,8 +77,9 @@ TABLE OF CONTENTS:
#adminmenuback, #adminmenuback,
#adminmenuwrap, #adminmenuwrap,
#adminmenu, #adminmenu,
.js.folded #adminmenu .wp-submenu.sub-open, .js #adminmenu .wp-submenu.sub-open,
.js.folded #adminmenu .wp-submenu-wrap { .js #adminmenu .wp-submenu-wrap,
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
width: 145px; width: 145px;
} }
@ -1696,12 +1697,50 @@ form.upgrade .hint {
} }
#adminmenu .wp-submenu { #adminmenu .wp-submenu {
display: none;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 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; position: relative;
z-index: 2; 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 { #adminmenu .wp-submenu a {
@ -1786,11 +1825,20 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
padding-left: 12px; 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 { .wp-menu-arrow {
display: none; display: none;
} }
#adminmenu li.wp-has-current-submenu .wp-menu-arrow, #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; display: block;
position: absolute; position: absolute;
right: -9px; right: -9px;
@ -1798,6 +1846,11 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
cursor: auto; cursor: auto;
z-index: 25; z-index: 25;
} }
.expanded #adminmenu li.menu-top:hover .wp-menu-arrow {
z-index: 1500;
}
#adminmenu .wp-menu-arrow div { #adminmenu .wp-menu-arrow div {
width: 15px; width: 15px;
height: 30px; height: 30px;
@ -1845,24 +1898,6 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
border-style: solid; 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 { #adminmenu .wp-submenu .wp-submenu-head {
padding: 6px 4px 5px 10px; padding: 6px 4px 5px 10px;
cursor: default; cursor: default;
@ -1870,9 +1905,8 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
border-style: solid; border-style: solid;
} }
.js.folded #adminmenu .wp-submenu-wrap { .js #adminmenu .wp-not-current-submenu .wp-submenu-wrap {
margin-top: 4px; border-width: 1px 1px 1px 0;
border-width: 0 1px 1px 0;
border-style: solid; border-style: solid;
position: relative; position: relative;
-webkit-border-bottom-right-radius: 3px; -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; 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 { .js.folded #adminmenu .wp-submenu ul {
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
border-style: solid; border-style: solid;

102
wp-admin/js/common.dev.js
View File

@ -5,14 +5,6 @@ adminMenu = {
init : function() { init : function() {
var menu = $('#adminmenu'); 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(); this.favorites();
$('#collapse-menu', menu).click(function(){ $('#collapse-menu', menu).click(function(){
@ -26,63 +18,63 @@ adminMenu = {
return false; return false;
}); });
if ( $('body').hasClass('folded') ) this.flyout( $('#adminmenu li.wp-has-submenu') );
this.fold();
this.fold( ! $('body').hasClass('folded') );
}, },
restoreMenuState : function() { restoreMenuState : function() {
// (perhaps) needed for back-compat // (perhaps) needed for back-compat
}, },
toggle : function(el) { flyout: function( el, unbind ) {
el.slideToggle(150, function() { if ( unbind ) {
var id = el.css('display','').parent().toggleClass( 'wp-menu-open' ).attr('id'); el.unbind(); // Unbind flyout
if ( id ) { return;
$('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 );
}
});
}
});
return false; 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: 8,
interval: 100
});
}, },
fold : function(off) { toggle : function() {
if (off) { // Removed in 3.3.
$('body').removeClass('folded'); // (perhaps) needed for back-compat
$('#adminmenu li.wp-has-submenu').unbind(); },
} else {
$('body').addClass('folded');
$('#adminmenu li.wp-has-submenu').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: 8,
interval: 100
});
} 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() { favorites : function() {

2
wp-admin/js/common.js
View File

File diff suppressed because one or more lines are too long

13
wp-admin/menu-header.php
View File

@ -58,8 +58,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
$class[] = 'wp-has-current-submenu wp-menu-open'; $class[] = 'wp-has-current-submenu wp-menu-open';
else else
$class[] = 'current'; $class[] = 'current';
} elseif ( ! empty( $submenu[ $item[2] ] ) && isset( $user_settings[ 'm' . $menu_setting_increment ] ) && 'o' == $user_settings[ 'm' . $menu_setting_increment ] ) { } else {
$class[] = 'wp-menu-open'; $class[] = 'wp-not-current-submenu';
} }
if ( ! empty($item[4]) ) if ( ! empty($item[4]) )
@ -75,7 +75,6 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
else else
$img = '<img src="' . $item[6] . '" alt="" />'; $img = '<img src="' . $item[6] . '" alt="" />';
} }
$toggle = '<div class="wp-menu-toggle"><br /></div>';
$arrow = '<div class="wp-menu-arrow"><div></div></div>'; $arrow = '<div class="wp-menu-arrow"><div></div></div>';
$title = wptexturize($item[0]); $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); $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)) { if ( ( ('index.php' != $submenu[$item[2]][0][2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") ) || !empty($menu_hook)) {
$admin_is_parent = true; $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 { } 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]) ) { } else if ( !empty($item[2]) && current_user_can($item[1]) ) {
$menu_hook = get_plugin_page_hook($item[2], 'admin.php'); $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); $menu_file = substr($menu_file, 0, $pos);
if ( ('index.php' != $item[2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") || !empty($menu_hook) ) { if ( ('index.php' != $item[2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") || !empty($menu_hook) ) {
$admin_is_parent = true; $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 { } 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>";
} }
} }

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

@ -61,7 +61,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'utils', "/wp-admin/js/utils$suffix.js", false, '20101110' ); $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( $scripts->add_script_data( 'common', 'commonL10n', array(
'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.") 'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.")
) ); ) );
@ -155,7 +155,7 @@ function wp_default_scripts( &$scripts ) {
// common bits for both uploaders // common bits for both uploaders
$max_upload_size = ( (int) ( $max_up = @ini_get('upload_max_filesize') ) < (int) ( $max_post = @ini_get('post_max_size') ) ) ? $max_up : $max_post; $max_upload_size = ( (int) ( $max_up = @ini_get('upload_max_filesize') ) < (int) ( $max_post = @ini_get('post_max_size') ) ) ? $max_up : $max_post;
if ( empty($max_upload_size) ) if ( empty($max_upload_size) )
$max_upload_size = __('not configured'); $max_upload_size = __('not configured');
@ -402,13 +402,13 @@ function wp_default_styles( &$styles ) {
// Any rtl stylesheets that don't have a .dev version for ltr // Any rtl stylesheets that don't have a .dev version for ltr
$no_suffix = array( 'farbtastic' ); $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( 'ie', "/wp-admin/css/ie$suffix.css", array('wp-admin'), '20110711' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' ); $styles->add_data( 'ie', 'conditional', 'lte IE 7' );
// all colors stylesheets need to have the same query strings (cache manifest compat) // 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. // 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 ); $styles->add( 'colors', true, array('wp-admin'), $colors_version );
@ -658,7 +658,7 @@ function wp_enqueue_scripts() {
/** /**
* Prints the styles queue in the HTML head on admin pages. * Prints the styles queue in the HTML head on admin pages.
* *
* @since 2.8 * @since 2.8
*/ */
function print_admin_styles() { function print_admin_styles() {
@ -732,7 +732,7 @@ function _print_styles() {
/** /**
* Determine the concatenation and compression settings for scripts and styles. * Determine the concatenation and compression settings for scripts and styles.
* *
* @since 2.8 * @since 2.8
*/ */
function script_concat_settings() { function script_concat_settings() {