From 75ac5b03e635efba8bd218683f866d4b0bfdf617 Mon Sep 17 00:00:00 2001
From: Trevor Parscal <trevorparscal@gmail.com>
Date: Wed, 13 Jun 2012 18:26:21 -0700
Subject: [PATCH] Improved appearance of activating and deactivating editor

Also prevented double-initializing

Change-Id: I9e64eb1f331489f6acee469fdab64133d817e7b1
---
 VisualEditor.php                                   |  3 +++
 .../ve2/init/styles/ve.init.ViewPageTarget-hd.css  |  3 +++
 modules/ve2/init/styles/ve.init.ViewPageTarget.css |  8 +++++++-
 modules/ve2/init/targets/ve.init.ViewPageTarget.js | 14 ++++++++++----
 4 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 modules/ve2/init/styles/ve.init.ViewPageTarget-hd.css

diff --git a/VisualEditor.php b/VisualEditor.php
index df4da96205..5ed04d65a7 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -90,6 +90,9 @@ $wgResourceModules += array(
 		),
 		'styles' => array(
 			've2/init/styles/ve.init.ViewPageTarget.css',
+			've2/init/styles/ve.init.ViewPageTarget-hd.css' => array(
+				'media' => 'screen and (min-width: 982px)'
+			),
 		),
 		'dependencies' => array(
 			'ext.visualEditor.init',
diff --git a/modules/ve2/init/styles/ve.init.ViewPageTarget-hd.css b/modules/ve2/init/styles/ve.init.ViewPageTarget-hd.css
new file mode 100644
index 0000000000..8db295fd8e
--- /dev/null
+++ b/modules/ve2/init/styles/ve.init.ViewPageTarget-hd.css
@@ -0,0 +1,3 @@
+.es-toolbar-wrapper {
+	margin: -1.25em -1.5em 1.25em -1.5em;
+}
diff --git a/modules/ve2/init/styles/ve.init.ViewPageTarget.css b/modules/ve2/init/styles/ve.init.ViewPageTarget.css
index 6a5516cc78..aaeae59d41 100644
--- a/modules/ve2/init/styles/ve.init.ViewPageTarget.css
+++ b/modules/ve2/init/styles/ve.init.ViewPageTarget.css
@@ -1,8 +1,13 @@
 .es-toolbar-wrapper {
-	margin: -1.25em -1.5em -1.5em -1.5em;
+	margin: -1em -1em 1em -1em;
+	transition: margin 250ms, height 250ms;
+	-moz-transition: margin 250ms, height 250ms;
+	-webkit-transition: margin 250ms, height 250ms;
+	-o-transition: margin 250ms, height 250ms;
 }
 
 .es-toolbar {
+	display: none;
 	margin-left: 1px;
 }
 
@@ -11,6 +16,7 @@
 	-moz-transition: opacity 200ms ease-out, margin-top 200ms ease-out;
 	-o-transition: opacity 200ms ease-out, margin-top 200ms ease-out;
 	transition: opacity 200ms ease-out, margin-top 200ms ease-out;
+	cursor: default;
 }
 
 .ve-init-viewPageTarget-loadingSpinner {
diff --git a/modules/ve2/init/targets/ve.init.ViewPageTarget.js b/modules/ve2/init/targets/ve.init.ViewPageTarget.js
index a59d29c0af..b0bac850bc 100644
--- a/modules/ve2/init/targets/ve.init.ViewPageTarget.js
+++ b/modules/ve2/init/targets/ve.init.ViewPageTarget.js
@@ -19,6 +19,7 @@ ve.init.ViewPageTarget = function() {
 	this.surface = null;
 	this.active = false;
 	this.edited = false;
+	this.activating = false;
 	this.proxiedOnSurfaceModelTransact = ve.proxy( this.onSurfaceModelTransact, this );
 	this.surfaceOptions = {
 		'toolbars': {
@@ -80,7 +81,8 @@ ve.init.ViewPageTarget.saveDialogTemplate = '\
  */
 ve.init.ViewPageTarget.prototype.onEditTabClick = function( e ) {
 	// Ignore multiple clicks while editor is active
-	if ( !this.active ) {
+	if ( !this.active && !this.activating ) {
+		this.activating = true;
 		// UI updates
 		this.setSelectedTab( 'ca-edit' );
 		this.showSpinner();
@@ -173,6 +175,7 @@ ve.init.ViewPageTarget.prototype.onSaveDialogCloseButtonClick = function( e ) {
  * @method
  */
 ve.init.ViewPageTarget.prototype.onLoad = function( error, dom ) {
+	this.activating = false;
 	if ( error ) {
 		// TODO: Error handling in the UI
 	} else {
@@ -212,10 +215,11 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
 	this.surface.getModel().on( 'transact', this.proxiedOnSurfaceModelTransact );
 	// Transplant the toolbar
 	this.$toolbar = this.$surface.find( '.es-toolbar-wrapper' );
+	this.$toolbar.find( '.es-toolbar' ).slideDown( 'fast' );
 	this.$heading
 		.before( this.$toolbar )
 		.addClass( 've-init-viewPageTarget-pageTitle' )
-		.css( { 'margin-top': this.$toolbar.outerHeight(), 'opacity': 0.5 } );
+		.fadeTo( 'fast', 0.5 );
 	// Update UI
 	this.$view.hide();
 	this.$spinner.remove();
@@ -288,11 +292,13 @@ ve.init.ViewPageTarget.prototype.tearDownSurface = function( content ) {
 	this.setSelectedTab( 'ca-view' );
 	// Update UI
 	this.$surface.empty().detach();
-	this.$toolbar.remove();
+	this.$toolbar.find( '.es-toolbar' ).slideUp( 'fast', function() {
+		$(this).parent().remove();
+	} );
 	this.$spinner.remove();
 	$( '.es-contextView' ).remove();
 	this.$view.show().fadeTo( 'fast', 1 );
-	this.$heading.css( { 'margin-top': 'auto', 'opacity': 1 } );
+	this.$heading.fadeTo( 'fast', 1 );
 	setTimeout( ve.proxy( function() {
 		$(this).removeClass( 've-init-viewPageTarget-pageTitle' );
 	}, this.$heading ), 1000 );