WordPress.org
Get WordPress

Make WordPress Core

Ticket #31336: 31336.2.diff

File 31336.2.diff, 14.2 KB (added by celloexpressions, 10 years ago)

Refresh customize.php for Customizer Theme Switcher core merge (CSS still needs updating for the themes section).

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

     
    4545        overflow-x: hidden;
    4646}
    4747
    48 #customize-info {
     48#customize-controls .customize-info {
    4949        border: none;
    5050        border-top: 1px solid #ddd;
     51        border-bottom: 1px solid #ddd;
    5152}
    5253
    53 #customize-info .accordion-section-title {
    54         background-color: #fff;
    55         color: #666666;
     54#customize-controls .customize-info .accordion-section-title {
     55        background: transparent !important;
     56        color: #555 !important;
    5657        border-left: none;
    5758        border-right: none;
    58         border-bottom: 1px solid #eeeeee;
     59        border-bottom: none;
     60        cursor: default;
    5961}
    6062
    61 #customize-info.open .accordion-section-title:after,
    62 #customize-info .accordion-section-title:hover:after,
    63 #customize-info .accordion-section-title:focus:after {
    64         color: #555555;
     63#customize-controls .customize-info.open .accordion-section-title:after,
     64#customize-controls .customize-info .accordion-section-title:hover:after,
     65#customize-controls .customize-info .accordion-section-title:focus:after {
     66        color: #333;
    6567}
    6668
    67 #customize-info .preview-notice {
     69#customize-controls .customize-info .accordion-section-title:after {
     70        display: none;
     71}
     72
     73#customize-controls .customize-info .preview-notice {
    6874        font-size: 13px;
    6975        line-height: 24px;
    7076}
    7177
    72 #customize-info .theme-name {
     78#customize-controls .control-section .customize-section-title,
     79#customize-controls .customize-info .panel-title {
    7380        font-size: 20px;
    7481        font-weight: 200;
    7582        line-height: 24px;
    … …  
    7683        display: block;
    7784}
    7885
    79 #customize-info .theme-screenshot {
    80         width: 258px;
     86#customize-controls .customize-info .customize-help-toggle {
     87        position: absolute;
     88        top: 4px;
     89        right: 1px;
     90        padding: 10px 8px 10px 10px;
     91        cursor: pointer;
    8192}
    8293
    83 #customize-info .theme-description {
    84         margin-top: 1em;
    85         color: #666666;
    86         line-height: 20px;
     94#customize-controls .customize-info.open .customize-help-toggle {
     95        color: #0073aa;
    8796}
    8897
     98#customize-controls .customize-info .customize-panel-description {
     99        display: none;
     100        background: transparent;
     101        padding: 0 12px 16px 12px;
     102}
     103
    89104#customize-theme-controls .control-section {
    90105        border: none;
    91106}
    … …  
    96111        border-bottom: 1px solid #eeeeee;
    97112}
    98113
     114#customize-theme-controls .accordion-section-title:after {
     115        content: "\f345";
     116}
     117
     118.rtl #customize-theme-controls .accordion-section-title:after {
     119        content: "\f341";
     120}
     121
    99122#customize-theme-controls .accordion-section-content {
    100         color: #555555;
    101         background: #fff;
     123        color: #555;
     124        background: transparent;
    102125}
    103126
    104 #customize-info.open .accordion-section-title,
    105 #customize-info .accordion-section-title:hover,
    106 #customize-info .accordion-section-title:focus,
    107 #customize-theme-controls .control-section:hover > .accordion-section-title,
    108 #customize-theme-controls .control-section .accordion-section-title:hover,
    109 #customize-theme-controls .control-section.open .accordion-section-title,
    110 #customize-theme-controls .control-section .accordion-section-title:focus {
     127#customize-controls .control-section:hover > .accordion-section-title,
     128#customize-controls .control-section .accordion-section-title:hover,
     129#customize-controls .control-section.open .accordion-section-title,
     130#customize-controls .control-section .accordion-section-title:focus {
    111131        color: #222;
    112132        background: #f5f5f5;
    113133}
    … …  
    126146        color: #555;
    127147}
    128148
    129 #customize-info.open,
    130149#customize-theme-controls .control-section.open {
    131150        border-bottom: 1px solid #eeeeee;
    132151}
    … …  
    140159        border-bottom-color: #ddd;
    141160}
    142161
    143 #customize-theme-controls > ul,
     162#customize-theme-controls > ul {
     163        margin: 0;
     164}
     165
    144166#customize-theme-controls .accordion-section-content {
    145167        margin: 0;
     168        position: absolute;
     169        left: 100%;
     170        top: 0;
     171        width: -webkit-calc(100% - 24px);
     172        width: calc(100% - 24px);
     173        padding: 12px;
    146174}
    147175
     176h3.customize-section-title {
     177        margin: -12px;
     178        padding: 12px;
     179        border-bottom: 1px solid #ddd;
     180        background: #fff;
     181        color: #555;
     182        cursor: pointer;
     183}
     184
     185h3.customize-section-title:before {
     186        font: normal 20px/1 dashicons;
     187        content: "\f341";
     188        -webkit-font-smoothing: antialiased;
     189        -moz-osx-font-smoothing: grayscale;
     190        position: relative;
     191        top: 3px;
     192}
     193
     194.rtl h3.customize-section-title:before {
     195        content: "\f345";
     196}
     197
     198#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
     199        margin-top: 12px;
     200}
     201
     202#customize-theme-controls {
     203        position: relative;
     204        left: 0;
     205        transition: .18s left ease-in-out;
     206}
     207
     208.section-open #customize-info,
     209.section-open #customize-theme-controls {
     210        left: -100%;
     211}
     212
     213.section-open .control-panel-back {
     214        display: none;
     215}
     216
    148217.control-section.control-panel > .accordion-section-title {
    149218        padding-right: 54px;
    150219}
    … …  
    183252        left: 300px;
    184253        top: 0;
    185254        width: 300px;
    186         border-top: 1px solid #ddd;
    187255        -webkit-transition: left ease-in-out .18s;
    188256        transition: left ease-in-out .18s;
    189257}
    … …  
    215283.control-panel-back {
    216284        display: block;
    217285        position: fixed;
    218         top: 0;
     286        top: 46px;
    219287        z-index: 99;
    220288        left: -48px;
    221289        width: 45px;
    222         height: 45px;
     290        height: 69px;
    223291        padding-right: 2px;
    224292        background: #eee;
    225293        border-right: 1px solid #ddd;
    … …  
    232300        display: none;
    233301}
    234302
     303.panel-meta.customize-info .accordion-section-title {
     304        margin-left: 47px;
     305        border-left: 1px solid #ddd;
     306}
     307
    235308.customize-controls-close:focus,
    236309.customize-controls-close:hover,
    237310.control-panel-back:focus,
    … …  
    258331        font: normal 20px/1 dashicons;
    259332        content: "\f341";
    260333        position: relative;
    261         top: 7px;
     334        top: 17px;
    262335        left: 13px;
    263336}
    264337
    … …  
    316389        transition: left ease-in-out .18s;
    317390}
    318391
    319 .control-section.control-panel .accordion-section-title .panel-title {
    320         font-size: 20px;
    321         font-weight: 200;
    322         line-height: 24px;
    323         display: block;
    324         border: none;
    325 }
    326 
    327 .control-section.control-panel .preview-notice {
    328         font-size: 13px;
    329         line-height: 24px;
    330 }
    331 
    332392p.customize-section-description {
    333393        font-style: normal;
     394        margin-top: 22px;
     395        margin-bottom: 0;
    334396}
    335397
    336398.customize-control {
    … …  
    337399        width: 100%;
    338400        float: left;
    339401        clear: both;
    340         margin-bottom: 8px;
     402        margin-bottom: 12px;
    341403}
    342404
    343405.customize-control select,

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

     
    573573
    574574
    575575@media screen and (max-height: 700px) and (min-width: 981px) {
    576         .customize-control {
     576        .customize-control-widget {
    577577                margin-bottom: 0;
    578578        }
    579579        .widget-top {

  • src/wp-admin/customize.php

     
    138138
    139139                <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
    140140                <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    141                         <div id="customize-info" class="accordion-section">
    142                                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
     141                        <div id="customize-info" class="accordion-section customize-info">
     142                                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
    143143                                        <span class="preview-notice"><?php
    144                                                 echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
     144                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    145145                                        ?></span>
     146                                        <span class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></span>
    146147                                </div>
    147                                 <div class="accordion-section-content"><?php
     148                                <div class="customize-panel-description"><?php
    148149                                        echo __( '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.' );
    149150                                ?></div>
    150151                        </div>

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

     
    428428                        var section = this;
    429429
    430430                        // Expand/Collapse accordion sections on click.
    431                         section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     431                        section.container.find( '.accordion-section-title, .customize-section-title' ).on( 'click keydown', function( event ) {
    432432                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    433433                                        return;
    434434                                }
    … …  
    481481                 * @param {Object}  args
    482482                 */
    483483                onChangeExpanded: function ( expanded, args ) {
    484                         var section = this,
     484                        var position, scroll, section = this,
     485                                container = section.container.closest( '.accordion-container' ),
    485486                                content = section.container.find( '.accordion-section-content' ),
     487                                overlay = section.container.closest( '.wp-full-overlay' ),
    486488                                expand;
    487489
    488490                        if ( expanded ) {
    … …  
    491493                                        expand = args.completeCallback;
    492494                                } else {
    493495                                        expand = function () {
    494                                                 content.stop().slideDown( args.duration, args.completeCallback );
    495496                                                section.container.addClass( 'open' );
     497                                                overlay.addClass( 'section-open' );
     498                                                position = content.offset().top;
     499                                                scroll = container.scrollTop();
     500                                                content.css( 'margin-top', ( 45 - position - scroll ) );
    496501                                        };
    497502                                }
    498503
    … …  
    515520
    516521                        } else {
    517522                                section.container.removeClass( 'open' );
    518                                 content.slideUp( args.duration, args.completeCallback );
     523                                overlay.removeClass( 'section-open' );
     524                                content.css( 'margin-top', 'inherit' );
     525                                container.scrollTop( 0 );
    519526                        }
    520527                }
    521528        });
    … …  
    925932
    926933                        meta = panel.container.find( '.panel-meta:first' );
    927934
    928                         meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     935                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    929936                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    930937                                        return;
    931938                                }
    … …  
    935942                                        return;
    936943                                }
    937944
    938                                 var content = meta.find( '.accordion-section-content:first' );
     945                                var content = meta.find( '.customize-panel-description:first' );
    939946                                if ( meta.hasClass( 'open' ) ) {
    940947                                        meta.toggleClass( 'open' );
    941948                                        content.slideUp( panel.defaultExpandedArguments.duration );
    … …  
    22862293                var parent, topFocus,
    22872294                        body = $( document.body ),
    22882295                        overlay = body.children( '.wp-full-overlay' ),
    2289                         title = $( '#customize-info .theme-name.site-title' ),
     2296                        title = $( '#customize-info .panel-title.site-title' ),
    22902297                        closeBtn = $( '.customize-controls-close' ),
    22912298                        saveBtn = $( '#save' );
    22922299
    … …  
    23012308                });
    23022309
    23032310                // Expand/Collapse the main customizer customize info.
    2304                 $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     2311                $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    23052312                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    23062313                                return;
    23072314                        }
    23082315                        event.preventDefault(); // Keep this AFTER the key filter above
    23092316
    2310                         var section = $( this ).parent(),
    2311                                 content = section.find( '.accordion-section-content:first' );
     2317                        var section = $( this ).closest( '.accordion-section' ),
     2318                                content = section.find( '.customize-panel-description:first' );
    23122319
    23132320                        if ( section.hasClass( 'cannot-expand' ) ) {
    23142321                                return;

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

     
    315315         */
    316316        protected function render_content() {
    317317                ?>
    318                 <li class="panel-meta accordion-section control-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
    319                         <div class="accordion-section-title" tabindex="0">
     318                <li class="panel-meta customize-info accordion-section <?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
     319                        <div class="accordion-section-title">
    320320                                <span class="preview-notice"><?php
    321321                                        /* translators: %s is the site/panel title in the Customizer */
    322322                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
    323323                                ?></span>
     324                                <span class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></span>
    324325                        </div>
    325326                        <?php if ( ! empty( $this->description ) ) : ?>
    326                                 <div class="accordion-section-content description">
     327                                <div class="description customize-panel-description">
    327328                                        <?php echo $this->description; ?>
    328329                                </div>
    329330                        <?php endif; ?>

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

     
    305305                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    306306                        <h3 class="accordion-section-title" tabindex="0">
    307307                                <?php echo esc_html( $this->title ); ?>
    308                                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
     308                                <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
    309309                        </h3>
    310310                        <ul class="accordion-section-content">
    311                                 <?php if ( ! empty( $this->description ) ) : ?>
    312                                         <li class="customize-section-description-container">
     311                                <li class="customize-section-description-container">
     312                                        <h3 class="customize-section-title" tabindex="0">
     313                                                <?php echo esc_html( $this->title ); ?>
     314                                                <span class="screen-reader-text"><?php _e( 'Press return or enter to close' ); ?></span>
     315                                        </h3>
     316                                        <?php if ( ! empty( $this->description ) ) : ?>
    313317                                                <p class="description customize-section-description"><?php echo $this->description; ?></p>
    314                                         </li>
    315                                 <?php endif; ?>
     318                                        <?php endif; ?>
     319                                </li>
    316320                        </ul>
    317321                </li>
    318322                <?php