Merge "Fix toolbar transition"

This commit is contained in:
jenkins-bot 2016-10-26 00:03:21 +00:00 committed by Gerrit Code Review
commit 4eea791584
2 changed files with 21 additions and 9 deletions

View file

@ -7,22 +7,28 @@
/* Toolbar */
.ve-activating .ve-init-mw-desktopArticleTarget-toolbar,
.ve-deactivating .ve-init-mw-desktopArticleTarget-toolbar {
.ve-init-mw-desktopArticleTarget-toolbar {
overflow: hidden;
transition: height 0.4s ease; /* stylelint-disable-line no-unsupported-browser-features */
}
.ve-ui-toolbar-floating .oo-ui-toolbar-bar {
.ve-init-mw-desktopArticleTarget-toolbar > .oo-ui-toolbar-bar {
transform: translateY( -100% );
transition: transform 0.4s ease; /* stylelint-disable-line no-unsupported-browser-features */
z-index: 4;
}
.ve-active .ve-ui-toolbar-floating .oo-ui-toolbar-bar {
.ve-init-mw-desktopArticleTarget-toolbar-opened {
overflow: visible;
}
.ve-init-mw-desktopArticleTarget-toolbar-open > .oo-ui-toolbar-bar {
transform: translateY( 0 );
}
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
z-index: 4;
}
/*!
* ve-redirect-header is added just outside of the surface, which has its own
* hiding style during activation.

View file

@ -248,11 +248,14 @@ ve.init.mw.DesktopArticleTarget.prototype.setupToolbar = function ( surface ) {
ve.track( 'trace.setupToolbar.exit' );
if ( !wasSetup ) {
setTimeout( function () {
var height = toolbar.$bar.outerHeight();
toolbar.$element.css( 'height', height );
toolbar.$element
.css( 'height', toolbar.$bar.outerHeight() )
.addClass( 've-init-mw-desktopArticleTarget-toolbar-open' );
setTimeout( function () {
// Clear to allow growth during use and when resizing window
toolbar.$element.css( 'height', '' );
toolbar.$element
.css( 'height', '' )
.addClass( 've-init-mw-desktopArticleTarget-toolbar-opened' );
target.toolbarSetupDeferred.resolve();
}, 400 );
} );
@ -1153,7 +1156,10 @@ ve.init.mw.DesktopArticleTarget.prototype.teardownToolbar = function () {
deferred = $.Deferred();
this.toolbar.$element.css( 'height', this.toolbar.$bar.outerHeight() );
setTimeout( function () {
target.toolbar.$element.css( 'height', '0' );
target.toolbar.$element
.css( 'height', '0' )
.removeClass( 've-init-mw-desktopArticleTarget-toolbar-open' )
.removeClass( 've-init-mw-desktopArticleTarget-toolbar-opened' );
setTimeout( function () {
target.toolbar.destroy();
target.toolbar = null;