WordPress.org

Make WordPress Core

Ticket #34343: 34343_4.diff

File 34343_4.diff, 9.1 KB (added by delawski, 3 years ago)
  • src/wp-admin/css/customize-controls.css

    diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
    index 96aba54..b7fbcd9 100644
    a b body { 
    5757        margin-bottom: 15px;
    5858}
    5959
     60#customize-controls .customize-info.is-in-view,
     61#customize-controls .customize-section-title.is-in-view {
     62        position: absolute;
     63        z-index: 9;
     64        width: 100%;
     65        box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
     66}
     67
     68#customize-controls .customize-section-title.is-in-view {
     69        margin-top: 0;
     70}
     71
     72#customize-controls .customize-info.is-in-view + .accordion-section {
     73        margin-top: 15px;
     74}
     75
     76#customize-controls .customize-info.is-sticky,
     77#customize-controls .customize-section-title.is-sticky {
     78        position: fixed;
     79        top: 46px;
     80}
     81
    6082#customize-controls .customize-info .accordion-section-title {
    6183        background: #fff;
    6284        color: #555;
    body { 
    325347        padding: 12px;
    326348}
    327349
     350#customize-theme-controls .customize-pane-child.menu li {
     351        position: static;
     352}
     353
    328354.customize-section-description-container {
    329355        margin-bottom: 15px;
    330356}
    h3.customize-section-title { 
    409435        display: block;
    410436        float: left;
    411437        width: 48px;
    412         height: 70px;
     438        height: 71px;
    413439        padding: 0 24px 0 0;
    414440        margin: 0;
    415441        background: #fff;
    h3.customize-section-title { 
    423449}
    424450
    425451.customize-section-back {
    426         height: 73px;
     452        height: 74px;
    427453}
    428454
    429455.ios .customize-panel-back {
    h3.customize-section-title { 
    484510}
    485511
    486512.wp-full-overlay-sidebar .wp-full-overlay-header {
     513        background-color: #eee;
    487514        -webkit-transition: padding ease-in-out .18s;
    488515        transition: padding ease-in-out .18s;
    489516}
  • src/wp-admin/css/customize-nav-menus.css

    diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
    index c6dd724..1386fe0 100644
    a b  
    6565        text-align: right;
    6666}
    6767
     68.wp-customizer .menu-item-handle:hover {
     69        z-index: 8;
     70}
     71
    6872.customize-control-nav_menu_item.has-notifications .menu-item-handle {
    6973        border-left: 4px solid #00a0d2;
    7074}
     
    7276.wp-customizer .menu-item-settings {
    7377        max-width: 100%;
    7478        overflow: hidden;
     79        z-index: 8;
    7580        padding: 10px;
    7681        background: #eee;
    7782        border: 1px solid #999;
  • src/wp-admin/js/customize-controls.js

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
    index e354d0d..72b8225 100644
    a b  
    10041004
    10051005                                                content.addClass( 'open' );
    10061006                                                overlay.addClass( 'section-open' );
     1007                                                api.state( 'expandedSection' ).set( section );
    10071008                                        }, this );
    10081009                                }
    10091010
     
    10421043
    10431044                                content.removeClass( 'open' );
    10441045                                overlay.removeClass( 'section-open' );
     1046                                if ( section === api.state( 'expandedSection' ).get() ) {
     1047                                        api.state( 'expandedSection' ).set( false );
     1048                                }
    10451049
    10461050                        } else {
    10471051                                if ( args.completeCallback ) {
     
    19951999
    19962000                                overlay.addClass( 'in-sub-panel' );
    19972001                                accordionSection.addClass( 'current-panel' );
     2002                                api.state( 'expandedPanel' ).set( panel );
    19982003
    19992004                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
    20002005                                panel._animateChangeExpanded( function() {
     
    20112016
    20122017                                overlay.removeClass( 'in-sub-panel' );
    20132018                                accordionSection.removeClass( 'current-panel' );
     2019                                if ( panel === api.state( 'expandedPanel' ).get() ) {
     2020                                        api.state( 'expandedPanel' ).set( false );
     2021                                }
    20142022                        }
    20152023                },
    20162024
     
    49684976                                activated = state.create( 'activated' ),
    49694977                                processing = state.create( 'processing' ),
    49704978                                paneVisible = state.create( 'paneVisible' ),
     4979                                expandedPanel = state.create( 'expandedPanel' ),
     4980                                expandedSection = state.create( 'expandedSection' ),
    49714981                                changesetStatus = state.create( 'changesetStatus' ),
    49724982                                previewerAlive = state.create( 'previewerAlive' ),
    49734983                                populateChangesetUuidParam;
     
    50035013                        activated( api.settings.theme.active );
    50045014                        processing( 0 );
    50055015                        paneVisible( true );
     5016                        expandedPanel( false );
     5017                        expandedSection( false );
    50065018                        previewerAlive( true );
    50075019                        changesetStatus( api.settings.changeset.status );
    50085020
     
    51565168                        overlay.toggleClass( 'preview-only' );
    51575169                });
    51585170
     5171                /*
     5172                 * Sticky header feature.
     5173                 */
     5174                (function() {
     5175                        var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
     5176                                changeContainer, getHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
     5177                                activeHeader, lastScrollTop;
     5178
     5179                        // Determine which panel or section is currently expanded.
     5180                        changeContainer = function( container ) {
     5181                                var newInstance = container,
     5182                                        expandedSection = api.state( 'expandedSection' ).get(),
     5183                                        expandedPanel = api.state( 'expandedPanel' ).get(),
     5184                                        headerElement;
     5185
     5186                                // Release previously active header element.
     5187                                if ( activeHeader && activeHeader.element ) {
     5188                                        releaseStickyHeader( activeHeader.element );
     5189                                }
     5190
     5191                                if ( ! newInstance ) {
     5192                                        if ( ! expandedSection && expandedPanel && expandedPanel.contentContainer ) {
     5193                                                newInstance = expandedPanel;
     5194                                        } else if ( ! expandedPanel && expandedSection && expandedSection.contentContainer ) {
     5195                                                newInstance = expandedSection;
     5196                                        } else {
     5197                                                activeHeader = false;
     5198                                                return;
     5199                                        }
     5200                                }
     5201
     5202                                headerElement = newInstance.contentContainer.find( '.customize-section-title, .panel-meta' ).first();
     5203                                if ( headerElement.length ) {
     5204                                        activeHeader = {
     5205                                                instance: newInstance,
     5206                                                element:  headerElement,
     5207                                                parent:   headerElement.closest( '.customize-pane-child' ),
     5208                                                height:   getHeaderHeight( headerElement )
     5209                                        };
     5210                                        if ( expandedSection ) {
     5211                                                resetStickyHeader( activeHeader.element, activeHeader.parent );
     5212                                        }
     5213                                } else {
     5214                                        activeHeader = false;
     5215                                }
     5216                        };
     5217                        api.state( 'expandedSection' ).bind( changeContainer );
     5218                        api.state( 'expandedPanel' ).bind( changeContainer );
     5219
     5220                        // Throttled scroll event handler.
     5221                        parentContainer.on( 'scroll', _.throttle( function() {
     5222                                if ( ! activeHeader ) {
     5223                                        return;
     5224                                }
     5225
     5226                                var scrollTop = parentContainer.scrollTop(),
     5227                                        isScrollingUp = ( lastScrollTop ) ? scrollTop <= lastScrollTop : true;
     5228
     5229                                lastScrollTop = scrollTop;
     5230                                positionStickyHeader( activeHeader, scrollTop, isScrollingUp );
     5231                        }, 8 ) );
     5232
     5233                        // Release header element if it is sticky.
     5234                        releaseStickyHeader = function( headerElement ) {
     5235                                if ( ! headerElement.hasClass( 'is-sticky' ) ) {
     5236                                        return;
     5237                                }
     5238                                headerElement
     5239                                        .removeClass( 'is-sticky' )
     5240                                        .addClass( 'maybe-sticky is-in-view' )
     5241                                        .css( 'top', parentContainer.scrollTop() + 'px' );
     5242                        };
     5243
     5244                        // Reset position of the sticky header.
     5245                        resetStickyHeader = function( headerElement, headerParent ) {
     5246                                headerElement
     5247                                        .removeClass( 'maybe-sticky is-in-view' )
     5248                                        .css( {
     5249                                                width: '',
     5250                                                top: ''
     5251                                        } );
     5252                                headerParent.css( 'padding-top', '' );
     5253                        };
     5254
     5255                        // Get header height.
     5256                        getHeaderHeight = function( headerElement ) {
     5257                                var height = headerElement.data( 'height' );
     5258                                if ( ! height ) {
     5259                                        height = headerElement.outerHeight();
     5260                                        headerElement.data( 'height', height );
     5261                                }
     5262                                return height;
     5263                        };
     5264
     5265                        // Reposition header on throttled `scroll` event.
     5266                        positionStickyHeader = function( header, scrollTop, isScrollingUp ) {
     5267                                var headerElement = header.element,
     5268                                        headerParent = header.parent,
     5269                                        headerHeight = header.height,
     5270                                        headerTop = parseInt( headerElement.css( 'top' ), 10 ),
     5271                                        maybeSticky = headerElement.hasClass( 'maybe-sticky' ),
     5272                                        isSticky = headerElement.hasClass( 'is-sticky' ),
     5273                                        isInView = headerElement.hasClass( 'is-in-view' );
     5274
     5275                                // When scrolling down, gradually hide sticky header.
     5276                                if ( ! isScrollingUp ) {
     5277                                        if ( isSticky ) {
     5278                                                headerTop = scrollTop;
     5279                                                headerElement
     5280                                                        .removeClass( 'is-sticky' )
     5281                                                        .css( {
     5282                                                                top:   headerTop + 'px',
     5283                                                                width: ''
     5284                                                        } );
     5285                                        }
     5286                                        if ( isInView && scrollTop > headerTop + headerHeight ) {
     5287                                                headerElement.removeClass( 'is-in-view' );
     5288                                                headerParent.css( 'padding-top', '' );
     5289                                        }
     5290                                        return;
     5291                                }
     5292
     5293                                // Scrolling up.
     5294                                if ( ! maybeSticky && scrollTop >= headerHeight ) {
     5295                                        maybeSticky = true;
     5296                                        headerElement.addClass( 'maybe-sticky' );
     5297                                } else if ( 0 === scrollTop ) {
     5298                                        // Reset header in base position.
     5299                                        headerElement
     5300                                                .removeClass( 'maybe-sticky is-in-view is-sticky' )
     5301                                                .css( {
     5302                                                        top:   '',
     5303                                                        width: ''
     5304                                                } );
     5305                                        headerParent.css( 'padding-top', '' );
     5306                                        return;
     5307                                }
     5308
     5309                                if ( isInView && ! isSticky ) {
     5310                                        // Header is in the view but is not yet sticky.
     5311                                        if ( headerTop >= scrollTop ) {
     5312                                                // Header is fully visible.
     5313                                                headerElement
     5314                                                        .addClass( 'is-sticky' )
     5315                                                        .css( {
     5316                                                                top:   '',
     5317                                                                width: headerParent.outerWidth() + 'px'
     5318                                                        } );
     5319                                        }
     5320                                } else if ( maybeSticky && ! isInView ) {
     5321                                        // Header is out of the view.
     5322                                        headerElement
     5323                                                .addClass( 'is-in-view' )
     5324                                                .css( 'top', ( scrollTop - headerHeight ) + 'px' );
     5325                                        headerParent.css( 'padding-top', headerHeight + 'px' );
     5326                                }
     5327                        };
     5328                }());
     5329
    51595330                // Previewed device bindings.
    51605331                api.previewedDevice = new api.Value();
    51615332