WordPress.org

Make WordPress Core

Changeset 39131


Ignore:
Timestamp:
11/03/2016 10:22:43 PM (19 months ago)
Author:
westonruter
Message:

Customize: Let edit shortcuts be persistently visible when controls pane is expanded, hidden when collapsed, and always visible in mobile preview. Remove initial flash of edit shortcuts.

Props westonruter, sirbrillig.
Fixes #27403.

Location:
trunk/src
Files:
3 edited

Legend:

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

    r39120 r39131  
    52085208            expandedSection( false );
    52095209            previewerAlive( true );
    5210             editShortcutVisibility( 'initial' );
     5210            editShortcutVisibility( 'visible' );
    52115211
    52125212            api.bind( 'change', function() {
     
    58145814
    58155815        // Update the edit shortcut visibility state.
     5816        api.state( 'paneVisible' ).bind( function( isPaneVisible ) {
     5817            var isMobileScreen;
     5818            if ( window.matchMedia ) {
     5819                isMobileScreen = window.matchMedia( 'screen and ( max-width: 640px )' ).matches;
     5820            } else {
     5821                isMobileScreen = $( window ).width() <= 640;
     5822            }
     5823            api.state( 'editShortcutVisibility' ).set( isPaneVisible || isMobileScreen ? 'visible' : 'hidden' );
     5824        } );
     5825        if ( window.matchMedia ) {
     5826            window.matchMedia( 'screen and ( max-width: 640px )' ).addListener( function() {
     5827                var state = api.state( 'paneVisible' );
     5828                state.callbacks.fireWith( state, [ state.get(), state.get() ] );
     5829            } );
     5830        }
    58165831        api.previewer.bind( 'edit-shortcut-visibility', function( visibility ) {
    58175832            api.state( 'editShortcutVisibility' ).set( visibility );
  • trunk/src/wp-includes/css/customize-preview.css

    r38972 r39131  
    8181}
    8282
    83 body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
    84     animation-duration: 1.5s;
    85     animation-delay: 0.4s;
    86     animation-name: customize-partial-edit-shortcut-bounce-disappear;
    87     pointer-events: none;
    88 }
    89 
    9083.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
    9184.customize-partial-edit-shortcut-hidden:before {
  • trunk/src/wp-includes/js/customize-selective-refresh.js

    r39018 r39131  
    997997            body.toggleClass( 'customize-partial-edit-shortcuts-hidden', shouldAnimateHide );
    998998            body.toggleClass( 'customize-partial-edit-shortcuts-shown', 'visible' === visibility );
    999             body.toggleClass( 'customize-partial-edit-shortcuts-flash', 'initial' === visibility );
    1000999        } );
    10011000
     
    10231022                partial.deferred.ready.resolve();
    10241023            } );
    1025 
    1026             body.on( 'click', function( event ) {
    1027                 if ( event.shiftKey || $( event.target ).is( '.customize-partial-edit-shortcut, :input, button *, a[href], a[href] *, object, object *, [tabindex], [tabindex] *' ) ) {
    1028                     return; // Don't toggle shortcuts on shift-clicks or clicks on (or in) interactive elements.
    1029                 }
    1030                 api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
    1031                 api.preview.send( 'edit-shortcut-visibility', api.selectiveRefresh.editShortcutVisibility.get() );
    1032             } );
    10331024        } );
    10341025
Note: See TracChangeset for help on using the changeset viewer.