WordPress.org

Make WordPress Core

Changeset 31974


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

Customizer: Make the available widgets overlay closable on narrow screens.

see #28784.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r31954 r31974  
    4040#customize-header-actions {
    4141    border-bottom: 1px solid #ddd;
     42}
     43
     44#customize-header-actions .secondary-actions {
     45    display: none;
    4246}
    4347
     
    194198}
    195199
     200.customize-close-overlay,
    196201.customize-controls-close {
    197202    display: block;
     
    203208    padding-right: 2px;
    204209    background: #eee;
     210    border: none;
    205211    border-right: 1px solid #ddd;
    206212    color: #444;
     
    208214    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    209215    transition: color .1s ease-in-out, background .1s ease-in-out;
     216}
     217
     218.customize-close-overlay {
     219    left: auto;
     220    right: 0;
    210221}
    211222
     
    230241}
    231242
     243.customize-close-overlay:focus,
     244.customize-close-overlay:hover,
    232245.customize-controls-close:focus,
    233246.customize-controls-close:hover,
     
    250263    top: 7px;
    251264    left: 13px;
     265}
     266
     267.customize-close-overlay:before {
     268    font: normal 22px/1 dashicons;
     269    content: "\f335";
     270    position: relative;
     271    top: 3px;
    252272}
    253273
     
    11281148    }
    11291149
     1150    .adding-widget #customize-header-actions .primary-actions {
     1151        display: none;
     1152    }
     1153
     1154    .adding-widget #customize-header-actions .secondary-actions {
     1155        display: block;
     1156    }
     1157
    11301158    #customize-header-actions .button-primary {
    11311159        margin-top: 6px;
  • trunk/src/wp-admin/customize.php

    r31921 r31974  
    120120    <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    121121        <div id="customize-header-actions" class="wp-full-overlay-header">
    122             <?php
    123                 $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
    124                 submit_button( $save_text, 'primary save', 'save', false );
    125             ?>
    126             <span class="spinner"></span>
    127             <a class="customize-controls-preview-toggle" href="#">
    128                 <span class="controls"><?php _e( 'Customize' ); ?></span>
    129                 <span class="preview"><?php _e( 'Preview' ); ?></span>
    130             </a>
    131             <a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
    132                 <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
    133             </a>
    134             <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
     122            <div class="primary-actions">
     123                <?php
     124                    $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
     125                    submit_button( $save_text, 'primary save', 'save', false );
     126                ?>
     127                <span class="spinner"></span>
     128                <a class="customize-controls-preview-toggle" href="#">
     129                    <span class="controls"><?php _e( 'Customize' ); ?></span>
     130                    <span class="preview"><?php _e( 'Preview' ); ?></span>
     131                </a>
     132                <a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
     133                    <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
     134                </a>
     135                <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
     136            </div>
     137            <div class="secondary-actions">
     138                <button type="button" class="dashicons dashicons-no customize-close-overlay">
     139                    <span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
     140                </button>
     141            </div>
    135142        </div>
    136143
  • trunk/src/wp-admin/js/customize-widgets.js

    r31816 r31974  
    178178            // interacted with (i.e. available widgets panel is blurred) then close the
    179179            // available widgets panel.
    180             $( '#customize-controls' ).on( 'click keydown', function( e ) {
     180            $( '#customize-controls, .customize-close-overlay' ).on( 'click keydown', function( e ) {
    181181                var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
    182182                if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
Note: See TracChangeset for help on using the changeset viewer.