Fixed some minor-ish UI stuff

Change-Id: Ibc3fa2fb7ce9193703263ab708ce18f6aefe5b09

modules/ve2/init/styles/ve.init.ViewPageTarget.css

@@ -6,6 +6,13 @@
 	margin-left: 1px;
 }
 
+.ve-init-viewPageTarget-pageTitle {
+	-webkit-transition: opacity 200ms ease-out, margin-top 200ms ease-out;
+	-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;
+}
+
 .ve-init-viewPageTarget-loadingSpinner {
 	background-image: url(images/loading.gif);
 	width: 128px;
@@ -28,15 +35,18 @@
 	margin-right: 0.25em;
 	border: solid 1px transparent;
 }
+
 .ve-init-viewPageTarget-button:before {
 	content: " ";
 	position: absolute;
 	display: block;
 	height: 22px;
 }
+
 .ve-init-viewPageTarget-button:hover {
 	border-color: #eeeeee;
 }
+
 .ve-init-viewPageTarget-button:active,
 .ve-init-viewPageTarget-button-down {
 	border-color: #dddddd;
@@ -47,20 +57,29 @@
 
 /* inspector styles */
 .ve-init-viewPageTarget-saveButton {
-	padding-right: 32px;
-	border:1px solid transparent;
+	border: 1px solid transparent;
 	border-radius: 0.125em;
 	-webkit-border-radius: 0.125em;
 	-moz-border-radius: 0.125em;
 	-o-border-radius: 0.125em;
-	/* need new button */
+}
+
+.ve-init-viewPageTarget-saveButton-icon {
+	display: inline-block;
+	vertical-align: middle;
+	width: 32px;
+	height: 32px;
 	/* @embed */
 	background-image: url(../../ui/styles/images/accept.png);
-	background-position: right center;
+	background-position: right top;
 	background-repeat: no-repeat;
 }
 
-.ve-init-viewPageTarget-saveButton span {
+.ve-init-viewPageTarget-saveButton-label {
+	display: inline-block;
+	vertical-align: middle;
+	height: 32px;
+	padding-left: 4px;
 	font-size: 0.8em;
 }
 
@@ -99,6 +118,7 @@
 		color-stop(1, rgb(240,251,225))
 	);
 }
+
 .ve-init-viewPageTarget-saveDialog-saveButton-icon {
 	display: inline-block;
 	vertical-align: middle;
@@ -106,7 +126,7 @@
 	width: 28px;
 	background: transparent;
 	background-image: url(../../ui/styles/images/accept-clear.png);
-	background-position: top right;
+	background-position: right top;
 	background-repeat: no-repeat;
 }
 
@@ -115,7 +135,7 @@
 .ve-init-viewPageTarget-saveDialog {
 	display: block;
 	top: -1px;
-	right: 0.25em;
+	right: 0.5em;
 	width: 29em;
 }
 

modules/ve2/init/targets/ve.init.ViewPageTarget.js

@@ -90,6 +90,21 @@ ve.init.ViewPageTarget.prototype.onEditTabClick = function( e ) {
 	return false;
 };
 
+/**
+ * ...
+ *
+ * @method
+ */
+ve.init.ViewPageTarget.prototype.onViewTabClick = function( e ) {
+	// Don't do anything special unless we are in editing mode
+	if ( this.active ) {
+		this.tearDownSurface();
+		// Prevent the edit tab's normal behavior
+		e.preventDefault();
+		return false;
+	}
+};
+
 /**
  * ...
  *
@@ -151,12 +166,14 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
 	this.$surface.appendTo( this.$content );
 	this.surface = new ve.Surface( this.$surface, dom, this.surfaceOptions );
 	// Transplant the toolbar
-	this.$toolbar = this.$surface.find( '.es-toolbar-wrapper' ).insertBefore( this.$heading );
-	this.$heading.animate( { 'margin-top': this.$toolbar.outerHeight() }, 'fast' );
+	this.$toolbar = this.$surface.find( '.es-toolbar-wrapper' );
+	this.$heading
+		.before( this.$toolbar )
+		.addClass( 've-init-viewPageTarget-pageTitle' )
+		.css( { 'margin-top': this.$toolbar.outerHeight(), 'opacity': 0.5 } );
 	// Update UI
-	this.$spinner.remove();
 	this.$view.hide();
-	this.$spinner.hide();
+	this.$spinner.remove();
 	this.$dialog = $( ve.init.ViewPageTarget.saveDialogTemplate );
 	// Add save and close buttons
 	this.$toolbar
@@ -165,9 +182,10 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
 				$( '<div></div>' )
 					.addClass( 've-init-viewPageTarget-button ve-init-viewPageTarget-saveButton' )
 					.append(
-						$( '<span></span>' )
+						$( '<span class="ve-init-viewPageTarget-saveButton-label"></span>' )
 							.text( mw.msg( 'savearticle' ) )
 					)
+					.append( $( '<span class="ve-init-viewPageTarget-saveButton-icon"></span>' ) )
 					.click( ve.proxy( function() { $(this).fadeIn( 'fast' ); }, this.$dialog ) )
 			);
 	// Set up save dialog
@@ -209,19 +227,24 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
 			)
 			.end()
 		.insertAfter( this.$toolbar.find( '.ve-init-viewPageTarget-saveButton' ) );
+	this.active = true;
 };
 
 ve.init.ViewPageTarget.prototype.tearDownSurface = function( content ) {
 	// Reset tabs
 	this.setSelectedTab( 'ca-view' );
 	// Update UI
-	this.$view.show().fadeTo( 'fast', 1 );
-	this.$surface.remove();
+	this.$surface.empty().detach();
 	this.$toolbar.remove();
 	this.$spinner.remove();
-	this.$heading.animate( { 'margin-top': 0, 'opacity': 1 }, 'fast' );
+	this.$view.show().fadeTo( 'fast', 1 );
+	this.$heading.css( { 'margin-top': 'auto', 'opacity': 1 } );
+	setTimeout( ve.proxy( function() {
+		$(this).removeClass( 've-init-viewPageTarget-pageTitle' );
+	}, this.$heading ), 1000 );
 	// Destroy editor
 	this.surface = null;
+	this.active = false;
 };
 
 ve.init.ViewPageTarget.prototype.setupTabs = function(){
@@ -260,6 +283,7 @@ ve.init.ViewPageTarget.prototype.setupTabs = function(){
 		);
 	}
 	$( '#ca-edit > span > a' ).click( ve.proxy( this.onEditTabClick, this ) );
+	$( '#ca-view > span > a' ).click( ve.proxy( this.onViewTabClick, this ) );
 };
 
 /**
@@ -271,7 +295,6 @@ ve.init.ViewPageTarget.prototype.showSpinner = function() {
 	this.$spinner = $( '<div></div>' )
 		.addClass( 've-init-viewPageTarget-loadingSpinner' )
 		.prependTo( this.$heading );
-	this.$heading.fadeTo( 'fast', 0.5 );
 };
 
 /**

modules/ve2/init/ve.init.Target.js

@@ -43,8 +43,7 @@ ve.init.Target.prototype.load = function( callback ) {
 		return false;
 	}
 	// Start loading the module immediately
-	var modules = this.modules;
-	mw.loader.load( modules );
+	mw.loader.load( this.modules );
 	// Load DOM
 	this.isDomLoading = true;
 	$.ajax( {
@@ -61,7 +60,7 @@ ve.init.Target.prototype.load = function( callback ) {
 		// Wait up to 9 seconds
 		'timeout': 9000,
 		'error': callback,
-		'success': function( data ) {
+		'success': ve.proxy( function( data ) {
 			this.isDomLoading = false;
 			var response = data['ve-parsoid'];
 			if ( !response ) {
@@ -70,11 +69,11 @@ ve.init.Target.prototype.load = function( callback ) {
 				callback( 'Invalid HTML content in response from server' );
 			} else {
 				// Everything worked, the page was loaded, continue as soon as the module is ready
-				mw.loader.using( modules, function() {
+				mw.loader.using( this.modules, function() {
 					callback( null, $( '<div></div>' ).html( data['ve-parsoid'].parsed )[0] );
 				} );
 			}
-		}
+		}, this )
 	} );
 	return true;
 };
@@ -125,7 +124,7 @@ ve.init.Target.prototype.save = function( dom, options, callback ) {
 		'dataType': 'json',
 		'type': 'POST',
 		'error': callback,
-		'success': function( data ) {
+		'success': ve.proxy( function() {
 			this.isDomSaving = false;
 			var response = data['ve-parsoid'];
 			if ( !response ) {
@@ -138,7 +137,7 @@ ve.init.Target.prototype.save = function( dom, options, callback ) {
 				// Everything worked, the page was saved, continue immediately
 				callback( null, response.content );
 			}
-		}
+		}, this )
 	} );
 	return true;
 };