WordPress.org
Get WordPress

Make WordPress Core

Ticket #33184: 33184.7.patch

File 33184.7.patch, 18.7 KB (added by afercia, 10 years ago)

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

     
    1 #accordion-section-menu_locations {
     1        #accordion-section-menu_locations {
    22        position: relative;
    33        margin-bottom: 15px;
    44}
    … …  
    605605        overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
    606606}
    607607
    608 #available-menu-items #available-menu-items-search.open {
     608#available-menu-items-search {
     609        position: relative;
     610        border-bottom: 1px solid #dfdfdf;
     611        padding: 0 15px;
     612        background: #eee;
     613}
     614
     615#available-menu-items-search.open {
    609616        height: 100%;
    610617        border-bottom: none;
    611618}
    … …  
    616623        background: #fff;
    617624}
    618625
    619 #available-menu-items .open .accordion-section-title,
    620 #available-menu-items #available-menu-items-search .accordion-section-title {
     626#available-menu-items .open .accordion-section-title {
    621627        background: #eee;
    622628}
    623629
    … …  
    690696        display: none;
    691697}
    692698
    693 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
    694         display: block;
    695 }
    696 
    697699#available-menu-items .cannot-expand .accordion-section-title .no-items {
    698700        display: block;
    699701        color: #777;
    … …  
    706708        padding: 1px 15px 15px 15px;
    707709        margin: 0;
    708710        min-height: 120px;
    709         max-height: 290px;
     711        max-height: 300px;
    710712}
    711713
    712 #available-menu-items #available-menu-items-search .accordion-section-content {
     714/* IE8 rounding: looks like the accordion container is 1px taller */
     715.ie8 #available-menu-items .accordion-container {
     716        line-height: 1.3846;
     717}
     718
     719/* IE 8 doesn't recognize border-box on elements with min/max-width or min/max-height */
     720.ie8 #available-menu-items .accordion-section-content {
     721        padding: 0 15px;
     722}
     723
     724/* needed for JS calculation just on the actual accordions */
     725#available-menu-items .accordion-container .accordion-section-content {
     726        -webkit-box-sizing: border-box;
     727        -moz-box-sizing: border-box;
     728        box-sizing: border-box;
     729}
     730
     731#available-menu-items-search .accordion-section-content {
    713732        position: absolute;
    714         left: 1px;
     733        left: 0;
    715734        top: 60px; /* below title div / search input */
    716735        bottom: 0px; /* 100% height that still triggers lazy load */
     736        width: 100%;
    717737        max-height: none;
    718         width: 270px;
     738        min-height: 120px;
     739        margin: 0;
     740        padding: 1px 15px 15px;
     741        -webkit-box-sizing: border-box;
     742        -moz-box-sizing: border-box;
     743        box-sizing: border-box;
    719744}
    720745
    721746#available-menu-items .menu-item-tpl {
    … …  
    813838}
    814839
    815840#available-menu-items .accordion-section-title.loading .spinner,
    816 #available-menu-items-search.loading .accordion-section-title .spinner {
     841#available-menu-items-search.loading .spinner {
    817842        visibility: visible;
    818843        margin: 0 20px;
    819844}
    … …  
    863888}
    864889
    865890#available-menu-items-search input {
     891        width: 100%;
     892        margin: 13px 0;
    866893        padding: 6px 10px;
    867         width: 100%;
    868894}
    869895
    870 #available-menu-items-search .accordion-section-title {
    871         padding: 12px 15px;
    872         -webkit-box-sizing: border-box;
    873         -moz-box-sizing: border-box;
    874         box-sizing: border-box;
    875 }
    876 
    877 #available-menu-items-search .accordion-section-title:after {
    878         display: none;
    879 }
    880 
    881896#available-menu-items-search .accordion-section-content:empty {
    882897        min-height: 0;
    883898        padding: 0;
    884899}
    885900
    886 #available-menu-items-search.loading .accordion-section-content div {
    887         opacity: .5;
     901#available-menu-items-search.loading .accordion-section-content {
     902        opacity: .25;
    888903}
    889904
    890 #available-menu-items-search.loading.loading-more .accordion-section-content div {
     905#available-menu-items-search.loading.loading-more .accordion-section-content {
    891906        opacity: 1;
    892907}
    893908
    … …  
    10791094                white-space: nowrap;
    10801095                text-overflow: ellipsis;
    10811096        }
     1097
     1098        #available-menu-items-search .spinner,
     1099        #available-menu-items-search .clear-results {
     1100                top: 21px;
     1101        }
    10821102}

  • src/wp-admin/customize.php

     
    152152                                        <span class="preview-notice"><?php
    153153                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    154154                                        ?></span>
    155                                         <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     155                                        <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    156156                                </div>
    157157                                <div class="customize-panel-description"><?php
    158158                                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );

  • src/wp-admin/js/customize-controls.js

     
    11251125                        var meta, panel = this;
    11261126
    11271127                        // Expand/Collapse accordion sections on click.
    1128                         panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     1128                        panel.container.find( '.accordion-section-title' ).not( '.customize-info .accordion-section-title' ).on( 'click keydown', function( event ) {
    11291129                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    11301130                                        return;
    11311131                                }
    … …  
    11501150
    11511151                        meta = panel.container.find( '.panel-meta:first' );
    11521152
    1153                         meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    1154                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    1155                                         return;
    1156                                 }
    1157                                 event.preventDefault(); // Keep this AFTER the key filter above
     1153                        meta.find( '.customize-help-toggle' ).on( 'click', function() {
    11581154
    11591155                                meta = panel.container.find( '.panel-meta' );
    11601156                                if ( meta.hasClass( 'cannot-expand' ) ) {
    … …  
    12321228                                overlay = section.closest( '.wp-full-overlay' ),
    12331229                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    12341230                                siblings = container.find( '.open' ),
    1235                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
     1231                                // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there.
     1232                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ),
    12361233                                backBtn = section.find( '.customize-panel-back' ),
    12371234                                panelTitle = section.find( '.accordion-section-title' ).first(),
    12381235                                content = section.find( '.control-panel-content' );
    … …  
    30603057                });
    30613058
    30623059                // Expand/Collapse the main customizer customize info.
    3063                 $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    3064                         if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    3065                                 return;
    3066                         }
    3067                         event.preventDefault(); // Keep this AFTER the key filter above
     3060                $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() {
    30683061
    30693062                        var section = $( this ).closest( '.accordion-section' ),
    30703063                                content = section.find( '.customize-panel-description:first' );

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

     
    138138                        } );
    139139
    140140                        // Clear the search results.
    141                         $( '.clear-results' ).on( 'click keydown', function( event ) {
    142                                 if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
    143                                         return;
    144                                 }
    145 
    146                                 event.preventDefault();
    147 
     141                        $( '.clear-results' ).on( 'click', function( event ) {
    148142                                $( '#menu-items-search' ).val( '' ).focus();
    149                                 event.target.value = '';
    150143                                self.search( event );
    151144                        } );
    152145
    … …  
    202195                                $otherSections.fadeOut( 100 );
    203196                                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
    204197                                $searchSection.addClass( 'open' );
    205                                 $searchSection.find( '.clear-results' )
    206                                         .prop( 'tabIndex', 0 )
    207                                         .addClass( 'is-visible' );
     198                                $searchSection.find( '.clear-results' ).addClass( 'is-visible' );
    208199                        } else if ( '' === event.target.value ) {
    209200                                $searchSection.removeClass( 'open' );
    210201                                $otherSections.show();
    211                                 $searchSection.find( '.clear-results' )
    212                                         .prop( 'tabIndex', -1 )
    213                                         .removeClass( 'is-visible' );
     202                                $searchSection.find( '.clear-results' ).removeClass( 'is-visible' );
     203                                // Adjust other sections height after the search closes.
     204                                this.itemSectionHeight();
    214205                        }
    215                        
     206
    216207                        this.searchTerm = event.target.value;
    217208                        this.pages.search = 1;
    218209                        this.doSearch( 1 );
    … …  
    360351                        });
    361352                },
    362353
    363                 // Adjust the height of each section of items to fit the screen.
     354                /*
     355                Adjust the height of each accordion section to don't exceed the screen height.
     356                The accordion sections content have a max-height of 300px set with CSS, this calculation will set a
     357                smaller max-height value when there's not enough vertical space.
     358                Accordion sections must have `box-sizing: border-box` set with CSS for a correct calculation.
     359                @todo Consider to run this also when the window gets resized.
     360                */
    364361                itemSectionHeight: function() {
    365                         var sections, totalHeight, accordionHeight, diff;
    366                         totalHeight = window.innerHeight;
    367                         sections = this.$el.find( '.accordion-section-content' );
    368                         accordionHeight =  46 * ( 1 + sections.length ) - 16; // Magic numbers.
    369                         diff = totalHeight - accordionHeight;
    370                         if ( 120 < diff && 290 > diff ) {
     362                        var totalHeight = window.innerHeight || document.documentElement.clientHeight,
     363                                accordion = this.$el.find( '.accordion-container' ),
     364                                sections = accordion.find( '.accordion-section-content' ),
     365                                visibleSection = sections.filter( ':visible' ),
     366                                searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(),
     367                                accordionHeight,
     368                                diff;
     369
     370                        /*
     371                        Get the accordion sections total height when closed.
     372                        If there is an open accordion section, subtract its content height from the accordion height.
     373                        */
     374                        accordionHeight = visibleSection.length ? accordion.outerHeight() - visibleSection.outerHeight() : accordion.outerHeight();
     375                        // Get the available vertical space.
     376                        diff = totalHeight - accordionHeight - searchHeight;
     377
     378                        // Don't set a max-height if the available vertical space is under 120px or over 300px.
     379                        if ( 120 < diff && 300 >= diff ) {
     380                                // Since the accordion sections content have vertical padding we're using `box-sizing: border-box` in the CSS.
    371381                                sections.css( 'max-height', diff );
     382                        } else {
     383                                sections.css( 'max-height', '' );
    372384                        }
    373385                },
    374386

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

     
    697697         */
    698698        public function available_items_template() {
    699699                ?>
    700                 <div id="available-menu-items" class="accordion-container">
     700                <div id="available-menu-items">
    701701                        <div class="customize-section-title">
    702702                                <button type="button" class="customize-section-back" tabindex="-1">
    703703                                        <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
    … …  
    713713                                </h3>
    714714                        </div>
    715715                        <div id="available-menu-items-search" class="accordion-section cannot-expand">
    716                                 <div class="accordion-section-title">
    717                                         <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
    718                                         <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
    719                                         <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    720                                         <span class="spinner"></span>
    721                                         <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
    722                                 </div>
     716                                <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
     717                                <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
     718                                <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
     719                                <span class="spinner"></span>
     720                                <button type="button" class="clear-results not-a-button"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
    723721                                <ul class="accordion-section-content" data-type="search"></ul>
    724722                        </div>
    725                         <div id="new-custom-menu-item" class="accordion-section">
    726                                 <h4 class="accordion-section-title" role="presentation">
    727                                         <?php _e( 'Custom Links' ); ?>
    728                                         <button type="button" class="not-a-button" aria-expanded="false">
    729                                                 <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
    730                                                 <span class="toggle-indicator" aria-hidden="true"></span>
    731                                         </button>
    732                                 </h4>
    733                                 <div class="accordion-section-content">
    734                                         <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
    735                                         <p id="menu-item-url-wrap">
    736                                                 <label class="howto" for="custom-menu-item-url">
    737                                                         <span><?php _e( 'URL' ); ?></span>
    738                                                         <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
    739                                                 </label>
    740                                         </p>
    741                                         <p id="menu-item-name-wrap">
    742                                                 <label class="howto" for="custom-menu-item-name">
    743                                                         <span><?php _e( 'Link Text' ); ?></span>
    744                                                         <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
    745                                                 </label>
    746                                         </p>
    747                                         <p class="button-controls">
    748                                                 <span class="add-to-menu">
    749                                                         <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
    750                                                         <span class="spinner"></span>
    751                                                 </span>
    752                                         </p>
    753                                 </div>
    754                         </div>
    755                         <?php
    756                         // Containers for per-post-type item browsing; items added with JS.
    757                         foreach ( $this->available_item_types() as $available_item_type ) {
    758                                 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
    759                                 ?>
    760                                 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
     723                        <div class="accordion-container">
     724                                <div id="new-custom-menu-item" class="accordion-section">
    761725                                        <h4 class="accordion-section-title" role="presentation">
    762                                                 <?php echo esc_html( $available_item_type['title'] ); ?>
    763                                                 <span class="spinner"></span>
    764                                                 <span class="no-items"><?php _e( 'No items' ); ?></span>
     726                                                <?php _e( 'Custom Links' ); ?>
    765727                                                <button type="button" class="not-a-button" aria-expanded="false">
    766                                                         <span class="screen-reader-text"><?php
    767                                                         /* translators: %s: Title of a section with menu items */
    768                                                         printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>
     728                                                        <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
    769729                                                        <span class="toggle-indicator" aria-hidden="true"></span>
    770730                                                </button>
    771731                                        </h4>
    772                                         <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
     732                                        <div class="accordion-section-content">
     733                                                <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
     734                                                <p id="menu-item-url-wrap">
     735                                                        <label class="howto" for="custom-menu-item-url">
     736                                                                <span><?php _e( 'URL' ); ?></span>
     737                                                                <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
     738                                                        </label>
     739                                                </p>
     740                                                <p id="menu-item-name-wrap">
     741                                                        <label class="howto" for="custom-menu-item-name">
     742                                                                <span><?php _e( 'Link Text' ); ?></span>
     743                                                                <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
     744                                                        </label>
     745                                                </p>
     746                                                <p class="button-controls">
     747                                                        <span class="add-to-menu">
     748                                                                <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
     749                                                                <span class="spinner"></span>
     750                                                        </span>
     751                                                </p>
     752                                        </div>
    773753                                </div>
    774754                                <?php
    775                         }
    776                         ?>
     755                                // Containers for per-post-type item browsing; items added with JS.
     756                                foreach ( $this->available_item_types() as $available_item_type ) {
     757                                        $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
     758                                        ?>
     759                                        <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
     760                                                <h4 class="accordion-section-title" role="presentation">
     761                                                        <?php echo esc_html( $available_item_type['title'] ); ?>
     762                                                        <span class="spinner"></span>
     763                                                        <span class="no-items"><?php _e( 'No items' ); ?></span>
     764                                                        <button type="button" class="not-a-button" aria-expanded="false">
     765                                                                <span class="screen-reader-text"><?php
     766                                                                /* translators: %s: Title of a section with menu items */
     767                                                                printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>
     768                                                                <span class="toggle-indicator" aria-hidden="true"></span>
     769                                                        </button>
     770                                                </h4>
     771                                                <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
     772                                        </div>
     773                                        <?php
     774                                }
     775                                ?>
     776                        </div><!-- .accordion-container -->
    777777                </div><!-- #available-menu-items -->
    778778        <?php
    779779        }

  • src/wp-includes/class-wp-customize-panel.php

     
    372372                                        /* translators: %s is the site/panel title in the Customizer */
    373373                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
    374374                                ?></span>
    375                                 <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     375                                <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    376376                        </div>
    377377                        <# if ( data.description ) { #>
    378378                                <div class="description customize-panel-description">