WordPress.org
Get WordPress

Make WordPress Core

Ticket #42212: 42212.diff

File 42212.diff, 7.5 KB (added by obenland, 8 years ago)

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

     
    17611761        z-index: 20;
    17621762}
    17631763
     1764@media screen and (min-width: 1670px) {
     1765        .control-panel-themes .customize-themes-full-container {
     1766                width: 82%;
     1767                right: 0;
     1768                left: initial;
     1769        }
     1770}
     1771
    17641772.modal-open .control-panel-themes .customize-themes-full-container {
    17651773        overflow-y: visible;
    17661774}
    … …  
    18351843        display: none;
    18361844}
    18371845
    1838 .themes-filter-bar .filter-drawer {
     1846.filter-drawer {
    18391847        box-sizing: border-box;
    18401848        width: 100%;
    18411849        position: absolute;
    … …  
    18481856        border-bottom: 1px solid #ddd;
    18491857}
    18501858
    1851 .themes-filter-bar .filter-group {
     1859.filter-drawer .filter-group {
    18521860        margin: 0 25px 0 0;
    18531861        width: calc( (100% - 75px) / 3);
    18541862        min-width: 200px;
    … …  
    21222130        border-bottom: 1px solid #ddd;
    21232131}
    21242132
     2133@media screen and (min-width: 1670px) {
     2134        .customize-preview-header.themes-filter-bar {
     2135                width: 82%;
     2136                right: 0;
     2137                left: initial;
     2138        }
     2139}
     2140
    21252141.themes-filter-bar .themes-filter-container {
    21262142        margin: 0;
    21272143        padding: 0;
    … …  
    21492165                width: 100%;
    21502166                margin: 0 0 25px 0;
    21512167        }
     2168        .filter-drawer {
     2169                top: 46px;
     2170        }
    21522171        .wp-customizer .theme-browser .themes {
    21532172                padding: 0 0 25px 25px;
    21542173                overflow: hidden;
    … …  
    21632182}
    21642183
    21652184@media screen and (max-width:1018px) {
    2166         .themes-filter-bar .filter-group {
     2185        .filter-drawer .filter-group {
    21672186                width: calc( (100% - 50px) / 2);
    21682187        }
    21692188}
    … …  
    21802199                min-width: 200px;
    21812200        }
    21822201
    2183         .themes-filter-bar .filter-drawer {
     2202        .filter-drawer {
    21842203                top: 86px;
    21852204        }
    21862205
    … …  
    21902209}
    21912210
    21922211@media screen and (max-width:792px) {
    2193         .themes-filter-bar .filter-group {
     2212        .filter-drawer .filter-group {
    21942213                width: calc( 100% - 25px);
    21952214        }
    21962215}
    … …  
    22022221/* Mobile - toggle between themes and filters */
    22032222@media screen and (max-width:600px) {
    22042223
     2224        .filter-drawer {
     2225                top: 132px;
     2226        }
     2227
    22052228        .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
    22062229                display: block;
    22072230                float: right;

  • src/wp-admin/customize.php

     
    226226        <div id="customize-preview" class="wp-full-overlay-main"></div>
    227227        <?php
    228228
     229        wp_print_request_filesystem_credentials_modal();
     230
    229231        /**
    230232         * Prints templates, control scripts, and settings in the footer.
    231233         *

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

     
    17991799
    18001800                        // Toggle feature filters.
    18011801                        section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
    1802                                 $( e.currentTarget )
     1802                                var $themeContainer = $( '.customize-themes-full-container' ),
     1803                                        $filterToggle = $( e.currentTarget );
     1804                                section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
     1805
     1806                                if ( 0 < $themeContainer.scrollTop() ) {
     1807                                        $themeContainer.animate( { scrollTop: 0 }, 400 );
     1808
     1809                                        if ( $filterToggle.hasClass( 'open' ) ) {
     1810                                                return;
     1811                                        }
     1812                                }
     1813
     1814                                $filterToggle
    18031815                                        .toggleClass( 'open' )
    18041816                                        .attr( 'aria-expanded', function( i, attr ) {
    18051817                                                return 'true' === attr ? 'false' : 'true';
    18061818                                        })
    1807                                         .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
    1808                                                 if ( 0 === section.filtersHeight ) {
    1809                                                         section.filtersHeight = $( this ).height();
     1819                                        .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
    18101820
    1811                                                         // First time, so it's opened.
    1812                                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
    1813                                                 }
    1814                                         });
    1815                                 if ( $( e.currentTarget ).hasClass( 'open' ) ) {
    1816                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1821                                if ( $filterToggle.hasClass( 'open' ) ) {
     1822                                        var marginOffset = 1018 < window.innerWidth ? 50 : 76;
     1823
     1824                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + marginOffset );
    18171825                                } else {
    18181826                                        section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
    18191827                                }

  • src/wp-includes/customize/class-wp-customize-themes-section.php

     
    8080                                        <div class="customize-preview-header themes-filter-bar">
    8181                                                <?php $this->filter_bar_content_template(); ?>
    8282                                        </div>
     83                                        <# if ( 'wporg' === data.action ) { #>
     84                                                <?php $this->filter_drawer_content_template(); ?>
     85                                        <# } #>
    8386                                        <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
    8487                                        <ul class="themes">
    8588                                        </ul>
    … …  
    125128                                ?>
    126129                                </span>
    127130                        </button>
    128                         <div class="filter-drawer filter-details">
    129                                 <?php
    130                                 $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
    131                                 foreach ( $feature_list as $feature_name => $features ) {
    132                                         echo '<fieldset class="filter-group">';
    133                                         echo '<legend>' . esc_html( $feature_name ) . '</legend>';
    134                                         echo '<div class="filter-group-feature">';
    135                                         foreach ( $features as $feature => $feature_name ) {
    136                                                 echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
    137                                                 echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
    138                                         }
    139                                         echo '</div>';
    140                                         echo '</fieldset>';
    141                                 }
    142                                 ?>
    143                         </div>
    144131                <# } else { #>
    145132                        <div class="themes-filter-container">
    146133                                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    … …  
    159146                </div>
    160147                <?php
    161148        }
     149
     150        /**
     151         * Render the filter drawer portion of a themes section as a JS template.
     152         *
     153         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     154         * The filter bar container is rendered by @see `render_template()`.
     155         *
     156         * @since 4.9.0
     157         */
     158        protected function filter_drawer_content_template() {
     159                $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
     160                ?>
     161                <div class="filter-drawer filter-details">
     162                        <?php foreach ( $feature_list as $feature_name => $features ) : ?>
     163                                <fieldset class="filter-group">
     164                                        <legend><?php echo esc_html( $feature_name ); ?></legend>
     165                                        <div class="filter-group-feature">
     166                                                <?php foreach ( $features as $feature => $feature_name ) : ?>
     167                                                        <input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
     168                                                        <label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label><br>
     169                                                <?php endforeach; ?>
     170                                        </div>
     171                                </fieldset>
     172                        <?php endforeach; ?>
     173                </div>
     174                <?php
     175        }
    162176}