WordPress.org
Get WordPress

Make WordPress Core

Changeset 33511


Ignore:
Timestamp:
07/29/2015 11:39:54 PM (9 years ago)
Author:
helen
Message:

Menu customizer: More clearly separate search results from available items.

Available items now fade from view while you're searching, and there is an explicit way to clear search results. No results gives a better message, though still brief this time around.

props valendesigns, designsimply, DH-Shredder, helen.
fixes #32710.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r33510 r33511  
    591591    left: -301px;
    592592    visibility: hidden;
    593     overflow: hidden;
     593    overflow-x: hidden;
     594    overflow-y: auto;
    594595    width: 300px;
    595596    margin: 0;
    … …  
    601602}
    602603
    603 #available-menu-items.allow-scroll {
    604     overflow-y: auto;
     604#available-menu-items.opening {
     605    overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
     606}
     607
     608#available-menu-items #available-menu-items-search.open {
     609    height: 100%;
     610    border-bottom: none;
    605611}
    606612
    … …  
    611617}
    612618
    613 #available-menu-items .open .accordion-section-title {
     619#available-menu-items .open .accordion-section-title,
     620#available-menu-items #available-menu-items-search .accordion-section-title {
    614621    background: #eee;
    615622}
    … …  
    703710}
    704711
     712#available-menu-items #available-menu-items-search .accordion-section-content {
     713    position: absolute;
     714    left: 1px;
     715    top: 60px; /* below title div / search input */
     716    bottom: 0px; /* 100% height that still triggers lazy load */
     717    max-height: none;
     718    width: 270px;
     719}
     720
    705721#available-menu-items .menu-item-tpl {
    706722    margin: 0;
    … …  
    801817    visibility: visible;
    802818    margin: 0 20px;
     819}
     820
     821#available-menu-items-search .clear-results {
     822    position: absolute;
     823    top: 20px;
     824    right: 20px;
     825    width: 20px;
     826    height: 20px;
     827    cursor: pointer;
     828    color: #a00;
     829    text-decoration: none;
     830}
     831
     832#available-menu-items-search .clear-results,
     833#available-menu-items-search.loading .clear-results.is-visible {
     834    display: none;
     835}
     836
     837#available-menu-items-search .clear-results.is-visible {
     838    display: block;
     839}
     840
     841#available-menu-items-search .clear-results:before {
     842    content: "\f335";
     843    font: normal 20px/1 dashicons;
     844    -webkit-font-smoothing: antialiased;
     845    -moz-osx-font-smoothing: grayscale;
     846}
     847
     848#available-menu-items-search .clear-results:hover,
     849#available-menu-items-search .clear-results:focus {
     850    color: #f00;
     851}
     852
     853#available-menu-items-search .clear-results:focus {
     854    -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
     855    box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    803856}
    804857

  • trunk/src/wp-admin/js/accordion.js

    r33413 r33511  
    5555        var section = el.closest( '.accordion-section' ),
    5656            sectionToggleControl = section.find( '[aria-expanded]' ).first(),
    57             siblings = section.closest( '.accordion-container' ).find( '.open' ),
     57            container = section.closest( '.accordion-container' ),
     58            siblings = container.find( '.open' ),
    5859            siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
    5960            content = section.find( '.accordion-section-content' );
    … …  
    6364            return;
    6465        }
     66
     67        // Add a class to the container to let us know something is happening inside.
     68        // This helps in cases such as hiding a scrollbar while animations are executing.
     69        container.addClass( 'opening' );
    6570
    6671        if ( section.hasClass( 'open' ) ) {
    … …  
    7580        }
    7681
     82        // We have to wait for the animations to finish
     83        setTimeout(function(){
     84            container.removeClass( 'opening' );
     85        }, 150);
     86
    7787        // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
    7888        if ( sectionToggleControl ) {

  • trunk/src/wp-admin/js/customize-nav-menus.js

    r33496 r33511  
    9797            'input #menu-items-search': 'debounceSearch',
    9898            'keyup #menu-items-search': 'debounceSearch',
    99             'click #menu-items-search': 'debounceSearch',
    10099            'focus .menu-item-tpl': 'focus',
    101100            'click .menu-item-tpl': '_submit',
    … …  
    139138            } );
    140139
     140            // Clear the search results.
     141            $( '.clear-results' ).on( 'click keydown', function( event ) {
     142                console.log(event);
     143                if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
     144                    return;
     145                }
     146
     147                event.preventDefault();
     148
     149                $( '#menu-items-search' ).val( '' ).focus();
     150                event.target.value = '';
     151                self.search( event );
     152            } );
     153
    141154            this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
    142155                $( this ).removeClass( 'invalid' );
    … …  
    177190        search: function( event ) {
    178191            var $searchSection = $( '#available-menu-items-search' ),
    179                 $openSections = $( '#available-menu-items .accordion-section.open' );
     192                $otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );
    180193
    181194            if ( ! event ) {
    182195                return;
    183196            }
    184             // Manual accordion-opening behavior.
    185             if ( this.searchTerm && ! $searchSection.hasClass( 'open' ) ) {
    186                 $openSections.find( '.accordion-section-content' ).slideUp( 'fast' );
    187                 $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
    188                 $openSections.find( '[aria-expanded]' ).first().attr( 'aria-expanded', 'false' );
    189                 $openSections.removeClass( 'open' );
    190                 $searchSection.addClass( 'open' );
    191             }
    192             if ( '' === event.target.value ) {
    193                 $searchSection.removeClass( 'open' );
    194             }
     197
    195198            if ( this.searchTerm === event.target.value ) {
    196199                return;
    197200            }
     201
     202            if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {
     203                $otherSections.fadeOut( 100 );
     204                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
     205                $searchSection.addClass( 'open' );
     206                $searchSection.find( '.clear-results' )
     207                    .prop( 'tabIndex', 0 )
     208                    .addClass( 'is-visible' );
     209            } else if ( '' === event.target.value ) {
     210                $searchSection.removeClass( 'open' );
     211                $otherSections.show();
     212                $searchSection.find( '.clear-results' )
     213                    .prop( 'tabIndex', -1 )
     214                    .removeClass( 'is-visible' );
     215            }
     216           
    198217            this.searchTerm = event.target.value;
    199218            this.pages.search = 1;
    … …  
    352371            if ( 120 < diff && 290 > diff ) {
    353372                sections.css( 'max-height', diff );
    354             } else if ( 120 >= diff ) {
    355                 this.$el.addClass( 'allow-scroll' );
    356373            }
    357374        },

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r33493 r33511  
    218218
    219219        if ( empty( $items ) ) {
    220             wp_send_json_error( array( 'message' => __( 'No menu items found.' ) ) );
     220            wp_send_json_error( array( 'message' => __( 'No results found.' ) ) );
    221221        } else {
    222222            wp_send_json_success( array( 'items' => $items ) );
    … …  
    719719                    <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    720720                    <span class="spinner"></span>
     721                    <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
    721722                </div>
    722723                <ul class="accordion-section-content" data-type="search"></ul>

  • trunk/tests/phpunit/tests/ajax/CustomizeMenus.php

    r33366 r33511  
    521521                    'success' => false,
    522522                    'data'    => array(
    523                         'message' => 'No menu items found.',
     523                        'message' => 'No results found.',
    524524                    ),
    525525                ),
Note: See TracChangeset for help on using the changeset viewer.