WordPress.org
Get WordPress

Make WordPress Core

Ticket #31336: 31336.4.diff

File 31336.4.diff, 17.9 KB (added by celloexpressions, 10 years ago)

Refresh, add hover & focus states, clean up panel back arrow setup.

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

     
    5050        overflow-x: hidden;
    5151}
    5252
    53 #customize-info {
     53#customize-controls .customize-info {
    5454        border: none;
    5555        border-top: 1px solid #ddd;
     56        border-bottom: 1px solid #ddd;
    5657}
    5758
    58 #customize-info .accordion-section-title {
    59         background-color: #fff;
    60         color: #666666;
     59#customize-controls .customize-info .accordion-section-title {
     60        background: transparent !important;
     61        color: #555 !important;
    6162        border-left: none;
    6263        border-right: none;
    63         border-bottom: 1px solid #eeeeee;
     64        border-bottom: none;
     65        cursor: default;
    6466}
    6567
    66 #customize-info.open .accordion-section-title:after,
    67 #customize-info .accordion-section-title:hover:after,
    68 #customize-info .accordion-section-title:focus:after {
    69         color: #555555;
     68#customize-controls .customize-info.open .accordion-section-title:after,
     69#customize-controls .customize-info .accordion-section-title:hover:after,
     70#customize-controls .customize-info .accordion-section-title:focus:after {
     71        color: #333;
    7072}
    7173
    72 #customize-info .preview-notice {
     74#customize-controls .customize-info .accordion-section-title:after {
     75        display: none;
     76}
     77
     78#customize-controls .customize-info .preview-notice {
    7379        font-size: 13px;
    7480        line-height: 24px;
    7581}
    7682
    77 #customize-info .theme-name {
     83#customize-controls .control-section .customize-section-title,
     84#customize-controls .customize-info .panel-title {
    7885        font-size: 20px;
    7986        font-weight: 200;
    8087        line-height: 24px;
    … …  
    8188        display: block;
    8289}
    8390
    84 #customize-info .theme-screenshot {
    85         width: 258px;
     91#customize-controls .customize-info .customize-help-toggle {
     92        position: absolute;
     93        top: 4px;
     94        right: 1px;
     95        padding: 10px 8px 10px 10px;
     96        cursor: pointer;
    8697}
    8798
    88 #customize-info .theme-description {
    89         margin-top: 1em;
    90         color: #666666;
    91         line-height: 20px;
     99#customize-controls .customize-info.open .customize-help-toggle {
     100        color: #0073aa;
    92101}
    93102
     103#customize-controls .customize-info .customize-panel-description {
     104        display: none;
     105        background: transparent;
     106        padding: 0 12px 16px 12px;
     107}
     108
    94109#customize-theme-controls .control-section {
    95110        border: none;
    96111}
    … …  
    101116        border-bottom: 1px solid #eeeeee;
    102117}
    103118
     119#customize-theme-controls .accordion-section-title:after {
     120        content: "\f345";
     121}
     122
     123.rtl #customize-theme-controls .accordion-section-title:after {
     124        content: "\f341";
     125}
     126
    104127#customize-theme-controls .accordion-section-content {
    105         color: #555555;
    106         background: #fff;
     128        color: #555;
     129        background: transparent;
    107130}
    108131
    109 #customize-info.open .accordion-section-title,
    110 #customize-info .accordion-section-title:hover,
    111 #customize-info .accordion-section-title:focus,
    112 #customize-theme-controls .control-section:hover > .accordion-section-title,
    113 #customize-theme-controls .control-section .accordion-section-title:hover,
    114 #customize-theme-controls .control-section.open .accordion-section-title,
    115 #customize-theme-controls .control-section .accordion-section-title:focus {
    116         color: #23282d;
    117         background: #f5f5f5;
     132#customize-controls .control-section:hover > .accordion-section-title,
     133#customize-controls .control-section .accordion-section-title:hover,
     134#customize-controls .control-section.open .accordion-section-title,
     135#customize-controls .control-section .accordion-section-title:focus {
     136        color: #fff;
     137        background: #0073aa;
    118138}
    119139
    120140.js .control-section:hover .accordion-section-title,
    … …  
    128148#customize-theme-controls .control-section .accordion-section-title:hover:after,
    129149#customize-theme-controls .control-section.open .accordion-section-title:after,
    130150#customize-theme-controls .control-section .accordion-section-title:focus:after {
    131         color: #555;
     151        color: #fff;
    132152}
    133153
    134 #customize-info.open,
    135154#customize-theme-controls .control-section.open {
    136155        border-bottom: 1px solid #eeeeee;
    137156}
    … …  
    145164        border-bottom-color: #ddd;
    146165}
    147166
    148 #customize-theme-controls > ul,
     167#customize-theme-controls > ul {
     168        margin: 0;
     169}
     170
    149171#customize-theme-controls .accordion-section-content {
    150172        margin: 0;
     173        position: absolute;
     174        left: 100%;
     175        top: 0;
     176        width: -webkit-calc(100% - 24px);
     177        width: calc(100% - 24px);
     178        padding: 12px;
    151179}
    152180
     181h3.customize-section-title {
     182        margin: -12px;
     183        padding: 12px;
     184        border-bottom: 1px solid #ddd;
     185        background: #fff;
     186        color: #555;
     187        cursor: pointer;
     188}
     189
     190h3.customize-section-title:before {
     191        font: normal 20px/1 dashicons;
     192        content: "\f341";
     193        -webkit-font-smoothing: antialiased;
     194        -moz-osx-font-smoothing: grayscale;
     195        position: relative;
     196        top: 3px;
     197        margin: 0 6px 0 2px;
     198}
     199
     200.rtl h3.customize-section-title:before {
     201        content: "\f345";
     202}
     203
     204h3.customize-section-title:hover,
     205h3.customize-section-title:focus {
     206        background: #0073aa;
     207        color: #fff;
     208}
     209
     210#customize-theme-controls .control-section .accordion-section-content > li.customize-control:nth-child(2) {
     211        margin-top: 12px;
     212}
     213
     214#customize-theme-controls {
     215        position: relative;
     216        left: 0;
     217        transition: .18s left ease-in-out;
     218}
     219
     220.section-open #customize-info,
     221.section-open #customize-theme-controls {
     222        left: -100%;
     223}
     224
     225.section-open .control-panel-back {
     226        display: none;
     227}
     228
    153229.control-section.control-panel > .accordion-section-title {
    154230        padding-right: 54px;
    155231}
    … …  
    169245
    170246#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
    171247#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
    172         background: #ddd;
    173         color: #000;
     248        background: #00a0d2;
     249        color: #fff;
    174250        border: 1px solid #d9d9d9;
    175251        border-right: none;
    176252        margin-top: -12px;
    … …  
    184260        left: 300px;
    185261        top: 0;
    186262        width: 300px;
    187         border-top: 1px solid #ddd;
    188263        -webkit-transition: left ease-in-out .18s;
    189264        transition: left ease-in-out .18s;
    190265}
    … …  
    242317        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    243318}
    244319
     320.customize-panel-back {
     321        display: block;
     322        float: left;
     323        width: 45px;
     324        height: 69px;
     325        padding-right: 2px;
     326        background: #eee;
     327        border-right: 1px solid #ddd;
     328        cursor: pointer;
     329        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     330        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     331}
     332
     333
    245334.ios .control-panel-back {
    246335        -webkit-transition: left 0s;
    247336        transition: left 0s;
    … …  
    251340        display: none;
    252341}
    253342
     343.panel-meta.customize-info .accordion-section-title {
     344        margin-left: 47px;
     345        border-left: 1px solid #ddd;
     346}
     347
    254348.customize-overlay-close:focus,
    255349.customize-overlay-close:hover,
    256350.customize-controls-close:focus,
    … …  
    267361        box-shadow: none;
    268362}
    269363
     364.customize-panel-back:hover,
     365.customize-panel-back:focus {
     366        background: #0073aa;
     367        border-color: #ccc;
     368        color: #fff;
     369        outline: none;
     370        -webkit-box-shadow: none;
     371        box-shadow: none;
     372}
     373
    270374.customize-overlay-close:before,
    271375.customize-controls-close:before {
    272376        font: normal 22px/45px dashicons;
    … …  
    276380        left: 13px;
    277381}
    278382
     383.customize-panel-back:before {
     384        font: normal 20px/69px dashicons;
     385        content: "\f341";
     386        position: relative;
     387        left: 13px;
     388}
     389
    279390.control-panel-back:before {
    280391        font: normal 20px/45px dashicons;
    281392        content: "\f341";
    … …  
    285396}
    286397
    287398.in-sub-panel .control-panel-back {
    288         left: 0;
     399/*      left: 0; @todo decide whether to bring back the back buttons in the header */
    289400}
    290401
    291402.current-panel > .accordion-section-title {
    … …  
    345456        transition: left 0s;
    346457}
    347458
    348 .control-section.control-panel .accordion-section-title .panel-title {
    349         font-size: 20px;
    350         font-weight: 200;
    351         line-height: 24px;
    352         display: block;
    353         border: none;
    354 }
    355 
    356 .control-section.control-panel .preview-notice {
    357         font-size: 13px;
    358         line-height: 24px;
    359 }
    360 
    361459p.customize-section-description {
    362460        font-style: normal;
     461        margin-top: 22px;
     462        margin-bottom: 0;
    363463}
    364464
    365465.customize-control {
    … …  
    366466        width: 100%;
    367467        float: left;
    368468        clear: both;
    369         margin-bottom: 8px;
     469        margin-bottom: 12px;
    370470}
    371471
    372472.customize-control select,
    … …  
    9021002}
    9031003
    9041004.control-section-themes .accordion-section-title {
    905         margin: 15px 0;
     1005        margin: 0 0 15px 0;
    9061006}
    9071007
    9081008.customize-themes-panel .accordion-section-title {
    … …  
    9281028        font-weight: normal;
    9291029}
    9301030
     1031.control-section-themes .accordion-section-title:before {
     1032        display: none;
     1033}
     1034
    9311035.customize-themes-panel {
    9321036        display: none;
    9331037        padding: 0 8px;
    … …  
    9561060        margin-bottom: 8px;
    9571061}
    9581062
     1063#customize-theme-controls .themes.accordion-section-content {
     1064        position: relative;
     1065        left: 0;
     1066        padding: 0;
     1067        width: 100%;
     1068}
     1069
    9591070.wp-customizer .theme-browser .themes {
    9601071        padding-bottom: 8px;
    9611072}

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

     
    585585
    586586
    587587@media screen and (max-height: 700px) and (min-width: 981px) {
    588         .customize-control {
     588        .customize-control-widget {
    589589                margin-bottom: 0;
    590590        }
    591591        .widget-top {

  • src/wp-admin/customize.php

     
    143143
    144144                <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 -->
    145145                <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    146                         <div id="customize-info" class="accordion-section">
    147                                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
     146                        <div id="customize-info" class="accordion-section customize-info">
     147                                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
    148148                                        <span class="preview-notice"><?php
    149                                                 echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
     149                                                echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
    150150                                        ?></span>
     151                                        <span class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></span>
    151152                                </div>
    152                                 <div class="accordion-section-content"><?php
     153                                <div class="customize-panel-description"><?php
    153154                                        _e( '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.' );
    154155                                ?></div>
    155156                        </div>

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

     
    446446                        var section = this;
    447447
    448448                        // Expand/Collapse accordion sections on click.
    449                         section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     449                        section.container.find( '.accordion-section-title, .customize-section-title' ).on( 'click keydown', function( event ) {
    450450                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    451451                                        return;
    452452                                }
    … …  
    499499                 * @param {Object}  args
    500500                 */
    501501                onChangeExpanded: function ( expanded, args ) {
    502                         var section = this,
     502                        var position, scroll, section = this,
     503                                container = section.container.closest( '.accordion-container' ),
    503504                                content = section.container.find( '.accordion-section-content' ),
     505                                overlay = section.container.closest( '.wp-full-overlay' ),
    504506                                expand;
    505507
    506508                        if ( expanded ) {
    … …  
    509511                                        expand = args.completeCallback;
    510512                                } else {
    511513                                        expand = function () {
    512                                                 content.stop().slideDown( args.duration, args.completeCallback );
    513514                                                section.container.addClass( 'open' );
     515                                                overlay.addClass( 'section-open' );
     516                                                position = content.offset().top;
     517                                                scroll = container.scrollTop();
     518                                                content.css( 'margin-top', ( 45 - position - scroll ) );
    514519                                        };
    515520                                }
    516521
    … …  
    533538
    534539                        } else {
    535540                                section.container.removeClass( 'open' );
    536                                 content.slideUp( args.duration, args.completeCallback );
     541                                overlay.removeClass( 'section-open' );
     542                                content.css( 'margin-top', 'inherit' );
     543                                container.scrollTop( 0 );
    537544                        }
    538545                }
    539546        });
    … …  
    10121019                                }
    10131020                        });
    10141021
     1022                        // Close panel.
     1023                        panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
     1024                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     1025                                        return;
     1026                                }
     1027                                event.preventDefault(); // Keep this AFTER the key filter above
     1028
     1029                                if ( panel.expanded() ) {
     1030                                        panel.collapse();
     1031                                }
     1032                        });
     1033
    10151034                        meta = panel.container.find( '.panel-meta:first' );
    10161035
    1017                         meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     1036                        meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    10181037                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    10191038                                        return;
    10201039                                }
    … …  
    10241043                                        return;
    10251044                                }
    10261045
    1027                                 var content = meta.find( '.accordion-section-content:first' );
     1046                                var content = meta.find( '.customize-panel-description:first' );
    10281047                                if ( meta.hasClass( 'open' ) ) {
    10291048                                        meta.toggleClass( 'open' );
    10301049                                        content.slideUp( panel.defaultExpandedArguments.duration );
    … …  
    10891108                        // Note: there is a second argument 'args' passed
    10901109                        var position, scroll,
    10911110                                panel = this,
    1092                                 section = panel.container.closest( '.accordion-section' ),
     1111                                section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
    10931112                                overlay = section.closest( '.wp-full-overlay' ),
    10941113                                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    10951114                                siblings = container.find( '.open' ),
    10961115                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
    1097                                 backBtn = overlay.find( '.control-panel-back' ),
     1116                                backBtn = section.find( '.customize-panel-back' ),
    10981117                                panelTitle = section.find( '.accordion-section-title' ).first(),
    10991118                                content = section.find( '.control-panel-content' );
    11001119
    … …  
    25732592                var parent, topFocus,
    25742593                        body = $( document.body ),
    25752594                        overlay = body.children( '.wp-full-overlay' ),
    2576                         title = $( '#customize-info .theme-name.site-title' ),
     2595                        title = $( '#customize-info .panel-title.site-title' ),
    25772596                        closeBtn = $( '.customize-controls-close' ),
    25782597                        saveBtn = $( '#save' );
    25792598
    … …  
    25882607                });
    25892608
    25902609                // Expand/Collapse the main customizer customize info.
    2591                 $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
     2610                $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
    25922611                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    25932612                                return;
    25942613                        }
    25952614                        event.preventDefault(); // Keep this AFTER the key filter above
    25962615
    2597                         var section = $( this ).parent(),
    2598                                 content = section.find( '.accordion-section-content:first' );
     2616                        var section = $( this ).closest( '.accordion-section' ),
     2617                                content = section.find( '.customize-panel-description:first' );
    25992618
    26002619                        if ( section.hasClass( 'cannot-expand' ) ) {
    26012620                                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                        <span class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
     320                        <div class="accordion-section-title">
    320321                                <span class="preview-notice"><?php
    321322                                        /* translators: %s is the site/panel title in the Customizer */
    322323                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
    323324                                ?></span>
     325                                <span class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></span>
    324326                        </div>
    325327                        <?php if ( ! empty( $this->description ) ) : ?>
    326                                 <div class="accordion-section-content description">
     328                                <div class="description customize-panel-description">
    327329                                        <?php echo $this->description; ?>
    328330                                </div>
    329331                        <?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