Krinkle has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192047
Change subject: mw.ViewPageTarget: Remove JS animations from transformPage()
......................................................................
mw.ViewPageTarget: Remove JS animations from transformPage()
Follows-up 62c1d64ad0.
* mw-indicators no longer animates opacity. Left-over from 62c1d64ad0.
* #siteNotice no longer slides. A transition would be justified here is
avoid having the other content suddenly jump upwards. However there
is no good CSS method of expanding/collapsing content without leaving
the border box behind. We can look into bringing this back in a
performant manner at later time.
* The toolbar now uses a CSS translate transition. This has the
added bonus of also working when the page is scrolled down.
When loading the editor from a section-edit link or when simply
scrolling down during the activation, the toolbar will slide down
from under the browser chrome.
Bug: T89543
Change-Id: I30a7b69b77b874d220f60ebe7f7e616cd77bcc36
---
M modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
M modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
2 files changed, 35 insertions(+), 36 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/47/192047/1
diff --git a/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
b/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
index 73d0f37..764eaff 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
@@ -16,6 +16,8 @@
.ve-activated #contentSub,
.ve-activated #toc,
+.ve-activated #siteNotice,
+.ve-activated .mw-indicators,
/* Most of bodyContent can be hidden as VE has an equivalent of most children
in ve-init-target (sibling of #bodyContent). However, we can't hide it
completely as #siteSub should remain visible (for persistence with read
mode),
@@ -40,6 +42,21 @@
/* Toolbar */
+.ve-activated #content,
+.ve-deactivating #content {
+ overflow: hidden;
+}
+.ve-available .oo-ui-toolbar-bar {
+ transition: transform 0.4s ease;
+ transform: translateY(-100%);
+}
+.ve-active .oo-ui-toolbar-bar {
+ transform: translateY(0);
+}
+.ve-deactivating .oo-ui-toolbar-bar {
+ transform: translateY(-100%);
+}
+
.ve-init-mw-viewPageTarget-toolbar-utilities,
.ve-init-mw-viewPageTarget-toolbar-actions {
display: inline-block;
diff --git a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
index 0614b97..b64755f 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
@@ -180,33 +180,25 @@
// Parent method
ve.init.mw.Target.prototype.setupToolbar.call( this, surface );
- // Keep it hidden so that we can slide it down smoothly (avoids sudden
- // offset flash when original content is hidden, and replaced in-place
with a
- // similar-looking surface).
- // FIXME: This is not ideal, the parent class creates it and appends
- // to target (visibly), only for us to hide it again 0ms later.
- // Though we can't hide it by default because it needs visible
dimensions
- // to compute stuff during setup.
- this.getToolbar().$bar.hide();
-
this.getToolbar().$element
.addClass( 've-init-mw-viewPageTarget-toolbar' );
+ this.getToolbar().$bar.on( 'transitionend', function () {
+ console.log( this, 'transed' );
+ } );
// Move the toolbar to top of target, before heading etc.
this.$element.prepend( this.getToolbar().$element );
ve.track( 'trace.setupToolbar.exit' );
- this.getToolbar().$bar.slideDown( 'fast', function () {
- // Check the surface wasn't torn down while the toolbar was
animating
- if ( target.getSurface() ) {
- ve.track( 'trace.initializeToolbar.enter' );
- target.getToolbar().initialize();
- target.getSurface().getView().emit( 'position' );
- target.getSurface().getContext().updateDimensions();
- ve.track( 'trace.initializeToolbar.exit' );
- }
- } );
+ // Check the surface wasn't torn down while the toolbar was animating
+ if ( target.getSurface() ) {
+ ve.track( 'trace.initializeToolbar.enter' );
+ target.getToolbar().initialize();
+ target.getSurface().getView().emit( 'position' );
+ target.getSurface().getContext().updateDimensions();
+ ve.track( 'trace.initializeToolbar.exit' );
+ }
};
/**
@@ -1278,7 +1270,13 @@
*/
ve.init.mw.ViewPageTarget.prototype.tearDownToolbar = function () {
var target = this;
- return this.toolbar.$bar.slideUp( 'fast' ).promise().then( function () {
+
+ return $.Deferred( function ( deferred ) {
+ // ve-activated has been removed and the toolbar is
transitioning out. Allow that to
+ // finish before removing the toolbar. As transitionend is
unreliable, use a timeout.
+ this.toolbar.$bar.on( 'transitionend', deferred.resolve );
+ setTimeout( deferred.resolve, 500 );
+ } ).then( function () {
target.toolbar.destroy();
target.toolbar = null;
} );
@@ -1330,15 +1328,6 @@
mw.hook( 've.activate' ).fire();
- // Hide site notice (if present)
- $( '#siteNotice:visible' )
- .addClass( 've-hide' )
- .slideUp( 'fast' );
- // Hide page status indicators (if present)
- $( '.mw-indicators' )
- .addClass( 've-hide' )
- .fadeOut( 'fast' );
-
// Push veaction=edit url in history (if not already. If we got here by
a veaction=edit
// permalink then it will be there already and the constructor called
#activate)
if ( !this.actFromPopState && history.pushState &&
this.currentUri.query.veaction !== 'edit' ) {
@@ -1364,13 +1353,6 @@
$( '#ca-view' ).addClass( 'selected' );
mw.hook( 've.deactivate' ).fire();
-
- // Make site notice visible again (if present)
- $( '#siteNotice.ve-hide' )
- .slideDown( 'fast' );
- // Make page status indicators visible again (if present)
- $( '.mw-indicators.ve-hide' )
- .fadeIn( 'fast' );
// Push non-veaction=edit url in history
if ( !this.actFromPopState && history.pushState ) {
--
To view, visit https://gerrit.wikimedia.org/r/192047
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I30a7b69b77b874d220f60ebe7f7e616cd77bcc36
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
