WordPress.org

Make WordPress Core

Ticket #42215: 42215.2.diff

File 42215.2.diff, 10.2 KB (added by Mahvash Fatima, 23 months ago)
  • src/wp-admin/css/customize-controls.css

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
    index 8c5cc10..23806c4 100644
    p.customize-section-description { 
    20202020        display: none; /* Hide "installed" notice on installed themes tab. */
    20212021}
    20222022
    2023 .control-panel-themes .theme-browser .theme .theme-actions .button-primary {
    2024         margin: 0 0 0 8px;
    2025 }
    2026 
    20272023.customize-control-theme .theme {
    20282024        width: 100%;
    20292025        margin: 0;
    p.customize-section-description { 
    20942090        font-size: 15px;
    20952091}
    20962092
     2093.theme-id-container {
     2094        position: relative;
     2095}
     2096
     2097.theme-browser .theme.active .theme-actions,
     2098.wp-customizer .theme-browser .theme .theme-actions {
     2099        position: absolute;
     2100        top: 50%;
     2101        transform: translateY(-50%);
     2102        right: 0;
     2103        padding: 0 15px;
     2104}
     2105
    20972106#customize-controls .theme-overlay .theme-name {
    20982107        font-size: 32px;
    20992108}
    p.customize-section-description { 
    21182127
    21192128.themes-filter-bar .wp-filter-search {
    21202129        line-height: 25px;
    2121         padding: 3px 5px;
     2130        padding: 6px 10px 6px 30px;
    21222131        max-width: 100%;
    21232132        width: 40%;
    21242133        min-width: 300px;
    21252134        position: absolute;
    21262135        top: 6px;
    21272136        left: 25px;
     2137        height: 32px;
     2138        margin: 1px 0;
    21282139}
    21292140
    21302141/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
    p.customize-section-description { 
    22332244        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
    22342245                left: 0;
    22352246                top: 0;
    2236                 height: 42px;
     2247                height: 46px;
    22372248                width: 26px;
    22382249                display: block;
    22392250                line-height: 46px;
    p.customize-section-description { 
    22532264        .showing-themes #customize-header-actions {
    22542265                display: none;
    22552266        }
     2267
     2268        #customize-controls {
     2269                width: 100%;
     2270        }
    22562271}
    22572272
    22582273/* Details View */
    p.customize-section-description { 
    23632378                top: 0;
    23642379                bottom: 0;
    23652380        }
     2381
     2382        .wp-customizer .theme-browser .themes {
     2383                padding-right: 25px;
     2384        }
    23662385}
    23672386
    23682387/* Handle cheaters. */
    body.adding-widget .add-new-widget:before, 
    26772696}
    26782697
    26792698#available-menu-items-search .search-icon:after,
    2680 #available-widgets-filter .search-icon:after {
     2699.themes-filter-bar .search-icon:after {
    26812700        content: "\f179";
    26822701        font: normal 20px/1 dashicons;
    26832702        vertical-align: middle;
    body.adding-widget .add-new-widget:before, 
    26852704        -moz-osx-font-smoothing: grayscale;
    26862705}
    26872706
     2707.themes-filter-bar .search-icon {
     2708        position: absolute;
     2709        top: 7px;
     2710        left: 26px;
     2711        z-index: 1;
     2712        color: #72777c;
     2713        height: 30px;
     2714        width: 30px;
     2715        line-height: 2;
     2716        text-align: center;
     2717}
     2718
    26882719.no-widgets-found-message {
    26892720        display: none;
    26902721        margin: 0;
    body.adding-widget .add-new-widget:before, 
    27972828        .media-widget-control .media-widget-buttons .button.select-media {
    27982829                margin-top: 12px;
    27992830        }
     2831
     2832        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     2833                margin: 3px 0 3px 25px;
     2834        }
    28002835}
    28012836
    28022837@media screen and ( max-width: 1200px ) {
    body.adding-widget .add-new-widget:before, 
    28082843}
    28092844
    28102845@media screen and ( max-width: 640px ) {
    2811         #customize-controls {
    2812                 width: 100%;
    2813         }
    28142846
    28152847        .wp-full-overlay.expanded,
    28162848        .outer-section-open .wp-full-overlay.expanded {
    body.adding-widget .add-new-widget:before, 
    28462878        }
    28472879
    28482880        #customize-footer-actions,
    2849         #customize-preview,
     2881        /*#customize-preview,*/
    28502882        .customize-controls-preview-toggle .controls,
    28512883        .preview-only .wp-full-overlay-sidebar-content,
    28522884        .preview-only .customize-controls-preview-toggle .preview {
    body.adding-widget .add-new-widget:before, 
    28792911                display: block;
    28802912        }
    28812913
    2882         #customize-preview {
    2883                 top: 45px;
    2884                 bottom: 0;
    2885                 height: auto;
     2914        .wp-full-overlay.expanded {
     2915                margin-left: 300px;
    28862916        }
    28872917
    28882918        .wp-core-ui.wp-customizer .button {
    body.adding-widget .add-new-widget:before, 
    28912921                font-size: 14px;
    28922922                vertical-align: middle;
    28932923                height: auto;
    2894                 margin-bottom: 4px;
    2895                 margin-top: 12px;
    28962924        }
    28972925
    28982926        #publish-settings {
    body.adding-widget .add-new-widget:before, 
    29743002        .reordering .reorder-done {
    29753003                padding: 8px;
    29763004        }
     3005
     3006        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     3007                margin: 0;
     3008        }
    29773009}
  • src/wp-admin/css/themes.css

    diff --git src/wp-admin/css/themes.css src/wp-admin/css/themes.css
    index e339448..c6f7972 100644
    body.js .theme-browser.search-loading { 
    9797        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    9898        opacity: 0;
    9999        transition: opacity 0.1s ease-in-out;
    100         position: absolute;
    101         bottom: 0;
    102         right: 0;
    103         height: 38px;
    104         padding: 9px 10px 0 10px;
     100        height: auto;
    105101        background: rgba(244, 244, 244, 0.7);
    106102        border-left: 1px solid rgba(0,0,0,0.05);
    107103}
  • src/wp-includes/customize/class-wp-customize-theme-control.php

    diff --git src/wp-includes/customize/class-wp-customize-theme-control.php src/wp-includes/customize/class-wp-customize-theme-control.php
    index 886a711..1491430 100644
    class WP_Customize_Theme_Control extends WP_Customize_Control { 
    9999                        <# } #>
    100100
    101101                        <# if ( data.theme.active ) { #>
    102                                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
    103                                         <?php
    104                                         /* translators: %s: theme name */
    105                                         printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
    106                                         ?>
    107                                 </h3>
    108                                 <div class="theme-actions">
    109                                         <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
    110                                 </div>
     102                <div class="theme-id-container">
     103                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
     104                        <?php
     105                        /* translators: %s: theme name */
     106                        printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
     107                        ?>
     108                    </h3>
     109                    <div class="theme-actions">
     110                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
     111                    </div>
     112                </div>
    111113                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    112114                        <# } else if ( 'installed' === data.theme.type ) { #>
    113                                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    114                                 <div class="theme-actions">
    115                                         <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
    116                                 </div>
     115                <div class="theme-id-container">
     116                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     117                    <div class="theme-actions">
     118                        <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
     119                    </div>
     120                </div>
    117121                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    118122                        <# } else { #>
    119                                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    120                                 <div class="theme-actions">
    121                                         <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
    122                                 </div>
     123                <div class="theme-id-container">
     124                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     125                    <div class="theme-actions">
     126                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
     127                    </div>
     128                </div>
    123129                        <# } #>
    124130                </div>
    125131        <?php
  • src/wp-includes/customize/class-wp-customize-themes-section.php

    diff --git src/wp-includes/customize/class-wp-customize-themes-section.php src/wp-includes/customize/class-wp-customize-themes-section.php
    index a89439a..032c53a 100644
    class WP_Customize_Themes_Section extends WP_Customize_Section { 
    114114                        <div class="search-form">
    115115                                <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    116116                                <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
    117                                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     117                <div class="search-icon" aria-hidden="true"></div>
     118                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    118119                        </div>
    119120                        <button type="button" class="button feature-filter-toggle">
    120121                                <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
    class WP_Customize_Themes_Section extends WP_Customize_Section { 
    144145                        <div class="themes-filter-container">
    145146                                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    146147                                <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
    147                                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     148                <div class="search-icon" aria-hidden="true"></div>
     149                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    148150                        </div>
    149151                <# } #>
    150152                <div class="filter-themes-count">