From 4cc88b9850021c3cbebf4281c736192eb406c7d0 Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Mon, 11 Jun 2012 18:21:31 -0700 Subject: [PATCH] Fixed some minor-ish UI stuff Change-Id: Ibc3fa2fb7ce9193703263ab708ce18f6aefe5b09 --- .../init/styles/ve.init.ViewPageTarget.css | 34 +++++++++++---- .../init/targets/ve.init.ViewPageTarget.js | 41 +++++++++++++++---- modules/ve2/init/ve.init.Target.js | 13 +++--- 3 files changed, 65 insertions(+), 23 deletions(-) diff --git a/modules/ve2/init/styles/ve.init.ViewPageTarget.css b/modules/ve2/init/styles/ve.init.ViewPageTarget.css index 1c942e99b6..f4245a872c 100644 --- a/modules/ve2/init/styles/ve.init.ViewPageTarget.css +++ b/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; } diff --git a/modules/ve2/init/targets/ve.init.ViewPageTarget.js b/modules/ve2/init/targets/ve.init.ViewPageTarget.js index d304e34799..ff089bec23 100644 --- a/modules/ve2/init/targets/ve.init.ViewPageTarget.js +++ b/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 ) { $( '
' ) .addClass( 've-init-viewPageTarget-button ve-init-viewPageTarget-saveButton' ) .append( - $( '' ) + $( '' ) .text( mw.msg( 'savearticle' ) ) ) + .append( $( '' ) ) .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 = $( '
' ) .addClass( 've-init-viewPageTarget-loadingSpinner' ) .prependTo( this.$heading ); - this.$heading.fadeTo( 'fast', 0.5 ); }; /** diff --git a/modules/ve2/init/ve.init.Target.js b/modules/ve2/init/ve.init.Target.js index 749822d272..d666419278 100644 --- a/modules/ve2/init/ve.init.Target.js +++ b/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, $( '
' ).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; };