Admin menu styling

git-svn-id: http://svn.automattic.com/wordpress/trunk@9306 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2008-10-23 22:19:19 +00:00
parent 965d8d1507
commit 076763cfff
10 changed files with 217 additions and 103 deletions

View File

@ -340,11 +340,8 @@ h3.dashboard-widget-title small a:hover {
color: #666;
}
#adminmenu li.wp-has-submenu a {
color: #333;
}
#adminmenu a, #adminmenu ul.wp-submenu a, #poststuff #edButtonPreview, #poststuff #edButtonHTML, #the-comment-list p.comment-author strong a, #media-upload a.del-link, #media-upload a.delete, .ui-tabs-nav a, .ui-sortable .postbox h3:hover span, a, #edit-settings a.show-settings {
#adminmenu a, #poststuff #edButtonPreview, #poststuff #edButtonHTML, #the-comment-list p.comment-author strong a, #media-upload a.del-link, #media-upload a.delete, .ui-tabs-nav a, .ui-sortable .postbox h3:hover span, a, #edit-settings a.show-settings {
color: #2583ad;
}
@ -356,15 +353,6 @@ body.press-this .ui-tabs-selected a, body.press-this .ui-tabs-selected a:hover {
color: #d54e21;
}
#adminmenu li.current a, #sidemenu a.current {
background-color: #fff;
color: #d54e21;
}
#adminmenu li.current {
background-color: #fff;
}
#adminmenu li a #awaiting-mod {
background-image: url(../images/comment-stalk-fresh.gif);
}
@ -773,7 +761,6 @@ table.diff .diff-addedline ins {
background-color: #99ff99;
}
#adminmenu li,
#att-info {
background-color: #E4F2FD;
}

View File

@ -19,7 +19,7 @@
#adminmenu {
float: left;
clear: left;
margin: 10px 8px;
margin: 15px 5px 15px 18px;
position: relative;
}

View File

@ -1,7 +1,7 @@
/* Fixes for IE bugs */
* html #wpbody-content {
margin-left: 140px;
margin-left: 160px;
}
* html #wpbody {
@ -23,6 +23,10 @@
overflow: hidden;
}
* html #footer {
width: 100%;
}
.metabox-holder .postbox h3 {
padding-left: 23px;
}
@ -54,12 +58,25 @@ input.button, input.button-secondary, input.button-highlighted {
z-index: 1;
}
#adminmenu.folded .wp-submenu {
margin: -1px 0 0 4px;
#adminmenu li.wp-has-submenu {
padding: 0;
margin: 0;
}
#adminmenu li.wp-has-submenu {
margin: 2px 0;
#adminmenu a.wp-has-submenu {
}
ul.wp-submenu, ul.wp-submenu li,
ul.wp-submenu a,
#adminmenu a.wp-has-submenu,
#adminmenu .wp-menu-image {
display: block;
zoom: 100%;
}
#adminmenu.folded .wp-submenu {
margin: -1px 0 0 4px;
}
#adminmenu.folded li.wp-has-submenu {
@ -67,18 +84,13 @@ input.button, input.button-secondary, input.button-highlighted {
}
#wpcontent #adminmenu ul.wp-submenu a {
padding: 2px 4px 2px 8px;
padding: 2px 4px 2px 10px;
margin: 0;
line-height: 20px;
}
ul.wp-submenu, ul.wp-submenu li, ul.wp-submenu a {
display: block;
zoom: 100%;
line-height: 18px;
}
* html #wpcontent #adminmenu {
margin: 8px 4px;
margin: 8px 9px;
}
#wpcontent #adminmenu ul.wp-submenu li {
@ -89,12 +101,15 @@ ul.wp-submenu, ul.wp-submenu li, ul.wp-submenu a {
padding: 3px 4px 4px 10px;
}
/*
ul#adminmenu li.wp-menu-separator {
background-color: #fff;
height: 3px;
line-height: 3px;
font-size: 3px;
}
*/
#template, #template div, #editcat, #addcat {
zoom: 100%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -4,22 +4,18 @@ adminMenu = {
init : function() {
$('#adminmenu a').attr('tabindex', '10');
$('#adminmenu a.wp-has-submenu').click( function() { return adminMenu.toggle( $(this).siblings('ul') ); } );
$('#adminmenu li.wp-has-submenu img.wp-menu-image').dblclick( function() { window.location = $(this).siblings('a.wp-has-submenu')[0].href; } );
var li = document.createElement('li'); // temp
$(li).attr('id', 'menu-toggle').html('««').click(function(){
if ( 'o' == getUserSetting( 'mfold' ) ) {
adminMenu.fold();
setUserSetting( 'mfold', 'f' );
$(this).html('»»');
} else {
$('#adminmenu div.wp-menu-toggle').click( function() { return adminMenu.toggle( $(this).siblings('ul') ); } );
$('#adminmenu li.wp-has-submenu img.wp-menu-image').dblclick( function() { adminMenu.fold(); } );
$('.wp-menu-separator').click(function(){
if ( $('#adminmenu').hasClass('folded') ) {
adminMenu.fold(1);
setUserSetting( 'mfold', 'o' );
$(this).html('««');
} else {
adminMenu.fold();
setUserSetting( 'mfold', 'f' );
}
});
$('#adminmenu').prepend(li);
if ( 'o' == getUserSetting( 'mfold' ) ) {
$('#adminmenu li.wp-has-submenu').each(function(i, e) {
@ -31,7 +27,6 @@ adminMenu = {
});
} else {
this.fold();
$('#menu-toggle').html('»»');
}
},
@ -52,18 +47,20 @@ adminMenu = {
fold : function(off) {
if (off) {
if ( $.browser.msie && $.browser.version.charAt(0) == 6 )
$('#wpbody-content').css('marginLeft', '140px');
$('#wpbody-content').css('marginLeft', '180px');
$('#adminmenu').removeClass('folded');
$('#adminmenu li.wp-submenu-head').hide();
$('#adminmenu a.wp-has-submenu').show();
$('#adminmenu a.wp-has-submenu, #adminmenu div.wp-menu-toggle').show();
$('#adminmenu li.wp-has-submenu').unbind().css('width', '');
$('#adminmenu li.wp-has-submenu img.wp-menu-image').unbind().dblclick( function() { adminMenu.fold(); } );
} else {
$('#adminmenu').addClass('folded');
$('#adminmenu a.wp-has-submenu, #adminmenu .wp-submenu').hide();
$('#adminmenu a.wp-has-submenu, #adminmenu .wp-submenu, #adminmenu div.wp-menu-toggle').hide();
$('#adminmenu li.wp-submenu-head').show();
$('#adminmenu li.wp-has-submenu img.wp-menu-image').unbind().dblclick( function() { window.location = $(this).siblings('a.wp-has-submenu')[0].href; } );
if ( $.browser.msie && $.browser.version.charAt(0) == 6 )
$('#wpbody-content').css('marginLeft', '40px');
$('#adminmenu li.wp-has-submenu').css({'width':'24px'}).hoverIntent({
$('#wpbody-content').css('marginLeft', '60px');
$('#adminmenu li.wp-has-submenu').css({'width':'28px'}).hoverIntent({
over: function(){ $(this).find('.wp-submenu').show(); },
out: function(){ $(this).find('.wp-submenu').hide(); },
timeout: 220,

View File

@ -34,7 +34,7 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
global $self, $parent_file, $submenu_file, $plugin_page, $pagenow;
$first = true;
// 0 = name, 1 = capability, 2 = file, 3 = class, 4 = id, 5 = image src
// 0 = name, 1 = capability, 2 = file, 3 = class, 4 = id, 5 = icon src
foreach ( $menu as $key => $item ) {
$class = array();
if ( $first ) {
@ -57,6 +57,7 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
$class = $class ? ' class="' . join( ' ', $class ) . '"' : '';
$id = isset($item[5]) && ! empty($item[5]) ? ' id="' . $item[5] . '"' : '';
$img = isset($item[6]) && ! empty($item[6]) ? '<img class="wp-menu-image" src="' . $item[6] . '" alt="" />' : '';
$toggle = '<div class="wp-menu-toggle"><br /></div>';
echo "\n\t<li$class$id>";
@ -66,15 +67,15 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
$submenu[$item[2]] = array_values($submenu[$item[2]]); // Re-index.
$menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]);
if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook))
echo "$img<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
echo "$img$toggle<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
else
echo "\n\t$img<a href='{$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
echo "\n\t$img$toggle<a href='{$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
} else if ( current_user_can($item[1]) ) {
$menu_hook = get_plugin_page_hook($item[2], 'admin.php');
if ( file_exists(WP_PLUGIN_DIR . "/{$item[2]}") || !empty($menu_hook) ) {
echo "\n\t$img<a href='admin.php?page={$item[2]}'$class>{$item[0]}</a>";
echo "\n\t$img$toggle<a href='admin.php?page={$item[2]}'$class>{$item[0]}</a>";
} else {
echo "\n\t$img<a href='{$item[2]}'$class>{$item[0]}</a>";
echo "\n\t$img$toggle<a href='{$item[2]}'$class>{$item[0]}</a>";
}
}

View File

@ -14,7 +14,8 @@
* 1: Minimum level or capability required.
* 2: The URL of the item's file
* 3: Class
* 4: ID
* 4: ID
* 5: Icon for top level menu
*
* @global array $menu
* @name $menu
@ -24,12 +25,12 @@
$awaiting_mod = wp_count_comments();
$awaiting_mod = $awaiting_mod->moderated;
$menu[0] = array( __('Dashboard'), 'read', 'index.php', '', 'wp-menu-open', 'menu-dashboard', 'images/menu/home.png' );
$menu[0] = array( __('Dashboard'), 'read', 'index.php', '', 'wp-menu-open menu-top-single', 'menu-dashboard', 'images/menu/home.png' );
$submenu['index.php'][5] = array( __('Dashboard'), 'read' , 'index.php' );
$menu[4] = array( '', 'read', '', '', 'wp-menu-separator' );
$menu[5] = array( __('Posts'), 'edit_posts', 'post-new.php', '', 'wp-menu-open', 'menu-posts', 'images/menu/posts.png' );
$menu[5] = array( __('Posts'), 'edit_posts', 'post-new.php', '', 'wp-menu-open menu-top-first', 'menu-posts', 'images/menu/posts.png' );
$submenu['post-new.php'][5] = array( _c('Add New|post'), 'edit_posts', 'post-new.php' );
//$submenu['post-new.php'][10] = array( __('Drafts'), 'edit_posts', 'edit-post-drafts.php' );
$submenu['post-new.php'][15] = array( __('Edit'), 'edit_posts', 'edit.php' );
@ -50,12 +51,12 @@ $menu[20] = array( __('Pages'), 'edit_pages', 'page-new.php', '', '', 'menu-page
//$submenu['page-new.php'][10] = array( __('Drafts'), 'edit_pages', 'edit-page-drafts.php' );
$submenu['page-new.php'][15] = array( __('Edit'), 'edit_pages', 'edit-pages.php' );
$menu[25] = array( sprintf( __('Comments %s'), "<span id='awaiting-mod' class='count-$awaiting_mod'><span class='comment-count'>" . number_format_i18n($awaiting_mod) . "</span></span>" ), 'edit_posts', 'edit-comments.php', '', '', 'menu-comments', 'images/menu/comments.png' );
$menu[25] = array( sprintf( __('Comments %s'), "<span id='awaiting-mod' class='count-$awaiting_mod'><span class='comment-count'>" . number_format_i18n($awaiting_mod) . "</span></span>" ), 'edit_posts', 'edit-comments.php', '', 'menu-top-last', 'menu-comments', 'images/menu/comments.png' );
$submenu['edit-comments.php'][15] = array( __('Comments'), 'edit_posts', 'edit-comments.php' );
$menu[29] = array( '', 'read', '', '', 'wp-menu-separator' );
$menu[30] = array( __('Appearance'), 'switch_themes', 'themes.php', '', '', 'menu-appearance', 'images/menu/appearance.png' );
$menu[30] = array( __('Appearance'), 'switch_themes', 'themes.php', '', 'menu-top-first', 'menu-appearance', 'images/menu/appearance.png' );
$submenu['themes.php'][5] = array(__('Themes'), 'switch_themes', 'themes.php');
$submenu['themes.php'][10] = array(__('Editor'), 'edit_themes', 'theme-editor.php');
@ -86,7 +87,7 @@ $menu[45] = array( __('Tools'), 'manage_options', 'import.php', '', '', 'menu-to
if ( ! $is_opera )
$submenu['import.php'][20] = array( __('Turbo'), 'read', 'turbo.php' );
$menu[50] = array( __('Settings'), 'manage_options', 'options-general.php', '', '', 'menu-settings', 'images/menu/settings.png' );
$menu[50] = array( __('Settings'), 'manage_options', 'options-general.php', '', 'menu-top-last', 'menu-settings', 'images/menu/settings.png' );
$submenu['options-general.php'][10] = array(__('General'), 'manage_options', 'options-general.php');
$submenu['options-general.php'][15] = array(__('Writing'), 'manage_options', 'options-writing.php');
$submenu['options-general.php'][20] = array(__('Reading'), 'manage_options', 'options-reading.php');
@ -96,7 +97,7 @@ $menu[50] = array( __('Settings'), 'manage_options', 'options-general.php', '',
$submenu['options-general.php'][40] = array(__('Permalinks'), 'manage_options', 'options-permalink.php');
$submenu['options-general.php'][45] = array(__('Miscellaneous'), 'manage_options', 'options-misc.php');
$menu[55] = array( '', 'read', '', '', 'wp-menu-separator' );
$menu[55] = array( '', 'read', '', '', 'wp-menu-separator-last' );
// Back-compat for old top-levels
$_wp_real_parent_file['post.php'] = 'post-new.php';

View File

@ -688,6 +688,10 @@ ul#adminmenu li.write-new-button a {
/* menu stuff */
#adminmenu * {
border-color: #e3e3e3;
}
#adminmenu .wp-submenu {
display: none;
list-style: none;
@ -719,78 +723,184 @@ ul#adminmenu li.write-new-button a {
padding: 0;
}
#adminmenu li.wp-has-submenu {
border: 1px solid #C6D9E9;
width: 125px;
min-height: 24px;
margin-top: 4px;
#adminmenu a {
display: block;
font-size: 12px !important;
line-height: 18px;
padding: 1px 5px 3px;
}
#adminmenu li.wp-has-submenu {
width: 135px;
min-height: 28px;
}
#adminmenu a.wp-has-submenu {
line-height: 18px;
padding: 6px 5px;
border-width: 1px 1px 0;
border-style: solid solid none;
background: #f1f1f1 url(images/menu-bits.gif) repeat-x scroll left -379px;
}
#adminmenu li.wp-has-current-submenu a.wp-has-submenu {
background: #b5b5b5 url(images/menu-bits.gif) repeat-x scroll left top;
color: #fff;
font-style: italic;
}
#adminmenu .wp-submenu a {
margin: 0;
padding-left: 12px;
border-width: 0 1px 0 0;
border-style: none solid none none;
background: #FFFFFF url(images/menu-bits.gif) no-repeat scroll 0 -310px;
}
#adminmenu li.current a,
#adminmenu .wp-submenu a:hover {
background-image: url(images/menu-bits.gif);
background-repeat: no-repeat;
background-position: 0 -289px;
background-attachment: scroll;
}
#adminmenu li.current a {
color: #333;
background-color: #EAF2FA;
}
#adminmenu .menu-top-last ul.wp-submenu,
#adminmenu .menu-top-single ul.wp-submenu {
border-width: 0 0 1px;
border-style: none none solid;
}
#adminmenu .wp-submenu {
margin: 0;
position: relative;
z-index: 11;
z-index: 2;
border-width: 1px 0 0;
border-style: solid none none;
background-color: #fff;
}
#adminmenu .wp-submenu li {
padding: 0;
margin: 0;
border-top: 1px dotted #DDDDDD;
}
#adminmenu.folded li.wp-has-submenu {
width: 28px;
height: 30px;
overflow: hidden;
border-width: 1px 1px 0;
border-style: solid solid none;
background-color: #F1F1F1;
}
background-color: #F3FCFB;
#adminmenu .menu-top-first a.wp-has-submenu,
#adminmenu.folded li.menu-top-first,
#adminmenu .wp-submenu li.wp-submenu-head {
border-width: 1px 1px 0;
border-style: solid solid none;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-top-right-radius: 8px;
-khtml-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
#adminmenu .menu-top-last a.wp-has-submenu,
#adminmenu.folded li.menu-top-last {
border-width: 1px;
border-style: solid;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-khtml-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#adminmenu .menu-top-single a.wp-has-submenu,
#adminmenu.folded li.menu-top-single {
border-width: 1px;
border-style: solid;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
}
#adminmenu li.wp-menu-open a.menu-top-last,
#adminmenu li.wp-menu-open a.menu-top-single {
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-khtml-border-bottom-right-radius: 0;
-khtml-border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#adminmenu .wp-menu-image {
float: left;
padding: 4px 4px 0;
padding: 8px 6px 0;
}
#adminmenu.folded .wp-menu-image {
padding: 7px 0 0 6px;
}
#adminmenu .wp-submenu li.current {
background-color: #fff;
}
#adminmenu a {
display: block;
font-size: 13px !important;
line-height: 18px;
padding: 3px 4px;
}
#adminmenu .wp-submenu a {
margin: 0;
padding-left: 12px;
}
#adminmenu .wp-menu-separator {
background-color: transparent;
height: 6px;
width: 1px;
#adminmenu li.wp-menu-separator {
background: transparent url(images/menu-arrows.gif) no-repeat scroll left 5px;
height: 21px;
padding: 0;
margin: 0;
}
#adminmenu.folded li.wp-menu-separator {
background: transparent url(images/menu-arrows.gif) no-repeat scroll right -34px;
}
#adminmenu .wp-menu-separator-last {
height: 10px;
width: 1px;
}
#adminmenu .wp-submenu li.wp-submenu-head {
border-top: 0 none;
padding: 4px 4px 4px 10px;
border-width: 1px;
border-style: solid;
padding: 6px 4px 6px 10px;
cursor: default;
background-color: #E4F2FD;
background-color:#F1F1F1;
}
#adminmenu.folded .wp-submenu {
position: absolute;
margin: -1px 0 0 30px;
margin: -1px 0 0 33px;
z-index: 999;
width: 125px;
border-width: 1px;
border-style: solid;
width: 135px;
border-width: 0 0 1px;
border-style: none none solid;
background-color: #fff;
border-color: #C6D9E9;
}
#adminmenu.folded .wp-submenu li.wp-first-item {
@ -805,19 +915,22 @@ ul#adminmenu li.write-new-button a {
margin-left: 40px;
}
#adminmenu.folded li.wp-has-submenu {
width: 24px;
overflow: hidden;
#adminmenu .wp-menu-toggle {
width: 22px;
float: right;
margin: 1px 0 0;
height: 29px;
padding: 1px 2px 0 0;
}
#adminmenu #menu-toggle {
width: 24px;
cursor: pointer;
text-align: center;
border: 1px solid #C6D9E9;
height: 12px;
line-height: 10px;
#adminmenu .wp-menu-toggle:hover {
background: transparent url(images/menu-bits.gif) repeat-x scroll left -108px;
}
#adminmenu li.wp-has-current-submenu .wp-menu-toggle {
background: transparent url(images/menu-bits.gif) repeat-x scroll left -206px;
}
/* end side admin menu */

View File

@ -277,7 +277,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'dashboard', '/wp-admin/js/dashboard.js', array( 'jquery', 'admin-comments', 'postbox', 'settings-box' ), '20081016' );
$scripts->add( 'hoverIntent', '/wp-includes/js/hoverIntent.js', array('jquery'), '20070327' );
$scripts->add( 'menu', '/wp-admin/js/menu.js', array( 'jquery', 'hoverIntent' ), '20081022' );
$scripts->add( 'menu', '/wp-admin/js/menu.js', array( 'jquery', 'hoverIntent' ), '20081023' );
}
}
@ -308,7 +308,7 @@ function wp_default_styles( &$styles ) {
$rtl_styles = array( 'global', 'colors', 'dashboard', 'ie', 'install', 'login', 'media', 'theme-editor', 'upload', 'widgets', 'press-this', 'press-this-ie' );
$styles->add( 'wp-admin', '/wp-admin/wp-admin.css', array(), '20081022' );
$styles->add( 'wp-admin', '/wp-admin/wp-admin.css', array(), '20081023' );
$styles->add_data( 'wp-admin', 'rtl', '/wp-admin/rtl.css' );
$styles->add( 'ie', '/wp-admin/css/ie.css' );