Customize: Fix layout issues in panels and sections when resizing and autofocusing.
Also reverts [33157] which is no longer needed. Props valendesigns, mattwiebe, westonruter, ocean90. Fixes #33220. Built from https://develop.svn.wordpress.org/trunk@33610 git-svn-id: http://core.svn.wordpress.org/trunk@33577 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
3bfd096440
commit
7fcc3e50e1
|
@ -443,11 +443,6 @@
|
||||||
.reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
|
.reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
|
||||||
.reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
|
.reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
|
||||||
|
|
||||||
/* Forces top margin to be zero for new menu */
|
|
||||||
.control-section-nav_menu.open .menu {
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-section-nav_menu .menu .menu-item-edit-active {
|
.control-section-nav_menu .menu .menu-item-edit-active {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -443,11 +443,6 @@
|
||||||
.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
|
.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
|
||||||
.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
|
.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
|
||||||
|
|
||||||
/* Forces top margin to be zero for new menu */
|
|
||||||
.control-section-nav_menu.open .menu {
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-section-nav_menu .menu .menu-item-edit-active {
|
.control-section-nav_menu .menu .menu-item-edit-active {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -68,8 +68,8 @@
|
||||||
params = params || {};
|
params = params || {};
|
||||||
focus = function () {
|
focus = function () {
|
||||||
var focusContainer;
|
var focusContainer;
|
||||||
if ( construct.extended( api.Panel ) && construct.expanded() ) {
|
if ( construct.expanded && construct.expanded() ) {
|
||||||
focusContainer = construct.container.find( '.control-panel-content:first' );
|
focusContainer = construct.container.find( 'ul:first' );
|
||||||
} else {
|
} else {
|
||||||
focusContainer = construct.container;
|
focusContainer = construct.container;
|
||||||
}
|
}
|
||||||
|
@ -581,13 +581,14 @@
|
||||||
* @param {Object} args
|
* @param {Object} args
|
||||||
*/
|
*/
|
||||||
onChangeExpanded: function ( expanded, args ) {
|
onChangeExpanded: function ( expanded, args ) {
|
||||||
var position, scroll, section = this,
|
var section = this,
|
||||||
container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
|
container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
|
||||||
content = section.container.find( '.accordion-section-content' ),
|
content = section.container.find( '.accordion-section-content' ),
|
||||||
overlay = section.container.closest( '.wp-full-overlay' ),
|
overlay = section.container.closest( '.wp-full-overlay' ),
|
||||||
backBtn = section.container.find( '.customize-section-back' ),
|
backBtn = section.container.find( '.customize-section-back' ),
|
||||||
sectionTitle = section.container.find( '.accordion-section-title' ).first(),
|
sectionTitle = section.container.find( '.accordion-section-title' ).first(),
|
||||||
expand;
|
headerActionsHeight = $( '#customize-header-actions' ).height(),
|
||||||
|
resizeContentHeight, expand, position, scroll;
|
||||||
|
|
||||||
if ( expanded && ! section.container.hasClass( 'open' ) ) {
|
if ( expanded && ! section.container.hasClass( 'open' ) ) {
|
||||||
|
|
||||||
|
@ -595,7 +596,7 @@
|
||||||
expand = args.completeCallback;
|
expand = args.completeCallback;
|
||||||
} else {
|
} else {
|
||||||
container.scrollTop( 0 );
|
container.scrollTop( 0 );
|
||||||
expand = function () {
|
resizeContentHeight = function() {
|
||||||
var matchMedia, offset;
|
var matchMedia, offset;
|
||||||
matchMedia = window.matchMedia || window.msMatchMedia;
|
matchMedia = window.matchMedia || window.msMatchMedia;
|
||||||
offset = 90; // 45px for customize header actions + 45px for footer actions.
|
offset = 90; // 45px for customize header actions + 45px for footer actions.
|
||||||
|
@ -604,19 +605,32 @@
|
||||||
if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
|
if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
|
||||||
offset = 45;
|
offset = 45;
|
||||||
}
|
}
|
||||||
|
content.css( 'height', ( window.innerHeight - offset ) );
|
||||||
|
};
|
||||||
|
expand = function() {
|
||||||
section.container.addClass( 'open' );
|
section.container.addClass( 'open' );
|
||||||
overlay.addClass( 'section-open' );
|
overlay.addClass( 'section-open' );
|
||||||
position = content.offset().top;
|
position = content.offset().top;
|
||||||
scroll = container.scrollTop();
|
scroll = container.scrollTop();
|
||||||
content.css( 'margin-top', ( 45 - position - scroll ) );
|
content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
|
||||||
content.css( 'height', ( window.innerHeight - offset ) );
|
resizeContentHeight();
|
||||||
sectionTitle.attr( 'tabindex', '-1' );
|
sectionTitle.attr( 'tabindex', '-1' );
|
||||||
backBtn.attr( 'tabindex', '0' );
|
backBtn.attr( 'tabindex', '0' );
|
||||||
backBtn.focus();
|
backBtn.focus();
|
||||||
if ( args.completeCallback ) {
|
if ( args.completeCallback ) {
|
||||||
args.completeCallback();
|
args.completeCallback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fix the height after browser resize.
|
||||||
|
$( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
|
||||||
|
|
||||||
|
// Fix the top margin after reflow.
|
||||||
|
api.bind( 'pane-contents-reflowed', _.debounce( function() {
|
||||||
|
var offset = ( content.offset().top - headerActionsHeight );
|
||||||
|
if ( 0 < offset ) {
|
||||||
|
content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
|
||||||
|
}
|
||||||
|
}, 100 ) );
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -640,7 +654,7 @@
|
||||||
} else if ( ! expanded && section.container.hasClass( 'open' ) ) {
|
} else if ( ! expanded && section.container.hasClass( 'open' ) ) {
|
||||||
section.container.removeClass( 'open' );
|
section.container.removeClass( 'open' );
|
||||||
overlay.removeClass( 'section-open' );
|
overlay.removeClass( 'section-open' );
|
||||||
content.css( 'margin-top', 'inherit' );
|
content.css( 'margin-top', '' );
|
||||||
container.scrollTop( 0 );
|
container.scrollTop( 0 );
|
||||||
backBtn.attr( 'tabindex', '-1' );
|
backBtn.attr( 'tabindex', '-1' );
|
||||||
sectionTitle.attr( 'tabindex', '0' );
|
sectionTitle.attr( 'tabindex', '0' );
|
||||||
|
@ -648,6 +662,7 @@
|
||||||
if ( args.completeCallback ) {
|
if ( args.completeCallback ) {
|
||||||
args.completeCallback();
|
args.completeCallback();
|
||||||
}
|
}
|
||||||
|
$( window ).off( 'resize.customizer-section' );
|
||||||
} else {
|
} else {
|
||||||
if ( args.completeCallback ) {
|
if ( args.completeCallback ) {
|
||||||
args.completeCallback();
|
args.completeCallback();
|
||||||
|
@ -1235,7 +1250,8 @@
|
||||||
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
|
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
|
||||||
backBtn = section.find( '.customize-panel-back' ),
|
backBtn = section.find( '.customize-panel-back' ),
|
||||||
panelTitle = section.find( '.accordion-section-title' ).first(),
|
panelTitle = section.find( '.accordion-section-title' ).first(),
|
||||||
content = section.find( '.control-panel-content' );
|
content = section.find( '.control-panel-content' ),
|
||||||
|
headerActionsHeight = $( '#customize-header-actions' ).height();
|
||||||
|
|
||||||
if ( expanded ) {
|
if ( expanded ) {
|
||||||
|
|
||||||
|
@ -1255,7 +1271,7 @@
|
||||||
content.parent().show();
|
content.parent().show();
|
||||||
position = content.offset().top;
|
position = content.offset().top;
|
||||||
scroll = container.scrollTop();
|
scroll = container.scrollTop();
|
||||||
content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
|
content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
|
||||||
section.addClass( 'current-panel' );
|
section.addClass( 'current-panel' );
|
||||||
overlay.addClass( 'in-sub-panel' );
|
overlay.addClass( 'in-sub-panel' );
|
||||||
container.scrollTop( 0 );
|
container.scrollTop( 0 );
|
||||||
|
@ -1266,6 +1282,11 @@
|
||||||
topPanel.attr( 'tabindex', '-1' );
|
topPanel.attr( 'tabindex', '-1' );
|
||||||
backBtn.attr( 'tabindex', '0' );
|
backBtn.attr( 'tabindex', '0' );
|
||||||
backBtn.focus();
|
backBtn.focus();
|
||||||
|
|
||||||
|
// Fix the top margin after reflow.
|
||||||
|
api.bind( 'pane-contents-reflowed', _.debounce( function() {
|
||||||
|
content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
|
||||||
|
}, 100 ) );
|
||||||
} else {
|
} else {
|
||||||
siblings.removeClass( 'open' );
|
siblings.removeClass( 'open' );
|
||||||
section.removeClass( 'current-panel' );
|
section.removeClass( 'current-panel' );
|
||||||
|
@ -2603,7 +2624,11 @@
|
||||||
_( constructs ).each( function ( activeConstructs, type ) {
|
_( constructs ).each( function ( activeConstructs, type ) {
|
||||||
api[ type ].each( function ( construct, id ) {
|
api[ type ].each( function ( construct, id ) {
|
||||||
var active = !! ( activeConstructs && activeConstructs[ id ] );
|
var active = !! ( activeConstructs && activeConstructs[ id ] );
|
||||||
construct.active( active );
|
if ( active ) {
|
||||||
|
construct.activate();
|
||||||
|
} else {
|
||||||
|
construct.deactivate();
|
||||||
|
}
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '4.3-RC2-33609';
|
$wp_version = '4.3-RC2-33610';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
Loading…
Reference in New Issue