WordPress.org

Make WordPress Core

Changeset 39131


Ignore:
Timestamp:
11/03/16 22:22:43 (8 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.