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

Turn the Nav Menu meta boxes into an accordion. Less sprawling and overwhelming. 

* Registration stays the same — they're meta boxes
* Call `do_accordion_sections()` instead of `do_meta_boxes()` and they render as an accordion

props DrewAPicture, lessbloat, jkudish. fixes #23450. see #23449

git-svn-id: http://core.svn.wordpress.org/trunk@23707 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-03-15 13:16:38 +00:00
parent 173ed0a72c
commit 83bb916b81
5 changed files with 205 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6037,6 +6037,10 @@ body.full-overlay-active {
overflow: auto; overflow: auto;
} }
.wp-full-overlay-sidebar-content .accordion-section:first-child {
border-top: 1px solid #fff;
}
/* Close Link */ /* Close Link */
.wp-full-overlay .close-full-overlay { .wp-full-overlay .close-full-overlay {
text-decoration: none; text-decoration: none;
@ -7202,6 +7206,29 @@ a.rsswidget {
display: block; display: block;
} }
#nav-menu-meta ul.outer-border {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.accordion-section ul.category-tabs,
.accordion-section ul.add-menu-item-tabs,
.accordion-section ul.wp-tab-bar {
margin: 0;
}
.accordion-section .categorychecklist {
margin: 13px 0;
}
#nav-menu-meta .accordion-section-content {
padding: 18px 13px;
}
#nav-menu-meta .button-controls {
margin-bottom: 0;
}
#nav-menus-frame { #nav-menus-frame {
margin-left: 300px; margin-left: 300px;
margin-top: 28px; margin-top: 28px;
@ -7331,7 +7358,7 @@ a.rsswidget {
} }
.nav-menus-php #post-body { .nav-menus-php #post-body {
padding: 0 10px; padding: 0 10px 10px;
border-width: 1px 0; border-width: 1px 0;
border-style: solid; border-style: solid;
} }
@ -7401,13 +7428,36 @@ a.rsswidget {
} }
/* Add Menu Item Boxes */ /* Add Menu Item Boxes */
.postbox .howto input { .postbox .howto input,
.accordion-container .howto input {
width: 180px; width: 180px;
float: right; float: right;
} }
.accordion-container .outer-border {
margin-top: 0;
}
.accordion-container .accordion-section:first-child {
-webkit-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.accordion-container .accordion-section:last-child {
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.customlinkdiv .howto input { .customlinkdiv .howto input {
width: 200px; width: 180px;
}
.customlinkdiv p {
margin-top: 0
} }
#nav-menu-theme-locations .howto select { #nav-menu-theme-locations .howto select {
@ -8818,6 +8868,10 @@ a.widget-control-edit {
margin: 0; margin: 0;
} }
.accordion-section:first-child {
border-top: 1px solid #dfdfdf;
}
.accordion-section:last-child { .accordion-section:last-child {
box-shadow: 0 1px 0 0px #fff; box-shadow: 0 1px 0 0px #fff;
} }
@ -8825,6 +8879,8 @@ a.widget-control-edit {
.accordion-section.open .accordion-section-content { .accordion-section.open .accordion-section-content {
display: block; display: block;
background: #fdfdfd; background: #fdfdfd;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
} }
.accordion-section.open:hover { .accordion-section.open:hover {
@ -8841,6 +8897,8 @@ a.widget-control-edit {
margin: 0; margin: 0;
padding: 15px 20px; padding: 15px 20px;
position: relative; position: relative;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
cursor: pointer; cursor: pointer;
@ -8914,6 +8972,8 @@ a.widget-control-edit {
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); background-image: -o-linear-gradient(bottom, #6d6d6d, #808080);
background-image: linear-gradient(to top, #6d6d6d, #808080); background-image: linear-gradient(to top, #6d6d6d, #808080);
border-left: 1px solid #808080;
border-right: 1px solid #808080;
} }
.control-section.accordion-section:hover, .control-section.accordion-section:hover,

75
wp-admin/includes/nav-menu.php
View File

@ -387,11 +387,11 @@ function _wp_ajax_menu_quick_search( $request = array() ) {
function wp_nav_menu_setup() { function wp_nav_menu_setup() {
// Register meta boxes // Register meta boxes
wp_nav_menu_post_type_meta_boxes(); wp_nav_menu_post_type_meta_boxes();
add_meta_box( 'add-custom-links', __( 'Add Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' ); add_meta_box( 'add-custom-links', __( 'Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
wp_nav_menu_taxonomy_meta_boxes(); wp_nav_menu_taxonomy_meta_boxes();
// Register advanced menu items (columns) // Register advanced menu items (columns)
add_filter( 'manage_nav-menus_columns', 'wp_nav_menu_manage_columns'); add_filter( 'manage_nav-menus_columns', 'wp_nav_menu_manage_columns' );
// If first time editing, disable advanced items by default. // If first time editing, disable advanced items by default.
if( false === get_user_option( 'managenav-menuscolumnshidden' ) ) { if( false === get_user_option( 'managenav-menuscolumnshidden' ) ) {
@ -447,7 +447,9 @@ function wp_nav_menu_post_type_meta_boxes() {
$post_type = apply_filters( 'nav_menu_meta_box_object', $post_type ); $post_type = apply_filters( 'nav_menu_meta_box_object', $post_type );
if ( $post_type ) { if ( $post_type ) {
$id = $post_type->name; $id = $post_type->name;
add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', 'default', $post_type ); // give pages a higher priority
$priority = ( 'page' == $post_type->name ? 'core' : 'default' );
add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', $priority, $post_type );
} }
} }
} }
@ -565,21 +567,20 @@ function wp_nav_menu_item_link_meta_box() {
?> ?>
<div class="customlinkdiv" id="customlinkdiv"> <div class="customlinkdiv" id="customlinkdiv">
<input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
<p id="menu-item-url-wrap">
<label class="howto" for="custom-menu-item-url">
<span><?php _e('URL'); ?></span>
<input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text" class="code menu-item-textbox" value="http://" />
</label>
</p>
<input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" /> <p id="menu-item-name-wrap">
<p id="menu-item-url-wrap"> <label class="howto" for="custom-menu-item-name">
<label class="howto" for="custom-menu-item-url"> <span><?php _e( 'Link Text' ); ?></span>
<span><?php _e('URL'); ?></span> <input id="custom-menu-item-name" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" type="text" class="regular-text menu-item-textbox input-with-default-title" title="<?php esc_attr_e('Menu Item'); ?>" />
<input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]" type="text" class="code menu-item-textbox" value="http://" /> </label>
</label> </p>
</p>
<p id="menu-item-name-wrap">
<label class="howto" for="custom-menu-item-name">
<span><?php _e( 'Link Text' ); ?></span>
<input id="custom-menu-item-name" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]" type="text" class="regular-text menu-item-textbox input-with-default-title" title="<?php esc_attr_e('Menu Item'); ?>" />
</label>
</p>
<p class="button-controls"> <p class="button-controls">
<span class="add-to-menu"> <span class="add-to-menu">
@ -683,10 +684,22 @@ function wp_nav_menu_item_post_type_meta_box( $object, $post_type ) {
?> ?>
<div id="posttype-<?php echo $post_type_name; ?>" class="posttypediv"> <div id="posttype-<?php echo $post_type_name; ?>" class="posttypediv">
<ul id="posttype-<?php echo $post_type_name; ?>-tabs" class="posttype-tabs add-menu-item-tabs"> <ul id="posttype-<?php echo $post_type_name; ?>-tabs" class="posttype-tabs add-menu-item-tabs">
<li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'most-recent', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent"><?php _e('Most Recent'); ?></a></li> <li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>>
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#<?php echo $post_type_name; ?>-all"><?php _e('View All'); ?></a></li> <a class="nav-tab-link" data-type="tabs-panel-posttype-<?php echo esc_attr( $post_type_name ); ?>-most-recent" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'most-recent', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent">
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-search"><?php _e('Search'); ?></a></li> <?php _e( 'Most Recent' ); ?>
</ul> </a>
</li>
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="<?php echo esc_attr( $post_type_name ); ?>-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#<?php echo $post_type_name; ?>-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-posttype-<?php echo esc_attr( $post_type_name ); ?>-search" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-search">
<?php _e( 'Search'); ?>
</a>
</li>
</ul><!-- .posttype-tabs -->
<div id="tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent" class="tabs-panel <?php <div id="tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent" class="tabs-panel <?php
echo ( 'most-recent' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); echo ( 'most-recent' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
@ -893,10 +906,22 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
?> ?>
<div id="taxonomy-<?php echo $taxonomy_name; ?>" class="taxonomydiv"> <div id="taxonomy-<?php echo $taxonomy_name; ?>" class="taxonomydiv">
<ul id="taxonomy-<?php echo $taxonomy_name; ?>-tabs" class="taxonomy-tabs add-menu-item-tabs"> <ul id="taxonomy-<?php echo $taxonomy_name; ?>-tabs" class="taxonomy-tabs add-menu-item-tabs">
<li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'most-used', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-pop"><?php _e('Most Used'); ?></a></li> <li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>>
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-all"><?php _e('View All'); ?></a></li> <a class="nav-tab-link" data-type="tabs-panel-<?php echo esc_attr( $taxonomy_name ); ?>-pop" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'most-used', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-pop">
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-search-taxonomy-<?php echo $taxonomy_name; ?>"><?php _e('Search'); ?></a></li> <?php _e( 'Most Used' ); ?>
</ul> </a>
</li>
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-<?php echo esc_attr( $taxonomy_name ); ?>-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-search-taxonomy-<?php echo esc_attr( $taxonomy_name ); ?>" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-search-taxonomy-<?php echo $taxonomy_name; ?>">
<?php _e( 'Search' ); ?>
</a>
</li>
</ul><!-- .taxonomy-tabs -->
<div id="tabs-panel-<?php echo $taxonomy_name; ?>-pop" class="tabs-panel <?php <div id="tabs-panel-<?php echo $taxonomy_name; ?>-pop" class="tabs-panel <?php
echo ( 'most-used' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); echo ( 'most-used' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );

64
wp-admin/includes/template.php
View File

@ -967,6 +967,70 @@ function remove_meta_box($id, $screen, $context) {
$wp_meta_boxes[$page][$context][$priority][$id] = false; $wp_meta_boxes[$page][$context][$priority][$id] = false;
} }
/**
* Meta Box Accordion Template Function
*
* Largely made up of abstracted code from {@link do_meta_boxes()}, this
* function serves to build meta boxes as list items for display as
* a collapsible accordion.
*
* @since 3.6.0
*
* @uses global $wp_meta_boxes Used to retrieve registered meta boxes.
*
* @param string|object $screen The screen identifier.
* @param string $context The meta box context.
* @param mixed $object gets passed to the section callback function as first parameter.
* @return int number of meta boxes as accordion sections.
*/
function do_accordion_sections( $screen, $context, $object ) {
global $wp_meta_boxes;
if ( empty( $screen ) )
$screen = get_current_screen();
elseif ( is_string( $screen ) )
$screen = convert_to_screen( $screen );
$page = $screen->id;
$hidden = get_hidden_meta_boxes( $screen );
?>
<div id="side-sortables" class="accordion-container">
<ul class="outer-border">
<?php
$i = 0;
do {
if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
break;
foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
if ( isset( $wp_meta_boxes[$page][$context][$priority] ) ) {
foreach ( $wp_meta_boxes[$page][$context][$priority] as $box ) {
if ( false == $box || ! $box['title'] )
continue;
$i++;
$hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : '';
?>
<li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
<h3 class="accordion-section-title hndle" tabindex="0" title="<?php echo esc_attr( $box['title'] ); ?>"><?php echo esc_html( $box['title'] ); ?></h3>
<div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
<div class="inside">
<?php call_user_func( $box['callback'], $object, $box ); ?>
</div><!-- .inside -->
</div><!-- .accordion-section-content -->
</li><!-- .accordion-section -->
<?php
}
}
}
} while(0);
?>
</ul><!-- .outer-border -->
</div><!-- .accordion-container -->
<?php
return $i;
}
/** /**
* Add a new section to a settings page. * Add a new section to a settings page.
* *

34
wp-admin/js/nav-menu.js
View File

@ -42,7 +42,7 @@ var wpNavMenu;
this.attachUnsavedChangesListener(); this.attachUnsavedChangesListener();
if( api.menuList.length ) // If no menu, we're in the + tab. if( api.menuList.length )
this.initSortables(); this.initSortables();
if( oneThemeLocationNoMenus ) if( oneThemeLocationNoMenus )
@ -51,6 +51,9 @@ var wpNavMenu;
this.initAccessibility(); this.initAccessibility();
this.initToggles(); this.initToggles();
// Open first accordion option
this.initAccordion();
}, },
jQueryExtensions : function() { jQueryExtensions : function() {
@ -262,6 +265,12 @@ var wpNavMenu;
}); });
}, },
initAccordion : function() {
var accordionOptions = $( '.accordion-container li.accordion-section' );
accordionOptions.removeClass('open');
accordionOptions.filter(':visible').first().addClass( 'open' );
},
initAccessibility : function() { initAccessibility : function() {
$( '.item-edit' ).off( 'focus' ).on( 'focus', function(){ $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
$(this).on( 'keydown', function(e){ $(this).on( 'keydown', function(e){
@ -391,6 +400,18 @@ var wpNavMenu;
} }
// hide fields // hide fields
api.menuList.hideAdvancedMenuItemFields(); api.menuList.hideAdvancedMenuItemFields();
$('.hide-postbox-tog').click(function () {
api.initAccordion();
var hidden = $( '.accordion-container li.accordion-section' ).filter(':hidden').map(function() { return this.id; }).get().join(',');
$.post(ajaxurl, {
action: 'closed-postboxes',
hidden: hidden,
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
page: 'nav-menus'
});
});
}, },
initSortables : function() { initSortables : function() {
@ -786,13 +807,10 @@ var wpNavMenu;
target = $(e.target); target = $(e.target);
if ( target.hasClass('nav-tab-link') ) { if ( target.hasClass('nav-tab-link') ) {
panelId = /#(.*)$/.exec(e.target.href);
if ( panelId && panelId[1] )
panelId = panelId[1]
else
return false;
wrapper = target.parents('.inside').first(); panelId = target.data( 'type' );
wrapper = target.parents('.accordion-section-content').first();
// upon changing tabs, we want to uncheck all checkboxes // upon changing tabs, we want to uncheck all checkboxes
$('input', wrapper).removeAttr('checked'); $('input', wrapper).removeAttr('checked');
@ -806,7 +824,7 @@ var wpNavMenu;
// select the search bar // select the search bar
$('.quick-search', wrapper).focus(); $('.quick-search', wrapper).focus();
return false; e.preventDefault();
} else if ( target.hasClass('select-all') ) { } else if ( target.hasClass('select-all') ) {
selectAreaMatch = /#(.*)$/.exec(e.target.href); selectAreaMatch = /#(.*)$/.exec(e.target.href);
if ( selectAreaMatch && selectAreaMatch[1] ) { if ( selectAreaMatch && selectAreaMatch[1] ) {

3
wp-admin/nav-menus.php
View File

@ -23,6 +23,7 @@ if ( ! current_user_can('edit_theme_options') )
wp_die( __( 'Cheatin&#8217; uh?' ) ); wp_die( __( 'Cheatin&#8217; uh?' ) );
wp_enqueue_script( 'nav-menu' ); wp_enqueue_script( 'nav-menu' );
wp_enqueue_script( 'accordion' );
if ( wp_is_mobile() ) if ( wp_is_mobile() )
wp_enqueue_script( 'jquery-touch-punch' ); wp_enqueue_script( 'jquery-touch-punch' );
@ -510,7 +511,7 @@ require_once( './admin-header.php' );
<input type="hidden" name="menu" id="nav-menu-meta-object-id" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" /> <input type="hidden" name="menu" id="nav-menu-meta-object-id" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
<input type="hidden" name="action" value="add-menu-item" /> <input type="hidden" name="action" value="add-menu-item" />
<?php wp_nonce_field( 'add-menu_item', 'menu-settings-column-nonce' ); ?> <?php wp_nonce_field( 'add-menu_item', 'menu-settings-column-nonce' ); ?>
<?php do_meta_boxes( 'nav-menus', 'side', null ); ?> <?php do_accordion_sections( 'nav-menus', 'side', null ); ?>
</form> </form>
</div><!-- /#menu-settings-column --> </div><!-- /#menu-settings-column -->