wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-24 22:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix toolbar transition

Browse source 
The contents of the bar to should appear to move in to place, not
just be revealed.

Change-Id: I01a85e3455462cf70b6c3f25a236ab6cb82c706c
This commit is contained in:
Ed Sanders 2016-10-25 15:32:40 -07:00
parent 05ba32807f
commit 7b9229f5b8
2 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.css
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.

14
modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
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;