WordPress.org

Make WordPress Core

Changeset 31975


Ignore:
Timestamp:
04/01/2015 10:50:10 PM (5 years ago)
Author:
ocean90
Message:

Customizer Theme Switcher: Navigation streamlining.

  • Detach Themes section from other controls
  • Move to buttons to navigate back and forth
  • Change titles based on current theme status, active/previewing
  • Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r31974 r31975  
    883883}
    884884
     885.control-section-themes .accordion-section-title {
     886    cursor: default;
     887}
     888
     889#customize-theme-controls .control-section-themes .accordion-section-title:hover,
     890#customize-theme-controls .control-section-themes .accordion-section-title:focus {
     891    color: #555555;
     892    background-color: #fff;
     893}
     894
     895.control-section-themes .accordion-section-title {
     896    margin: 15px 0;
     897}
     898
     899.customize-themes-panel .accordion-section-title {
     900    margin: 15px -8px;
     901}
     902
     903.control-section-themes .accordion-section-title {
     904    padding-right: 100px; /* Space for the button */
     905}
     906
     907.control-section-themes .accordion-section-title span {
     908    font-size: small;
     909    display: block;
     910    font-weight: 400;
     911}
     912
     913.control-section-themes .accordion-section-title .change-theme,
     914.control-section-themes .accordion-section-title .customize-theme {
     915    position: absolute;
     916    right: 10px;
     917    top: 50%;
     918    margin-top: -14px;
     919    font-weight: normal;
     920}
     921
    885922.customize-themes-panel {
    886923    display: none;
     
    890927    -webkit-box-sizing: border-box;
    891928    -moz-box-sizing: border-box;
     929    box-sizing: border-box;
     930}
     931
     932
     933.customize-themes-panel > h2 {
     934    padding: 15px 8px 0 8px;
    892935}
    893936
     
    934977}
    935978
    936 
    937 .wp-customizer .theme-browser .theme.active:hover,
    938 .wp-customizer .theme-browser .theme.active:focus {
    939     cursor: default;
    940 }
    941 
    942 .wp-customizer .theme-browser .theme.active .more-details {
     979#accordion-section-themes .accordion-section-title:after {
    943980    display: none;
    944 }
    945 
    946 .wp-customizer .theme-browser .theme.active .theme-name {
    947     padding-right: 15px;
    948 }
    949 
    950 .wp-customizer .theme-browser.rendered .theme.active:hover .theme-screenshot img,
    951 .wp-customizer .theme-browser.rendered .theme.active:focus .theme-screenshot img {
    952     opacity: 1;
    953 }
    954 
    955 /* Panel-like behavior */
    956 #accordion-section-themes .accordion-section-title:after {
    957     content: "\f148";
    958 }
    959 
    960 .rtl #accordion-section-themes .accordion-section-title:after {
    961     -webkit-transform: rotate(180deg);
    962     -ms-transform: rotate(180deg);
    963     transform: rotate(180deg);
    964981}
    965982
     
    979996.in-themes-panel #customize-theme-controls > ul > .accordion-section {
    980997    left: 100%;
    981 }
    982 
    983 .in-themes-panel .control-panel-back:before {
    984     content: "\f345";
    985     left: 14px;
    986 }
    987 
    988 .in-themes-panel .control-panel-back {
    989     left: 0;
    990 }
    991 
    992 .in-themes-panel .control-panel-back:before {
    993998}
    994999
     
    10401045}
    10411046
    1042 
    1043 /** Handle cheaters. */
     1047/* Handle cheaters. */
    10441048body.cheatin {
    10451049    font-size: medium;
  • trunk/src/wp-admin/js/customize-controls.js

    r31954 r31975  
    592592
    593593            // Expand/Collapse section/panel.
    594             section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     594            section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
    595595                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    596596                    return;
     
    602602                } else {
    603603                    section.expand();
    604                 }
    605             });
    606 
    607 
    608             $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( event ) {
    609                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    610                     return;
    611                 }
    612 
    613                 event.preventDefault(); // Keep this AFTER the key filter above
    614 
    615                 if ( section.expanded() ) {
    616                     section.collapse();
    617604                }
    618605            });
     
    693680                siblings = container.find( '.open' ),
    694681                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
    695                 backBtn = overlay.find( '.control-panel-back' ),
    696                 panelTitle = section.find( '.accordion-section-title' ).first(),
     682                customizeBtn = section.find( '.customize-theme' ),
     683                changeBtn = section.find( '.change-theme' ),
    697684                content = section.find( '.control-panel-content' );
    698685
     
    723710                } );
    724711                topPanel.attr( 'tabindex', '-1' );
    725                 backBtn.attr( 'tabindex', '0' );
    726                 backBtn.focus();
     712                customizeBtn.focus();
    727713            } else {
    728714                siblings.removeClass( 'open' );
     
    736722                } );
    737723                topPanel.attr( 'tabindex', '0' );
    738                 backBtn.attr( 'tabindex', '-1' );
    739                 panelTitle.focus();
     724                changeBtn.focus();
    740725                container.scrollTop( 0 );
    741726            }
     
    19001885                }
    19011886
    1902                 if ( $( this ).hasClass( 'active' ) ) {
    1903                     return;
    1904                 }
    1905 
    19061887                var previewUrl = $( this ).data( 'previewUrl' );
    19071888
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r31968 r31975  
    11491149
    11501150        $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
    1151             'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ),
     1151            'title'      => $this->theme()->display( 'Name' ),
    11521152            'capability' => 'switch_themes',
    1153             'priority' => 0,
     1153            'priority'   => 0,
    11541154        ) ) );
    11551155
     
    11641164        $themes = wp_prepare_themes_for_js();
    11651165        foreach ( $themes as $theme ) {
     1166            if ( $theme['active'] ) {
     1167                continue;
     1168            }
     1169
    11661170            $theme_id = 'theme_' . $theme['id'];
    11671171            $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
    1168                 'theme' => $theme,
    1169                 'section' => 'themes',
     1172                'theme'    => $theme,
     1173                'section'  => 'themes',
    11701174                'settings' => 'active_theme',
    11711175            ) ) );
  • trunk/src/wp-includes/class-wp-customize-section.php

    r31968 r31975  
    342342        ?>
    343343        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    344             <h3 class="accordion-section-title" tabindex="0">
    345                 <?php echo esc_html( $this->title ); ?>
    346                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
     344            <h3 class="accordion-section-title">
     345                <?php
     346                if ( $this->manager->is_theme_active() ) {
     347                    /* translators: %s: theme name */
     348                    printf( __( '<span>Active theme</span> %s' ), $this->title );
     349                } else {
     350                    /* translators: %s: theme name */
     351                    printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     352                }
     353                ?>
     354
     355                <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
    347356            </h3>
    348357            <div class="customize-themes-panel control-panel-content themes-php">
    349                 <h2><?php esc_html_e( 'Themes' ); ?>
    350                     <span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
     358                <h2>
     359                    <?php _e( 'Themes' ); ?>
     360                    <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    351361                </h2>
     362
     363                <h3 class="accordion-section-title customize-section-title">
     364                    <?php
     365                    if ( $this->manager->is_theme_active() ) {
     366                        /* translators: %s: theme name */
     367                        printf( __( '<span>Active theme</span> %s' ), $this->title );
     368                    } else {
     369                        /* translators: %s: theme name */
     370                        printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     371                    }
     372                    ?>
     373                    <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
     374                </h3>
     375
    352376                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
     377
    353378                <div id="customize-container"></div>
    354                 <?php if ( 6 < count( $this->controls ) ) : ?>
     379                <?php if ( count( $this->controls ) > 4 ) : ?>
    355380                    <p><label for="themes-filter">
    356381                        <span class="screen-reader-text"><?php _e( 'Search installed themes...' ); ?></span>
Note: See TracChangeset for help on using the changeset viewer.