From 7b9229f5b823186b7d84999b6026807d3e41e4ed Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Tue, 25 Oct 2016 15:32:40 -0700
Subject: [PATCH] Fix toolbar transition

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

Change-Id: I01a85e3455462cf70b6c3f25a236ab6cb82c706c
---
 .../styles/ve.init.mw.DesktopArticleTarget.css   | 16 +++++++++++-----
 .../targets/ve.init.mw.DesktopArticleTarget.js   | 14 ++++++++++----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.css b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.css
index a5566f9622..fb221868ba 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.css
@@ -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.
diff --git a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
index 39304d5771..1814222c2e 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
@@ -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;