WordPress.org
Get WordPress

Make WordPress Core

Changeset 23707


Ignore:
Timestamp:
03/15/2013 01:16:38 PM (12 years ago)
Author:
markjaquith
Message:

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

Location:
trunk/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.css

    r23681 r23707  
    60386038}
    60396039
     6040.wp-full-overlay-sidebar-content .accordion-section:first-child {
     6041    border-top: 1px solid #fff;
     6042}
     6043
    60406044/* Close Link */
    60416045.wp-full-overlay .close-full-overlay {
    … …  
    72037207}
    72047208
     7209#nav-menu-meta ul.outer-border {
     7210    -webkit-border-radius: 3px;
     7211    border-radius: 3px;
     7212}
     7213
     7214.accordion-section ul.category-tabs,
     7215.accordion-section ul.add-menu-item-tabs,
     7216.accordion-section ul.wp-tab-bar {
     7217    margin: 0;
     7218}
     7219
     7220.accordion-section .categorychecklist {
     7221    margin: 13px 0;
     7222}
     7223
     7224#nav-menu-meta .accordion-section-content {
     7225    padding: 18px 13px;
     7226}
     7227
     7228#nav-menu-meta .button-controls {
     7229    margin-bottom: 0;
     7230}
     7231
    72057232#nav-menus-frame {
    72067233    margin-left: 300px;
    … …  
    73327359
    73337360.nav-menus-php #post-body {
    7334     padding: 0 10px;
     7361    padding: 0 10px 10px;
    73357362    border-width: 1px 0;
    73367363    border-style: solid;
    … …  
    74027429
    74037430/* Add Menu Item Boxes */
    7404 .postbox .howto input {
     7431.postbox .howto input,
     7432.accordion-container .howto input {
    74057433    width: 180px;
    74067434    float: right;
    74077435}
    74087436
     7437.accordion-container .outer-border {
     7438    margin-top: 0;
     7439}
     7440
     7441.accordion-container .accordion-section:first-child {
     7442    -webkit-border-top-right-radius: 3px;
     7443    -webkit-border-top-left-radius: 3px;
     7444    border-top-right-radius: 3px;
     7445    border-top-left-radius: 3px;
     7446}
     7447
     7448.accordion-container .accordion-section:last-child {
     7449    -webkit-border-bottom-right-radius: 3px;
     7450    -webkit-border-bottom-left-radius: 3px;
     7451    border-bottom-right-radius: 3px;
     7452    border-bottom-left-radius: 3px;
     7453}
     7454
    74097455.customlinkdiv .howto input {
    7410     width: 200px;
     7456    width: 180px;
     7457}
     7458
     7459.customlinkdiv p {
     7460    margin-top: 0
    74117461}
    74127462
    … …  
    88198869}
    88208870
     8871.accordion-section:first-child {
     8872    border-top: 1px solid #dfdfdf;
     8873}
     8874
    88218875.accordion-section:last-child {
    88228876    box-shadow: 0 1px 0 0px #fff;
    … …  
    88268880    display: block;
    88278881    background: #fdfdfd;
     8882    border-left: 1px solid #dfdfdf;
     8883    border-right: 1px solid #dfdfdf;
    88288884}
    88298885
    … …  
    88428898    padding: 15px 20px;
    88438899    position: relative;
     8900    border-left: 1px solid #dfdfdf;
     8901    border-right: 1px solid #dfdfdf;
    88448902
    88458903    cursor: pointer;
    … …  
    89158973    background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
    89168974    background-image: linear-gradient(to top, #6d6d6d, #808080);
     8975    border-left: 1px solid #808080;
     8976    border-right: 1px solid #808080;
    89178977}
    89188978

  • trunk/wp-admin/includes/nav-menu.php

    r23441 r23707  
    388388    // Register meta boxes
    389389    wp_nav_menu_post_type_meta_boxes();
    390     add_meta_box( 'add-custom-links', __( 'Add Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
     390    add_meta_box( 'add-custom-links', __( 'Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
    391391    wp_nav_menu_taxonomy_meta_boxes();
    392392
    393393    // Register advanced menu items (columns)
    394     add_filter( 'manage_nav-menus_columns', 'wp_nav_menu_manage_columns');
     394    add_filter( 'manage_nav-menus_columns', 'wp_nav_menu_manage_columns' );
    395395
    396396    // If first time editing, disable advanced items by default.
    … …  
    448448        if ( $post_type ) {
    449449            $id = $post_type->name;
    450             add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', 'default', $post_type );
     450            // give pages a higher priority
     451            $priority = ( 'page' == $post_type->name ? 'core' : 'default' );
     452            add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', $priority, $post_type );
    451453        }
    452454    }
    … …  
    566568    ?>
    567569    <div class="customlinkdiv" id="customlinkdiv">
    568 
    569             <input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
    570             <p id="menu-item-url-wrap">
    571                 <label class="howto" for="custom-menu-item-url">
    572                     <span><?php _e('URL'); ?></span>
    573                     <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://" />
    574                 </label>
    575             </p>
    576 
    577             <p id="menu-item-name-wrap">
    578                 <label class="howto" for="custom-menu-item-name">
    579                     <span><?php _e( 'Link Text' ); ?></span>
    580                     <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'); ?>" />
    581                 </label>
    582             </p>
     570        <input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
     571        <p id="menu-item-url-wrap">
     572            <label class="howto" for="custom-menu-item-url">
     573                <span><?php _e('URL'); ?></span>
     574                <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://" />
     575            </label>
     576        </p>
     577
     578        <p id="menu-item-name-wrap">
     579            <label class="howto" for="custom-menu-item-name">
     580                <span><?php _e( 'Link Text' ); ?></span>
     581                <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'); ?>" />
     582            </label>
     583        </p>
    583584
    584585        <p class="button-controls">
    … …  
    684685    <div id="posttype-<?php echo $post_type_name; ?>" class="posttypediv">
    685686        <ul id="posttype-<?php echo $post_type_name; ?>-tabs" class="posttype-tabs add-menu-item-tabs">
    686             <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>
    687             <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>
    688             <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>
    689         </ul>
     687            <li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>>
     688                <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">
     689                    <?php _e( 'Most Recent' ); ?>
     690                </a>
     691            </li>
     692            <li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
     693                <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">
     694                    <?php _e( 'View All' ); ?>
     695                </a>
     696            </li>
     697            <li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
     698                <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">
     699                    <?php _e( 'Search'); ?>
     700                </a>
     701            </li>
     702        </ul><!-- .posttype-tabs -->
    690703
    691704        <div id="tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent" class="tabs-panel <?php
    … …  
    894907    <div id="taxonomy-<?php echo $taxonomy_name; ?>" class="taxonomydiv">
    895908        <ul id="taxonomy-<?php echo $taxonomy_name; ?>-tabs" class="taxonomy-tabs add-menu-item-tabs">
    896             <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>
    897             <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>
    898             <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>
    899         </ul>
     909            <li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>>
     910                <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">
     911                    <?php _e( 'Most Used' ); ?>
     912                </a>
     913            </li>
     914            <li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
     915                <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">
     916                    <?php _e( 'View All' ); ?>
     917                </a>
     918            </li>
     919            <li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
     920                <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; ?>">
     921                    <?php _e( 'Search' ); ?>
     922                </a>
     923            </li>
     924        </ul><!-- .taxonomy-tabs -->
    900925
    901926        <div id="tabs-panel-<?php echo $taxonomy_name; ?>-pop" class="tabs-panel <?php

  • trunk/wp-admin/includes/template.php

    r23567 r23707  
    969969
    970970/**
     971 * Meta Box Accordion Template Function
     972 *
     973 * Largely made up of abstracted code from {@link do_meta_boxes()}, this
     974 * function serves to build meta boxes as list items for display as
     975 * a collapsible accordion.
     976 *
     977 * @since 3.6.0
     978 *
     979 * @uses global $wp_meta_boxes Used to retrieve registered meta boxes.
     980 *
     981 * @param string|object $screen The screen identifier.
     982 * @param string $context The meta box context.
     983 * @param mixed $object gets passed to the section callback function as first parameter.
     984 * @return int number of meta boxes as accordion sections.
     985 */
     986function do_accordion_sections( $screen, $context, $object ) {
     987    global $wp_meta_boxes;
     988
     989    if ( empty( $screen ) )
     990        $screen = get_current_screen();
     991    elseif ( is_string( $screen ) )
     992        $screen = convert_to_screen( $screen );
     993
     994    $page = $screen->id;
     995
     996    $hidden = get_hidden_meta_boxes( $screen );
     997    ?>
     998    <div id="side-sortables" class="accordion-container">
     999        <ul class="outer-border">
     1000    <?php
     1001    $i = 0;
     1002    do {
     1003        if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
     1004            break;
     1005
     1006        foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
     1007            if ( isset( $wp_meta_boxes[$page][$context][$priority] ) ) {
     1008                foreach ( $wp_meta_boxes[$page][$context][$priority] as $box ) {
     1009                    if ( false == $box || ! $box['title'] )
     1010                        continue;
     1011                    $i++;
     1012                    $hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : '';
     1013                    ?>
     1014                    <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
     1015                        <h3 class="accordion-section-title hndle" tabindex="0" title="<?php echo esc_attr( $box['title'] ); ?>"><?php echo esc_html( $box['title'] ); ?></h3>
     1016                        <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
     1017                            <div class="inside">
     1018                                <?php call_user_func( $box['callback'], $object, $box ); ?>
     1019                            </div><!-- .inside -->
     1020                        </div><!-- .accordion-section-content -->
     1021                    </li><!-- .accordion-section -->
     1022                    <?php
     1023                }
     1024            }
     1025        }
     1026    } while(0);
     1027    ?>
     1028        </ul><!-- .outer-border -->
     1029    </div><!-- .accordion-container -->
     1030    <?php
     1031    return $i;
     1032}
     1033
     1034/**
    9711035 * Add a new section to a settings page.
    9721036 *

  • trunk/wp-admin/js/nav-menu.js

    r23640 r23707  
    4343            this.attachUnsavedChangesListener();
    4444
    45             if( api.menuList.length ) // If no menu, we're in the + tab.
     45            if( api.menuList.length )
    4646                this.initSortables();
    4747
    … …  
    5252
    5353            this.initToggles();
     54
     55            // Open first accordion option
     56            this.initAccordion();
    5457        },
    5558
    … …  
    261264                }
    262265            });
     266        },
     267
     268        initAccordion : function() {
     269            var accordionOptions = $( '.accordion-container li.accordion-section' );
     270            accordionOptions.removeClass('open');
     271            accordionOptions.filter(':visible').first().addClass( 'open' );
    263272        },
    264273
    … …  
    392401            // hide fields
    393402            api.menuList.hideAdvancedMenuItemFields();
     403
     404            $('.hide-postbox-tog').click(function () {
     405                api.initAccordion();
     406
     407                var hidden = $( '.accordion-container li.accordion-section' ).filter(':hidden').map(function() { return this.id; }).get().join(',');
     408                $.post(ajaxurl, {
     409                    action: 'closed-postboxes',
     410                    hidden: hidden,
     411                    closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
     412                    page: 'nav-menus'
     413                });
     414            });
    394415        },
    395416
    … …  
    787808
    788809                if ( target.hasClass('nav-tab-link') ) {
    789                     panelId = /#(.*)$/.exec(e.target.href);
    790                     if ( panelId && panelId[1] )
    791                         panelId = panelId[1]
    792                     else
    793                         return false;
    794 
    795                     wrapper = target.parents('.inside').first();
     810
     811                    panelId = target.data( 'type' );
     812
     813                    wrapper = target.parents('.accordion-section-content').first();
    796814
    797815                    // upon changing tabs, we want to uncheck all checkboxes
    … …  
    807825                    $('.quick-search', wrapper).focus();
    808826
    809                     return false;
     827                    e.preventDefault();
    810828                } else if ( target.hasClass('select-all') ) {
    811829                    selectAreaMatch = /#(.*)$/.exec(e.target.href);

  • trunk/wp-admin/nav-menus.php

    r23641 r23707  
    2424
    2525wp_enqueue_script( 'nav-menu' );
     26wp_enqueue_script( 'accordion' );
    2627
    2728if ( wp_is_mobile() )
    … …  
    511512            <input type="hidden" name="action" value="add-menu-item" />
    512513            <?php wp_nonce_field( 'add-menu_item', 'menu-settings-column-nonce' ); ?>
    513             <?php do_meta_boxes( 'nav-menus', 'side', null ); ?>
     514            <?php do_accordion_sections( 'nav-menus', 'side', null ); ?>
    514515        </form>
    515516
Note: See TracChangeset for help on using the changeset viewer.