From 27fdffa9db55636d5c1c2262f6b748c72512f275 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Tue, 21 Aug 2012 22:46:30 +0000 Subject: [PATCH] Improve the layout and accessibility of the admin menu: simplify the HTML structure, move the submenus off the viewport (still visible for screen readers) instead of hiding them with display: none, make it possible to unfold the menu on small/narrow screens, see #21349 git-svn-id: https://develop.svn.wordpress.org/trunk@21574 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/admin-header.php | 3 + wp-admin/css/colors-classic.dev.css | 92 +++--- wp-admin/css/colors-fresh.dev.css | 85 +++-- wp-admin/css/ie-rtl.dev.css | 8 +- wp-admin/css/ie.dev.css | 12 +- wp-admin/css/wp-admin-rtl.dev.css | 154 ++++----- wp-admin/css/wp-admin.dev.css | 488 ++++++++++++---------------- wp-admin/js/common.dev.js | 73 ++--- wp-admin/menu-header.php | 15 +- 9 files changed, 394 insertions(+), 536 deletions(-) diff --git a/wp-admin/admin-header.php b/wp-admin/admin-header.php index 16a7c432a1..b01b468dfd 100644 --- a/wp-admin/admin-header.php +++ b/wp-admin/admin-header.php @@ -76,6 +76,9 @@ do_action('admin_head'); if ( get_user_setting('mfold') == 'f' ) $admin_body_class .= ' folded'; +if ( !get_user_setting('unfold') ) + $admin_body_class .= ' auto-fold'; + if ( is_admin_bar_showing() ) $admin_body_class .= ' admin-bar'; diff --git a/wp-admin/css/colors-classic.dev.css b/wp-admin/css/colors-classic.dev.css index 54594b8337..02d01408d4 100644 --- a/wp-admin/css/colors-classic.dev.css +++ b/wp-admin/css/colors-classic.dev.css @@ -490,7 +490,7 @@ a:active { #adminmenu a:hover, #adminmenu li.menu-top > a:focus, -#adminmenu ul.wp-submenu a:hover, +#adminmenu .wp-submenu a:hover, #the-comment-list .comment a:hover, #rightnow a:hover, #media-upload a.del-link:hover, @@ -1280,7 +1280,6 @@ table.widefat .spam a:hover, } #adminmenu a.menu-top, -.folded #adminmenu li.menu-top, #adminmenu .wp-submenu .wp-submenu-head { border-top-color: #ffffff; border-bottom-color: #cae6ff; @@ -1290,10 +1289,12 @@ table.widefat .spam a:hover, border-color: #d1e5ee; } -#adminmenu li.menu-top:hover > a, -#adminmenu li.menu-top.focused > a, -#adminmenu li.menu-top > a:focus { +#adminmenu a.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { background-color: #e0f1ff; + color: #d54e21; text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 ); } @@ -1318,7 +1319,6 @@ table.widefat .spam a:hover, background-image: -moz-linear-gradient(bottom right, #5589aa, #619bbb); background-image: -o-linear-gradient(bottom right, #5589aa, #619bbb); background-image: linear-gradient(to top left, #5589aa, #619bbb); - } #adminmenu li.wp-not-current-submenu .wp-menu-arrow { @@ -1363,33 +1363,24 @@ table.widefat .spam a:hover, color: #333; } -#adminmenu .wp-submenu ul { +#adminmenu .wp-submenu, +.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { background-color: #fff; -} - -#adminmenu .wp-submenu-wrap, -#adminmenu .wp-submenu ul { border-color: #d0dfe9; -} - -#adminmenu .wp-submenu-wrap, -.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); - box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); + box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); } #adminmenu .wp-submenu .wp-submenu-head { - border-right-color: #e8eff4; - background-color: #EFF8FF; -} - -#adminmenu div.wp-submenu { - background-color: transparent; + border-right-color: #dfdfdf; + background-color: #e4e4e4; } /* collapse menu button */ #collapse-menu { color: #A0C3D5; + border-top-color: #f9f9f9; } #collapse-menu:hover { @@ -1398,7 +1389,7 @@ table.widefat .spam a:hover, #collapse-button { border-color: #d0dfe9; - background: #eff8ff; /* Fallback */ + background: #eff8ff; background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff)); background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff); background-image: -moz-linear-gradient(bottom, #eff8ff, #fff); @@ -1421,37 +1412,31 @@ table.widefat .spam a:hover, /* Auto-folding of the admin menu */ @media only screen and (max-width: 900px) { - #adminmenu li.menu-top { - border-top-color: #ffffff; - border-bottom-color: #cae6ff; + .auto-fold #adminmenu li.wp-has-current-submenu, + .auto-fold #adminmenu li.current.menu-top { + background-color: #5589AA; + background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb)); + background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb); + background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb); + background-image: -o-linear-gradient(bottom, #5589AA, #619bbb); + background-image: linear-gradient(bottom, #5589AA, #619bbb); } - #adminmenu li.wp-has-current-submenu, - #adminmenu li.current.menu-top { - background: #5589aa; - background-image: -webkit-gradient(linear, left bottom, left top, from(#5589aa), to(#619bbb)); - background-image: -webkit-linear-gradient(bottom, #5589aa, #619bbb); - background-image: -moz-linear-gradient(bottom, #5589aa, #619bbb); - background-image: -o-linear-gradient(bottom, #5589aa, #619bbb); - background-image: linear-gradient(to top, #5589aa, #619bbb); - } - - #adminmenu li.menu-top li:hover a { - background-image: none; - } - - #adminmenu li.wp-has-current-submenu, - #adminmenu li.current.menu-top { + .auto-fold #adminmenu li.wp-has-current-submenu, + .auto-fold #adminmenu li.current.menu-top { border-top-color: #5A8FAD; border-bottom-color: #5589AA; } - #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); - box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + background-color: #fff; + border-color: #D0DFE9; + -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); + box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); } - #collapse-button div { + .auto-fold #collapse-button div { background-position: 0 -108px; } } @@ -2421,12 +2406,17 @@ div.widgets-sortables, border-left-color: #d1e5ee; } -.rtl #adminmenu .wp-submenu-wrap, -.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ +.rtl #adminmenu .wp-submenu, +.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu { -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); } +.rtl #adminmenu .wp-has-current-submenu .wp-submenu { + -webkit-box-shadow: none; + box-shadow: none; +} + /* Collapse Menu Button */ .rtl #collapse-button div { background-position: 0 -108px; @@ -2438,12 +2428,12 @@ div.widgets-sortables, /* Auto-folding of the admin menu for RTL */ @media only screen and (max-width: 900px) { - .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ + .rtl.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); } - .rtl #collapse-button div { + .rtl.auto-fold #collapse-button div { background-position: 0 -72px; } } diff --git a/wp-admin/css/colors-fresh.dev.css b/wp-admin/css/colors-fresh.dev.css index c6103f2579..248fc52f69 100644 --- a/wp-admin/css/colors-fresh.dev.css +++ b/wp-admin/css/colors-fresh.dev.css @@ -481,7 +481,7 @@ a:active { #adminmenu a:hover, #adminmenu li.menu-top > a:focus, -#adminmenu ul.wp-submenu a:hover, +#adminmenu .wp-submenu a:hover, #the-comment-list .comment a:hover, #rightnow a:hover, #media-upload a.del-link:hover, @@ -1013,7 +1013,6 @@ table.widefat .spam a:hover, } #adminmenu a.menu-top, -.folded #adminmenu li.menu-top, #adminmenu .wp-submenu .wp-submenu-head { border-top-color: #f9f9f9; border-bottom-color: #dfdfdf; @@ -1023,10 +1022,11 @@ table.widefat .spam a:hover, border-color: #dfdfdf; } -#adminmenu li.menu-top:hover > a, -#adminmenu li.menu-top.focused > a, -#adminmenu li.menu-top > a:focus { +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { background-color: #e4e4e4; + color: #d54e21; text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.4 ); } @@ -1095,33 +1095,24 @@ table.widefat .spam a:hover, color: #333; } -#adminmenu .wp-submenu ul { +#adminmenu .wp-submenu, +.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { background-color: #fff; -} - -#adminmenu .wp-submenu-wrap, -#adminmenu .wp-submenu ul { border-color: #dfdfdf; -} - -#adminmenu .wp-submenu-wrap, -.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); - box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); + box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); } #adminmenu .wp-submenu .wp-submenu-head { - border-right-color: #dfdfdf; - background-color: #ececec; -} - -#adminmenu div.wp-submenu { - background-color: transparent; + background-color: #e4e4e4; + color: #333; } /* collapse menu button */ #collapse-menu { color: #aaa; + border-top-color: #f9f9f9; } #collapse-menu:hover { @@ -1152,37 +1143,31 @@ table.widefat .spam a:hover, /* Auto-folding of the admin menu */ @media only screen and (max-width: 900px) { - #adminmenu li.menu-top { - border-top-color: #f9f9f9; - border-bottom-color: #dfdfdf; - } - - #adminmenu li.wp-has-current-submenu, - #adminmenu li.current.menu-top { - background: #777; + .auto-fold #adminmenu li.wp-has-current-submenu, + .auto-fold #adminmenu li.current.menu-top { + background-color: #777; background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); - background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); - background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); - background-image: linear-gradient(to top, #6d6d6d, #808080); + background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); + background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); + background-image: linear-gradient(bottom, #6d6d6d, #808080); } - #adminmenu li.menu-top li:hover a { - background-image: none; - } - - #adminmenu li.wp-has-current-submenu, - #adminmenu li.current.menu-top { + .auto-fold #adminmenu li.wp-has-current-submenu, + .auto-fold #adminmenu li.current.menu-top { border-top-color: #808080; border-bottom-color: #6d6d6d; } - #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); - box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); + .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + background-color: #fff; + border-color: #dfdfdf; + -webkit-box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); + box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); } - #collapse-button div { + .auto-fold #collapse-button div { background-position: 0 -108px; } } @@ -2069,12 +2054,17 @@ div.widgets-sortables, border-left-color: #dfdfdf; } -.rtl #adminmenu .wp-submenu-wrap, -.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ +.rtl #adminmenu .wp-submenu, +.rtl.folded #adminmenu .wp-has-current-submenu .wp-submenu { -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); } +.rtl #adminmenu .wp-has-current-submenu .wp-submenu { + -webkit-box-shadow: none; + box-shadow: none; +} + /* Collapse Menu Button */ .rtl #collapse-button div { background-position: 0 -108px; @@ -2086,12 +2076,13 @@ div.widgets-sortables, /* Auto-folding of the admin menu for RTL */ @media only screen and (max-width: 900px) { - .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{ + .rtl.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .rtl.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 ); } - .rtl #collapse-button div { + .rtl.auto-fold #collapse-button div { background-position: 0 -72px; } } diff --git a/wp-admin/css/ie-rtl.dev.css b/wp-admin/css/ie-rtl.dev.css index 16357de522..4fb89de7c1 100644 --- a/wp-admin/css/ie-rtl.dev.css +++ b/wp-admin/css/ie-rtl.dev.css @@ -27,8 +27,8 @@ body { width: 99%; } -#adminmenu .wp-submenu .wp-submenu .wp-submenu-wrap, -#adminmenu .wp-menu-open .wp-submenu .wp-submenu-wrap { +#adminmenu .wp-submenu .wp-submenu .wp-submenu, +#adminmenu .wp-menu-open .wp-submenu .wp-submenu { border: 1px solid #dfdfdf; } @@ -41,10 +41,6 @@ body { padding: 6px 10px 6px 4px; } -#adminmenu .wp-menu-arrow { - display: none !important; -} - #wpcontent #adminmenu .wp-submenu li.wp-submenu-head { padding: 3px 10px 4px 4px; } diff --git a/wp-admin/css/ie.dev.css b/wp-admin/css/ie.dev.css index b247c4b16e..8bc55dc3b5 100644 --- a/wp-admin/css/ie.dev.css +++ b/wp-admin/css/ie.dev.css @@ -74,12 +74,12 @@ margin-bottom: -2px; } -#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow { - display: none; +#adminmenu .wp-menu-arrow { + display: none !important; } -#wpcontent #adminmenu .wp-submenu li.wp-submenu-head { - padding: 3px 4px 4px 10px; +#adminmenu .wp-submenu li.wp-submenu-head { + padding: 6px 4px 7px 10px; zoom: 100%; } @@ -87,10 +87,6 @@ height: 30px; } -.js.folded #adminmenu .wp-submenu { - margin: -1px 0 0 0; -} - .js.folded #adminmenu li.menu-top { display: block; zoom: 100%; diff --git a/wp-admin/css/wp-admin-rtl.dev.css b/wp-admin/css/wp-admin-rtl.dev.css index e2ed8f6291..f86de7e4cb 100644 --- a/wp-admin/css/wp-admin-rtl.dev.css +++ b/wp-admin/css/wp-admin-rtl.dev.css @@ -342,6 +342,16 @@ form.upgrade .hint { 7.0 - Main Navigation (Right Menu) (RTL: Left Menu) ------------------------------------------------------------------------------*/ +.folded #wpcontent { + margin-left: 0; + margin-right: 52px; +} + +.folded.wp-admin #footer { + margin-left: 15px; + margin-right: 52px; +} + #adminmenuback, #adminmenuwrap { border-width: 0 0 0 1px; @@ -357,28 +367,22 @@ form.upgrade .hint { right: 146px; } -.folded #adminmenu .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - left: auto; - right: 26px; -} -#adminmenu .wp-submenu.sub-open, -#adminmenu li.focused.wp-not-current-submenu .wp-submenu, -.folded #adminmenu li.focused.wp-has-current-submenu .wp-submenu, +.folded #adminmenu .wp-submenu.sub-open, +.folded #adminmenu .opensub .wp-submenu, .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 0 8px 8px; +.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu a.menu-top:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, +.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { + left: auto; + right: 32px; } -#adminmenu div.wp-menu-image { +#adminmenu div.wp-menu-image, +.folded #adminmenu div.wp-menu-image { float: right; -} - -#adminmenu li li { - margin-left: 0; - margin-right: 8px + width: 30px; } #adminmenu .wp-submenu a, @@ -393,16 +397,6 @@ form.upgrade .hint { padding-right: 18px; } -.folded #adminmenu li li { - margin-left: inherit; - margin-right: 0 -} - -.folded #adminmenu li li a { - padding-left: inherit; - padding-right: 0 -} - .wp-menu-arrow { right: 0; @@ -444,17 +438,20 @@ form.upgrade .hint { } #adminmenu .wp-menu-image img { - float: right; - padding: 5px 2px 0 0; + padding: 7px 7px 0 0; } #adminmenu .wp-submenu .wp-submenu-head { padding: 6px 10px 5px 4px; + -webkit-border-top-right-radius: 0; + -webkit-border-top-left-radius: 3px; + border-top-right-radius: 0; + border-top-left-radius: 3px; } -#adminmenu li .wp-submenu-wrap { - border-width: 1px 0 1px 1px; - border-style: solid none solid solid; +.folded #adminmenu li.wp-has-current-submenu .wp-submenu { + border-width: 1px; + border-style: solid; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 0; @@ -465,20 +462,6 @@ form.upgrade .hint { border-top-left-radius: 3px; } -.folded #adminmenu .wp-submenu ul { - border-width: 0 1px 0 0; -} - -.folded #adminmenu .wp-submenu a { - padding-left: 0; - padding-right: 10px; -} - -.folded #adminmenu a.wp-has-submenu { - margin-left: 0; - margin-right: 40px; -} - #adminmenu .awaiting-mod, #adminmenu span.update-plugins, #sidemenu li a span.update-plugins { @@ -493,29 +476,33 @@ form.upgrade .hint { /* Auto-folding of the admin menu */ @media only screen and (max-width: 900px) { - #adminmenu li .wp-submenu, - #adminmenu .wp-has-current-submenu .wp-submenu { + .auto-fold #wpcontent { + margin-left: 0; + margin-right: 52px; + } + + .auto-fold.wp-admin #footer { + margin-left: 15px; + margin-right: 52px; + } + + .auto-fold #adminmenu .wp-submenu.sub-open, + .auto-fold #adminmenu .opensub .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, + .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, + .no-js.auto-fold #adminmenu .wp-has-submenu:hover .wp-submenu { left: auto; - right: 26px; + right: 32px; } - #adminmenu li.focused.wp-has-current-submenu .wp-submenu, - #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { - padding: 0 0 8px 8px; - } - - .folded #adminmenu .wp-not-current-submenu li a { + .auto-fold #adminmenu .wp-not-current-submenu li a { padding-left: 0; padding-right: 12px; } - #adminmenu li li, - #adminmenu li li a { - padding-left: inherit; - padding-right: 0 - } - - .wp-menu-arrow { + .auto-fold .wp-menu-arrow { -moz-transform: translate( -27px ); -webkit-transform: translate( -27px ); -o-transform: translate( -27px ); @@ -523,28 +510,17 @@ form.upgrade .hint { transform: translate( -27px ); } - #adminmenu .wp-submenu ul { - border-width: 0 1px 0 0; - } - - #adminmenu .wp-submenu a { - padding-left: 0; - padding-right: 10px; - } - - #adminmenu a.wp-has-submenu { - margin-left: 0; - margin-right: 40px; - } - - body #wpcontent { - margin-left: 0; - margin-right: 52px; - } - - body .wp-admin #footer { - margin-left: 15px; - margin-right: 52px; + .auto-fold #adminmenu li.wp-has-current-submenu .wp-submenu { + border-width: 1px; + border-style: solid; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 3px; + -webkit-border-top-right-radius: 0; + -webkit-border-top-left-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 3px; + border-top-right-radius: 0; + border-top-left-radius: 3px; } } @@ -1641,16 +1617,6 @@ table .column-rating { margin-right: 165px; } -.folded #wpcontent { - margin-left: 0; - margin-right: 52px; -} - -.folded.wp-admin #footer { - margin-left: 15px; - margin-right: 52px; -} - #wpbody-content { float: right; } diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index 0e6022be3f..67b190d537 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -76,9 +76,7 @@ TABLE OF CONTENTS: #adminmenuback, #adminmenuwrap, #adminmenu, -#adminmenu .wp-submenu, -#adminmenu .wp-submenu-wrap, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { +#adminmenu .wp-submenu { width: 145px; } @@ -1330,99 +1328,6 @@ form.upgrade .hint { user-select: none; } -#adminmenu .wp-submenu { - list-style: none; - padding: 0; - margin: 0; - overflow: hidden; -} - -#adminmenu li .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - display: none; - position: absolute; - top: -1px; - left: 146px; - z-index: 999; - overflow: hidden; -} - -.js #adminmenu .wp-submenu.sub-open, -.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, -.no-js #adminmenu .wp-has-submenu:hover .wp-submenu, -#adminmenu .wp-has-current-submenu .wp-submenu, -#adminmenu li.focused .wp-submenu { - display: block; -} - -#adminmenu .wp-has-current-submenu .wp-submenu { - position: relative; - z-index: 2; - top: auto; - left: auto; - right: auto; - bottom: auto; - padding: 0; -} - -#adminmenu .wp-has-current-submenu .wp-submenu-wrap { - -webkit-box-shadow: none; - box-shadow: none; -} - -.folded #adminmenu .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - top: -5px; - left: 26px; -} - -#adminmenu .wp-submenu.sub-open, -#adminmenu li.focused.wp-not-current-submenu .wp-submenu, -.folded #adminmenu li.focused.wp-has-current-submenu .wp-submenu, -.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, -#adminmenu .wp-has-current-submenu .wp-submenu { - padding: 0; -} - -#adminmenu .wp-submenu a { - font-size: 12px; - line-height: 18px; -} - -#adminmenu a.menu-top, -#adminmenu .wp-submenu-head { - font-size: 13px; - line-height: 18px; -} - -#adminmenu div.wp-submenu-head { - display: none; -} - -.folded #adminmenu div.wp-submenu-head { - display: block; -} - -.folded #adminmenu a.menu-top { - display: none; -} - -#adminmenu div.wp-menu-image { - float: left; - width: 28px; - height: 28px; -} - -.folded #adminmenu div.wp-menu-image { - width: 30px; -} - #adminmenu li { margin: 0; padding: 0; @@ -1436,57 +1341,144 @@ form.upgrade .hint { } #adminmenu li.menu-top { - min-height: 29px; + min-height: 28px; position: relative; } -#adminmenu a.menu-top { - font-weight: bold; - line-height: 18px; - min-width: 10em; - padding: 5px 5px; - border-width: 1px 0 1px; - border-style: solid; -} - -#adminmenu li.wp-menu-open { - border-width: 0 0 1px; - border-style: solid; -} - -#adminmenu .wp-submenu ul { +#adminmenu .wp-submenu { + list-style: none; padding: 4px 0; + margin: 0; + position: absolute; + top: -1000em; + left: 146px; + z-index: 999; + overflow: visible; + border-width: 1px; + border-style: solid; + -webkit-border-bottom-right-radius: 3px; + -webkit-border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} + +.js #adminmenu .sub-open, +.js #adminmenu .opensub .wp-submenu, +#adminmenu a.menu-top:focus + .wp-submenu, +.no-js li.wp-has-submenu:hover .wp-submenu { + top: -1px; +} + +#adminmenu .wp-has-current-submenu .wp-submenu, +.no-js li.wp-has-current-submenu:hover .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu { + position: relative; + z-index: 2; + top: auto; + left: auto; + right: auto; + bottom: auto; + border: 0 none; + + -webkit-box-shadow: none; + box-shadow: none; +} + +.folded #adminmenu .wp-submenu.sub-open, +.folded #adminmenu .opensub .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, +.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu a.menu-top:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, +.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { + top: -1px; + left: 32px; +} + +.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + border-width: 1px; + border-style: solid; + position: absolute; + top: -1000em; } #adminmenu .wp-submenu a { + font-size: 12px; + line-height: 18px; margin: 0; -} - -#adminmenu li li { - margin-left: 8px; -} - -#adminmenu .wp-submenu a, -#adminmenu li li a, -.folded #adminmenu .wp-not-current-submenu li a { padding-left: 12px; } -#adminmenu .wp-not-current-submenu li a { - padding-left: 18px; +#adminmenu .wp-not-current-submenu li > a { + padding-left: 16px; } -.folded #adminmenu li li { - margin-left: 0; +#adminmenu .wp-has-current-submenu ul > li > a, +.folded #adminmenu li.menu-top .wp-submenu > li > a { + padding-left: 12px; } -.folded #adminmenu li li a { - padding-left: 0; +#adminmenu a.menu-top, +#adminmenu .wp-submenu-head { + font-size: 13px; + font-weight: bold; + line-height: 18px; + padding: 0; +} + +#adminmenu .wp-submenu-head, +.folded #adminmenu .wp-menu-name { + display: none; +} + +.folded #adminmenu .wp-submenu-head { + display: block; +} + +#adminmenu .wp-submenu li { + padding: 0; + margin: 0; + overflow: hidden; +} + +#adminmenu a.menu-top { + border-width: 1px 0; + border-style: solid none; +} + +#adminmenu .wp-menu-image img { + padding: 7px 0 0 7px; + opacity: 0.6; + filter: alpha(opacity=60); +} + +#adminmenu div.wp-menu-name { + padding: 5px; +} + +#adminmenu div.wp-menu-image { + float: left; + width: 28px; + height: 28px; + margin-top: -1px; +} + +.folded #adminmenu div.wp-menu-image { + width: 32px; + margin-top: 0; + position: absolute; + z-index: 25; +} + +.folded #adminmenu a.menu-top { + height: 29px; } .wp-menu-arrow { display: none; - cursor: auto; z-index: 25; position: absolute; right: 100%; @@ -1501,27 +1493,6 @@ form.upgrade .hint { transform: translate( 146px ); } -#adminmenu li.wp-has-current-submenu .wp-menu-arrow, -#adminmenu li.menu-top:hover .wp-menu-arrow, -#adminmenu li.current .wp-menu-arrow, -#adminmenu li.focused .wp-menu-arrow, -#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div { - display: block; -} - -#adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow div { - display: none; -} - -#adminmenu li.menu-top:hover .wp-menu-arrow, -#adminmenu li.menu-top.focused .wp-menu-arrow { - z-index: 1001; -} - -.ie8 #adminmenu li.menu-top:hover .wp-menu-arrow { - display: none; -} - #adminmenu .wp-menu-arrow div { position: absolute; top: 7px; @@ -1545,6 +1516,7 @@ form.upgrade .hint { height: 28px; border-width: 1px 0; border-style: solid; + top: 0; } .folded .wp-menu-arrow { @@ -1555,6 +1527,29 @@ form.upgrade .hint { transform: translate( 33px ); } +#adminmenu li.wp-has-current-submenu .wp-menu-arrow, +#adminmenu a.menu-top:focus .wp-menu-arrow, +.no-js #adminmenu li.wp-has-submenu:hover .wp-menu-arrow, +#adminmenu li.current .wp-menu-arrow, +#adminmenu li.wp-has-submenu.opensub .wp-menu-arrow { + display: block; +} + +#adminmenu li.current .wp-menu-arrow, +#adminmenu li.wp-menu-open .wp-menu-arrow { + top: 0; +} + +.no-js #adminmenu li.wp-has-submenu:hover .wp-menu-arrow, +#adminmenu .opensub a.wp-has-submenu .wp-menu-arrow, +#adminmenu a.wp-has-submenu:focus .wp-menu-arrow { + z-index: 1001; +} + +.ie8 #adminmenu li.menu-top:hover .wp-menu-arrow { + display: none; +} + #adminmenu .wp-not-current-submenu .wp-menu-arrow div { width: 15px; top: 6px; @@ -1563,31 +1558,15 @@ form.upgrade .hint { } .wp-menu-arrow, -.folded #adminmenu li.menu-top:hover .wp-menu-arrow { +.folded #adminmenu li.wp-not-current-submenu .wp-menu-arrow, +.no-js #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow { display: none; } -.folded #adminmenu li.current:hover .wp-menu-arrow, -.folded #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow { +.folded #adminmenu li.current .wp-menu-arrow, +.folded #adminmenu li.wp-menu-open .wp-menu-arrow { display: block; - z-index: 125; -} - -#adminmenu .wp-submenu li { - padding: 0; - margin: 0; -} - -.folded #adminmenu li.menu-top { - border-width: 1px 0; - border-style: solid none; -} - -#adminmenu .wp-menu-image img { - float: left; - padding: 5px 0 0 2px; - opacity: 0.6; - filter: alpha(opacity=60); + top: 1px; } #adminmenu li.menu-top:hover .wp-menu-image img, @@ -1614,30 +1593,24 @@ form.upgrade .hint { #adminmenu .wp-submenu .wp-submenu-head { padding: 6px 4px 5px 10px; - cursor: default; + margin: -4px -1px 4px; border-width: 1px 0; border-style: solid; -} - -#adminmenu li .wp-submenu-wrap { - border-width: 1px 1px 1px 0; - border-style: solid solid solid none; - position: relative; - -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; - border-bottom-right-radius: 3px; border-top-right-radius: 3px; } -#adminmenu li.wp-menu-open .wp-submenu-wrap { +#adminmenu li.wp-menu-open { + border-width: 0 0 1px; + border-style: solid; +} + +#adminmenu li.current, +.folded #adminmenu li.wp-menu-open { border: 0 none; } -.folded #adminmenu .wp-submenu .wp-submenu-wrap { - margin-top: 3px; -} - -.folded #adminmenu .wp-has-current-submenu { +.folded #adminmenu li.wp-has-current-submenu { margin-bottom: 1px; } @@ -1645,27 +1618,6 @@ form.upgrade .hint { margin-bottom: 0; } -.folded #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - margin-top: 4px; -} - -.folded #adminmenu .wp-submenu ul { - border-width: 0 0 0 1px; - border-style: solid; -} - -.folded #adminmenu .wp-submenu a { - padding-left: 10px; -} - -.folded #adminmenu a.wp-has-submenu { - margin-left: 40px; -} - -#adminmenu .wp-menu-image a { - height: 24px; -} - #adminmenu .awaiting-mod, #adminmenu span.update-plugins, #sidemenu li a span.update-plugins { @@ -1696,6 +1648,8 @@ form.upgrade .hint { #collapse-menu { font-size: 12px; line-height: 34px; + border-width: 1px 0 0; + border-style: solid; } .folded #collapse-menu span { @@ -1719,66 +1673,60 @@ form.upgrade .hint { /* Auto-folding of the admin menu */ @media only screen and (max-width: 900px) { - #wpcontent, - #footer { + .auto-fold #wpcontent, + .auto-fold #footer { margin-left: 52px; } - #adminmenuback, - #adminmenuwrap, - #adminmenu, - #adminmenu li.menu-top { + .auto-fold #adminmenuback, + .auto-fold #adminmenuwrap, + .auto-fold #adminmenu, + .auto-fold #adminmenu li.menu-top { width: 32px; } - #adminmenu .wp-has-current-submenu .wp-submenu { - display: none; + .auto-fold #adminmenu .wp-submenu.sub-open, + .auto-fold #adminmenu .opensub .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, + .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, + .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + top: -1px; + left: 32px; + } + + .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, + .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { + border-width: 1px; + border-style: solid; position: absolute; - width: 145px; - z-index: 999; - overflow: hidden; + top: -1000em; } - #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { - display: block; - } - - #adminmenu li .wp-submenu, - #adminmenu .wp-has-current-submenu .wp-submenu { - top: -5px; - left: 26px; - } - - #adminmenu li.focused.wp-has-current-submenu .wp-submenu, - #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { - padding: 0 8px 8px 0; - } - - #adminmenu div.wp-submenu-head { - display: block; - } - - #adminmenu a.menu-top { - display: none; - } - - #adminmenu div.wp-menu-image { - width: 30px; - } - - #adminmenu .wp-not-current-submenu li a { + .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { padding-left: 12px; } - #adminmenu li li { - margin-left: 0; + .auto-fold #adminmenu .wp-menu-name { + display: none; } - #adminmenu li li a { - padding-left: 0; + .auto-fold #adminmenu .wp-submenu-head { + display: block; } - .wp-menu-arrow { + .auto-fold #adminmenu div.wp-menu-image { + width: 32px; + margin-top: 0; + position: absolute; + z-index: 25; + } + + .auto-fold #adminmenu a.menu-top { + height: 29px; + } + + .auto-fold .wp-menu-arrow { -moz-transform: translate( 33px ); -webkit-transform: translate( 33px ); -o-transform: translate( 33px ); @@ -1786,51 +1734,29 @@ form.upgrade .hint { transform: translate( 33px ); } - #adminmenu li.menu-top:hover .wp-menu-arrow { + .auto-fold #adminmenu li.wp-not-current-submenu .wp-menu-arrow { display: none; } - #adminmenu li.current:hover .wp-menu-arrow, - #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow { + .auto-fold #adminmenu li.current .wp-menu-arrow, + .auto-fold #adminmenu li.wp-menu-open .wp-menu-arrow { display: block; - z-index: 125; + top: 1px; } - #adminmenu li.menu-top { - border-width: 1px 0; - border-style: solid none; + .auto-fold #adminmenu li.wp-menu-open { + border: 0 none; } - #adminmenu .wp-submenu .wp-submenu-wrap { - margin-top: 3px; - } - - #adminmenu .wp-has-current-submenu { + .auto-fold #adminmenu li.wp-has-current-submenu { margin-bottom: 1px; } - #adminmenu .wp-has-current-submenu.menu-top-last { + .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last { margin-bottom: 0; } - #adminmenu .wp-has-current-submenu .wp-submenu-wrap { - margin-top: 4px; - } - - #adminmenu .wp-submenu ul { - border-width: 0 0 0 1px; - border-style: solid; - } - - #adminmenu .wp-submenu a { - padding-left: 10px; - } - - #adminmenu a.wp-has-submenu { - margin-left: 40px; - } - - #collapse-menu { + .auto-fold #collapse-menu span { display: none; } } diff --git a/wp-admin/js/common.dev.js b/wp-admin/js/common.dev.js index 50cb5e3885..5dbd487d34 100644 --- a/wp-admin/js/common.dev.js +++ b/wp-admin/js/common.dev.js @@ -161,36 +161,45 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) { $(document).ready( function() { var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'), - pageInput = $('input.current-page'), currentPage = pageInput.val(), refresh; + pageInput = $('input.current-page'), currentPage = pageInput.val(); - // admin menu - refresh = function(i, el){ // force the browser to refresh the tabbing index - var node = $(el), tab = node.attr('tabindex'); - if ( tab ) - node.attr('tabindex', '0').attr('tabindex', tab); - }; + // when the menu is folded, make the fly-out submenu header clickable + menu.on('click.wp-submenu-head', '.wp-submenu-head', function(e){ + $(e.target).parent().siblings('a').get(0).click(); + }); - $('#collapse-menu', menu).click(function(){ + $('#collapse-menu').on('click.collapse-menu', function(e){ var body = $(document.body); // reset any compensation for submenus near the bottom of the screen $('#adminmenu div.wp-submenu').css('margin-top', ''); - if ( body.hasClass('folded') ) { - body.removeClass('folded'); - setUserSetting('mfold', 'o'); + if ( $(window).width() < 900 ) { + if ( body.hasClass('auto-fold') ) { + body.removeClass('auto-fold'); + setUserSetting('unfold', 1); + body.removeClass('folded'); + deleteUserSetting('mfold'); + } else { + body.addClass('auto-fold'); + deleteUserSetting('unfold'); + } } else { - body.addClass('folded'); - setUserSetting('mfold', 'f'); + 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'), menutop, wintop, maxtop; - if ( m.is(':visible') ) + if ( parseInt( m.css('top'), 10 ) > -5 ) return; menutop = $(this).offset().top; @@ -213,41 +222,21 @@ $(document).ready( function() { else m.css('margin-top', ''); - menu.find('.wp-submenu').removeClass('sub-open'); - m.addClass('sub-open'); + menu.find('li.menu-top').removeClass('opensub'); + $(this).addClass('opensub'); }, out: function(){ - $(this).find('.wp-submenu').removeClass('sub-open').css('margin-top', ''); + $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', ''); }, timeout: 200, sensitivity: 7, interval: 90 }); - // Tab to select, Enter to open sub, Esc to close sub and focus the top menu - $('li.wp-has-submenu > a.wp-not-current-submenu', menu).bind('keydown.adminmenu', function(e){ - if ( e.which != 13 ) - return; - - var target = $(e.target); - - e.stopPropagation(); - e.preventDefault(); - - menu.find('.wp-submenu').removeClass('sub-open'); - target.siblings('.wp-submenu').toggleClass('sub-open').find('a[role="menuitem"]').each(refresh); - }).each(refresh); - - $('a[role="menuitem"]', menu).bind('keydown.adminmenu', function(e){ - if ( e.which != 27 ) - return; - - var target = $(e.target); - - e.stopPropagation(); - e.preventDefault(); - - target.add( target.siblings() ).closest('.sub-open').removeClass('sub-open').siblings('a.wp-not-current-submenu').focus(); + menu.on('focus.adminmenu', '.wp-submenu a', function(e){ + $(e.target).closest('li.menu-top').addClass('opensub'); + }).on('blur.adminmenu', '.wp-submenu a', function(e){ + $(e.target).closest('li.menu-top').removeClass('opensub'); }); // Move .updated and .error alert boxes. Don't move boxes designed to be inline. diff --git a/wp-admin/menu-header.php b/wp-admin/menu-header.php index ab51cbc3a2..41450fafe3 100644 --- a/wp-admin/menu-header.php +++ b/wp-admin/menu-header.php @@ -87,9 +87,9 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) { $menu_file = substr( $menu_file, 0, $pos ); if ( ! empty( $menu_hook ) || ( ('index.php' != $submenu_items[0][2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) { $admin_is_parent = true; - echo "
$img
$arrow$title"; + echo "$arrow
$img
$title
"; } else { - echo "\n\t
$img
$arrow$title"; + echo "\n\t$arrow
$img
$title
"; } } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) { $menu_hook = get_plugin_page_hook( $item[2], 'admin.php' ); @@ -98,15 +98,16 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) { $menu_file = substr( $menu_file, 0, $pos ); if ( ! empty( $menu_hook ) || ( ('index.php' != $item[2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) { $admin_is_parent = true; - echo "\n\t
$img
$arrow{$item[0]}"; + echo "\n\t$arrow
$img
{$item[0]}
"; } else { - echo "\n\t
$img
$arrow{$item[0]}"; + echo "\n\t$arrow
$img
{$item[0]}
"; } } if ( ! empty( $submenu_items ) ) { - echo "\n\t
"; - echo "
{$item[0]}
    "; + echo "\n\t
      "; + echo "
    • {$item[0]}
      • "; + $first = true; foreach ( $submenu_items as $sub_key => $sub_item ) { if ( ! current_user_can( $sub_item[1] ) ) @@ -160,7 +161,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) { echo "$title"; } } - echo "
"; + echo ""; } echo ""; }