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 );