WordPress.org

Make WordPress Core

Ticket #42215: 42215.3.diff

File 42215.3.diff, 10.4 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..34e497b 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: 10px 15px;
     2104        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     2105}
     2106
    20972107#customize-controls .theme-overlay .theme-name {
    20982108        font-size: 32px;
    20992109}
    p.customize-section-description { 
    21182128
    21192129.themes-filter-bar .wp-filter-search {
    21202130        line-height: 25px;
    2121         padding: 3px 5px;
     2131        padding: 6px 10px 6px 30px;
    21222132        max-width: 100%;
    21232133        width: 40%;
    21242134        min-width: 300px;
    21252135        position: absolute;
    21262136        top: 6px;
    21272137        left: 25px;
     2138        height: 32px;
     2139        margin: 1px 0;
    21282140}
    21292141
    21302142/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
    p.customize-section-description { 
    22332245        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
    22342246                left: 0;
    22352247                top: 0;
    2236                 height: 42px;
     2248                height: 46px;
    22372249                width: 26px;
    22382250                display: block;
    22392251                line-height: 46px;
    p.customize-section-description { 
    22532265        .showing-themes #customize-header-actions {
    22542266                display: none;
    22552267        }
     2268
     2269        #customize-controls {
     2270                width: 100%;
     2271        }
    22562272}
    22572273
    22582274/* Details View */
    p.customize-section-description { 
    23632379                top: 0;
    23642380                bottom: 0;
    23652381        }
     2382
     2383        .wp-customizer .theme-browser .themes {
     2384                padding-right: 25px;
     2385        }
    23662386}
    23672387
    23682388/* Handle cheaters. */
    body.adding-widget .add-new-widget:before, 
    26772697}
    26782698
    26792699#available-menu-items-search .search-icon:after,
    2680 #available-widgets-filter .search-icon:after {
     2700.themes-filter-bar .search-icon:after {
    26812701        content: "\f179";
    26822702        font: normal 20px/1 dashicons;
    26832703        vertical-align: middle;
    body.adding-widget .add-new-widget:before, 
    26852705        -moz-osx-font-smoothing: grayscale;
    26862706}
    26872707
     2708.themes-filter-bar .search-icon {
     2709        position: absolute;
     2710        top: 7px;
     2711        left: 26px;
     2712        z-index: 1;
     2713        color: #72777c;
     2714        height: 30px;
     2715        width: 30px;
     2716        line-height: 2;
     2717        text-align: center;
     2718}
     2719
    26882720.no-widgets-found-message {
    26892721        display: none;
    26902722        margin: 0;
    body.adding-widget .add-new-widget:before, 
    27972829        .media-widget-control .media-widget-buttons .button.select-media {
    27982830                margin-top: 12px;
    27992831        }
     2832
     2833        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     2834                margin: 3px 0 3px 25px;
     2835        }
    28002836}
    28012837
    28022838@media screen and ( max-width: 1200px ) {
    body.adding-widget .add-new-widget:before, 
    28082844}
    28092845
    28102846@media screen and ( max-width: 640px ) {
    2811         #customize-controls {
    2812                 width: 100%;
    2813         }
    28142847
    28152848        .wp-full-overlay.expanded,
    28162849        .outer-section-open .wp-full-overlay.expanded {
    body.adding-widget .add-new-widget:before, 
    28462879        }
    28472880
    28482881        #customize-footer-actions,
    2849         #customize-preview,
     2882        /*#customize-preview,*/
    28502883        .customize-controls-preview-toggle .controls,
    28512884        .preview-only .wp-full-overlay-sidebar-content,
    28522885        .preview-only .customize-controls-preview-toggle .preview {
    body.adding-widget .add-new-widget:before, 
    28792912                display: block;
    28802913        }
    28812914
    2882         #customize-preview {
    2883                 top: 45px;
    2884                 bottom: 0;
    2885                 height: auto;
     2915        .wp-full-overlay.expanded {
     2916                margin-left: 300px;
    28862917        }
    28872918
    28882919        .wp-core-ui.wp-customizer .button {
    body.adding-widget .add-new-widget:before, 
    28912922                font-size: 14px;
    28922923                vertical-align: middle;
    28932924                height: auto;
    2894                 margin-bottom: 4px;
    2895                 margin-top: 12px;
    28962925        }
    28972926
    28982927        #publish-settings {
    body.adding-widget .add-new-widget:before, 
    29743003        .reordering .reorder-done {
    29753004                padding: 8px;
    29763005        }
     3006
     3007        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     3008                margin: 0;
     3009        }
     3010
     3011        .theme-browser .theme.active .theme-actions,
     3012        .wp-customizer .theme-browser .theme .theme-actions {
     3013                padding: 9px 15px;
     3014                box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     3015        }
    29773016}
  • 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">