From c2945a394f1a3eeb5f0372e53e0f08f3b3c7aee7 Mon Sep 17 00:00:00 2001 From: Mark Jaquith Date: Sat, 16 Feb 2013 04:53:59 +0000 Subject: [PATCH] Improve the UX of the Nav Menus screen. Kill the tabs, and change to a dropdown, unless you have zero or one menus (which is the most common), in which case you jump right into editing your sole menu. Do assignment to location using checkboxes in the main menu editing section instead of the backwards menu => location assignment in a random meta box. More to come, but this gets us started. props lessbloat, DrewAPicture, jkudish. see #23119 git-svn-id: https://develop.svn.wordpress.org/trunk@23441 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/colors-fresh.css | 24 +- wp-admin/css/wp-admin-rtl.css | 41 +++- wp-admin/css/wp-admin.css | 186 ++++++++------ wp-admin/includes/nav-menu.php | 169 +++++++++++-- wp-admin/js/nav-menu.js | 356 +++++++++++++++------------ wp-admin/nav-menus.php | 433 ++++++++++++++++----------------- 6 files changed, 731 insertions(+), 478 deletions(-) diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index f8702d1528..febb39f530 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -400,7 +400,8 @@ div.dashboard-widget-submit input:hover, .submitbox .submitdelete:hover, #media-items a.delete:hover, -#media-items a.delete-permanently:hover { +#media-items a.delete-permanently:hover, +#nav-menu-footer .menu-delete:hover { color: #fff; background-color: #f00; border-bottom-color: #f00; @@ -1682,6 +1683,27 @@ div.widgets-sortables, background: #21759b; color: #fff; } + +.manage-menus { + border: 1px solid #eeeeee; + background: #fbfbfb; +} + +.menu-settings { + border-top: 1px solid #eeeeee; +} + +.theme-location-set { + color: #999999; +} + +.nav-menus-php .delete-action a { + color: #bc0b0b; +} + +.is-submenu { + color: #999999; +} /* end added from nav-menu.css */ .nav-tab { diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index 5d120e526f..78ba55381d 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -44,6 +44,8 @@ TABLE OF CONTENTS: 25.0 - TinyMCE tweaks 26.0 - Full Overlay w/ Sidebar 27.0 - Customize Loader +28.0 - Nav Menus +29.0 - HiDPI ------------------------------------------------------------------------------*/ @@ -2303,10 +2305,6 @@ body.login { margin-right:0; } -.auto-add-pages { - float: right; -} - /* Star ratings */ div.star-holder { background: url('../images/stars-rtl.png?ver=20121108') repeat-x bottom right; @@ -2543,9 +2541,38 @@ div.sidebar-name h3 { left: 20px; } -/** - * HiDPI Displays - */ +/*------------------------------------------------------------------------------ + 28.0 - Nav Menus +------------------------------------------------------------------------------*/ +.nav-menus-php .major-publishing-actions .publishing-action { + float: left; +} + +.menu-settings dd { + float: right; + padding-right: 170px; +} + +.manage-menus span { + float: right; +} + +.menu-settings dt { + left: auto; + right: 0; +} + +.menu-settings dd input, +.menu-settings dd span, +.menu-settings dd label, +.manage-menus select { + float: right; + margin-right: 6px; +} + +/*------------------------------------------------------------------------------ + 29.0 - HiDPI +------------------------------------------------------------------------------*/ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 55aa296fda..c22c5915ef 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -6704,8 +6704,17 @@ a.rsswidget { /* nav-menu */ +.nav-menus-php #message { + display: none; +} + +.no-js #message { + display: block; +} + #nav-menus-frame { margin-left: 300px; + margin-top: 28px; } #wpbody-content #menu-settings-column { @@ -6714,11 +6723,7 @@ a.rsswidget { margin-left: -300px; clear: both; float: left; - padding-top: 24px; -} - -.no-js #wpbody-content #menu-settings-column { - padding-top: 31px; + padding-top: 0; } #menu-settings-column .inside { @@ -6739,10 +6744,89 @@ a.rsswidget { position: relative; } +.blank-slate .menu-name { + height: 2em; +} + +.blank-slate .menu-settings { + border: none; + margin-top: 0; + padding-top: 0; + overflow: hidden; +} + +.is-submenu { + font-style: italic; + font-weight: normal; + margin-left: 4px; +} + +.manage-menus { + margin-top: 13px; + padding: 10px; + overflow: hidden; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +.manage-menus select { + float: left; + margin-right: 6px; +} + +.manage-menus .selected-menu { + float: left; + margin: 5px 6px 0 0; +} + +.manage-menus .submit-btn { + float: left; + margin-top: 1px; +} + +.menu-edit p { + margin: .3em 0 .6em; +} + +.menu-settings { + margin-top: 2em; + padding-top: 16px; + overflow: hidden; +} + +.menu-settings dl { + margin: 0 0 10px; + overflow: hidden; + position: relative; +} + +.menu-settings dd { + float: left; + margin: 0; + width: 60%; + padding-left: 170px; +} + +.menu-settings dt { + clear: both; + left: 0; + padding: 3px 0 0; + position: absolute; +} + +.menu-edit .checkbox-input { + margin-top: 4px; +} + +.theme-location-set { + font-size: 11px; +} + /* Menu Container */ #menu-management-liquid { float: left; min-width: 100%; + margin-top: 3px; } #menu-management { @@ -6757,7 +6841,7 @@ a.rsswidget { } .nav-menus-php #post-body { - padding: 10px; + padding: 0 10px; border-width: 1px 0; border-style: solid; } @@ -6769,6 +6853,11 @@ a.rsswidget { #nav-menu-header { border-bottom: 1px solid; + margin-bottom: 13px; +} + +#nav-menu-header .menu-name-label { + margin-top: 2px; } #nav-menu-footer { @@ -6789,54 +6878,6 @@ a.rsswidget { font-weight:bold; } -/* Menu Tabs */ - -#menu-management .nav-tabs-nav { - margin: 0 20px; -} - -#menu-management .nav-tabs-arrow { - width: 10px; - padding: 0 5px 4px; - cursor: pointer; - position: absolute; - top: 0; - line-height: 22px; - font-size: 18px; -} - -#menu-management .nav-tabs-arrow-left { - left: 0; -} - -#menu-management .nav-tabs-arrow-right { - right: 0; - text-align: right; -} - -#menu-management .nav-tabs-wrapper { - width: 100%; - height: 28px; - margin-bottom: -1px; - overflow: hidden; -} - -#menu-management .nav-tabs { - padding-left: 20px; - padding-right: 10px; -} - -.js #menu-management .nav-tabs { - float: left; - margin-left: 0px; - margin-right: -400px; -} - -#menu-management .nav-tab { - margin-bottom: 0; - font-size: 14px; -} - #select-nav-menu-container { text-align: right; padding: 0 10px 3px 10px; @@ -7033,7 +7074,8 @@ a.rsswidget { } #menu-to-edit { - padding: 1em 0; + margin: 0; + padding: 0.1em 0; } .menu ul { @@ -7049,7 +7091,7 @@ a.rsswidget { clear:both; line-height:1.5em; position:relative; - margin: 13px 0 0 0; + margin: 9px 0 0; } .menu-item-handle { @@ -7269,34 +7311,16 @@ body.menu-max-depth-11 { min-width: 1280px !important; } text-align: right; float: right; line-height: 23px; - margin: 5px 0 1px; + margin: 2px 0 1px; } -.nav-menus-php .major-publishing-actions .delete-action { - vertical-align: middle; - text-align: left; - float: left; - padding-right: 15px; - margin-top: 5px; -} - -.menu-name-label span, -.auto-add-pages label { - font-size: 12px; - font-style: normal; -} - -.menu-name-label { - margin-right: 15px; -} - -.auto-add-pages input { - margin-top: 0; -} - -.auto-add-pages { - margin-top: 4px; +.nav-menus-php .blank-slate .menu-settings { + display: none; +} + +.nav-menus-php .delete-action { float: left; + margin-top: 2px; } .nav-menus-php .submitbox .submitcancel { diff --git a/wp-admin/includes/nav-menu.php b/wp-admin/includes/nav-menu.php index 60644628d9..c28ea891cf 100644 --- a/wp-admin/includes/nav-menu.php +++ b/wp-admin/includes/nav-menu.php @@ -81,11 +81,15 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu { $title = empty( $item->label ) ? $title : $item->label; + $submenu_text = ''; + if ( 0 == $depth ) + $submenu_text = 'style="display: none;"'; + ?>