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;
}
.wp-full-overlay-sidebar-content .accordion-section:first-child {
border-top: 1px solid #fff;
}
/* Close Link */
.wp-full-overlay .close-full-overlay {
text-decoration: none;
@ -7202,6 +7206,29 @@ a.rsswidget {
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 {
margin-left: 300px;
margin-top: 28px;
@ -7331,7 +7358,7 @@ a.rsswidget {
}
.nav-menus-php #post-body {
padding: 0 10px;
padding: 0 10px 10px;
border-width: 1px 0;
border-style: solid;
}
@ -7401,13 +7428,36 @@ a.rsswidget {
}
/* Add Menu Item Boxes */
.postbox .howto input {
.postbox .howto input,
.accordion-container .howto input {
width: 180px;
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 {
width: 200px;
width: 180px;
}
.customlinkdiv p {
margin-top: 0
}
#nav-menu-theme-locations .howto select {
@ -8818,6 +8868,10 @@ a.widget-control-edit {
margin: 0;
}
.accordion-section:first-child {
border-top: 1px solid #dfdfdf;
}
.accordion-section:last-child {
box-shadow: 0 1px 0 0px #fff;
}
@ -8825,6 +8879,8 @@ a.widget-control-edit {
.accordion-section.open .accordion-section-content {
display: block;
background: #fdfdfd;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
.accordion-section.open:hover {
@ -8841,6 +8897,8 @@ a.widget-control-edit {
margin: 0;
padding: 15px 20px;
position: relative;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
cursor: pointer;
@ -8914,6 +8972,8 @@ a.widget-control-edit {
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
background-image: -o-linear-gradient(bottom, #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,

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() {
// Register 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();
// 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( 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 );
if ( $post_type ) {
$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">
<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-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>
<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 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">
<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">
<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 ( '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>
<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>
</ul>
<li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>>
<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">
<?php _e( 'Most Recent' ); ?>
</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
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">
<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 ( '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>
<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>
</ul>
<li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>>
<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">
<?php _e( 'Most Used' ); ?>
</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
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;
}
/**
* 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.
*

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

@ -42,7 +42,7 @@ var wpNavMenu;
this.attachUnsavedChangesListener();
if( api.menuList.length ) // If no menu, we're in the + tab.
if( api.menuList.length )
this.initSortables();
if( oneThemeLocationNoMenus )
@ -51,6 +51,9 @@ var wpNavMenu;
this.initAccessibility();
this.initToggles();
// Open first accordion option
this.initAccordion();
},
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() {
$( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
$(this).on( 'keydown', function(e){
@ -391,6 +400,18 @@ var wpNavMenu;
}
// hide fields
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() {
@ -786,13 +807,10 @@ var wpNavMenu;
target = $(e.target);
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
$('input', wrapper).removeAttr('checked');
@ -806,7 +824,7 @@ var wpNavMenu;
// select the search bar
$('.quick-search', wrapper).focus();
return false;
e.preventDefault();
} else if ( target.hasClass('select-all') ) {
selectAreaMatch = /#(.*)$/.exec(e.target.href);
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_enqueue_script( 'nav-menu' );
wp_enqueue_script( 'accordion' );
if ( wp_is_mobile() )
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="action" value="add-menu-item" />
<?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>
</div><!-- /#menu-settings-column -->