JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/96209
Change subject: Story 1346: Edit overlay UI overhaul
......................................................................
Story 1346: Edit overlay UI overhaul
Also, change @grayLight color to #cacaca, per Kaity's previous instructions.
Change-Id: I677aa4b79ee247c1accda67b697f1fbd9e278583
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/modules/editor/editor.js
A javascripts/modules/editorNew/AbuseFilterOverlay.js
A javascripts/modules/editorNew/EditorOverlay.js
M less/common/OverlayNew.less
M less/common/buttons.less
M less/common/common-js.less
A less/common/images/back.png
A less/common/images/continue.png
M less/common/ui.less
M less/modules/editor.less
A less/modules/editorNew.less
M less/variables.less
M templates/modules/editor/AbuseFilterOverlay.html
A templates/modules/editorNew/EditorOverlay.html
16 files changed, 565 insertions(+), 47 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/09/96209/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index c7bd670..6015990 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -290,7 +290,7 @@
'mobile-frontend-editor-save' => 'Save',
'mobile-frontend-editor-cancel' => 'Cancel',
'mobile-frontend-editor-keep-editing' => 'Keep editing',
- 'mobile-frontend-editor-license' => 'By clicking "Save", you agree to
our [//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to
release your text under the [//creativecommons.org/licenses/by-sa/3.0/ CC BY-SA
3.0 License] and
[//en.wikipedia.org/wiki/Wikipedia:Text_of_the_GNU_Free_Documentation_License
GFDL].',
+ 'mobile-frontend-editor-license' => 'By saving changes, you agree to
our [//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to
release your text under the [//creativecommons.org/licenses/by-sa/3.0/ CC BY-SA
3.0 License] and
[//en.wikipedia.org/wiki/Wikipedia:Text_of_the_GNU_Free_Documentation_License
GFDL].',
'mobile-frontend-editor-placeholder' => 'This section is empty. Be the
first to expand it!',
'mobile-frontend-editor-summary-placeholder' => 'Tell us what you
changed (optional)',
'mobile-frontend-editor-cancel-confirm' => 'Do you really want to
abandon your edit?',
@@ -309,6 +309,8 @@
'mobile-frontend-editor-abusefilter-warning' => 'Warning: Are you sure
you want to save this edit? There may be an issue with it.',
'mobile-frontend-editor-abusefilter-disallow' => 'This edit cannot be
saved because we have detected an issue.',
'mobile-frontend-editor-abusefilter-read-more' => 'Read more',
+ 'mobile-frontend-editor-editing' => "'''Editing''' $1",
+ 'mobile-frontend-editor-previewing' => "'''Previewing''' $1",
// Change tags
'tag-mobile_edit' => 'Mobile edit',
@@ -899,6 +901,14 @@
'mobile-frontend-editor-abusefilter-disallow' => 'A message telling
their user that their edit has been disallowed by AbuseFilter.',
'mobile-frontend-editor-abusefilter-read-more' => 'A caption for the
button allowing the user to read more about the problems with their edit.
{{Identical|Read more}}',
+ 'mobile-frontend-editor-editing' => 'A heading saying what page is
being edited.
+
+Parameters:
+* $1 - page title',
+ 'mobile-frontend-editor-previewing' => 'A heading saying what page is
being previewed after editing.
+
+Parameters:
+* $1 - page title',
'tag-mobile_edit' => 'Short change tag name that appears e.g. in
[[Special:RecentChanges]].
See also:
diff --git a/includes/Resources.php b/includes/Resources.php
index 7df31e5..bf6a76f 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -175,7 +175,7 @@
'position' => 'bottom',
),
- 'mobile.editor' => $wgMFMobileResourceBoilerplate + array(
+ 'mobile.editor.common' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mobile.stable',
'mobile.templates',
@@ -183,11 +183,8 @@
),
'scripts' => array(
'javascripts/modules/editor/EditorApi.js',
- 'javascripts/modules/editor/AbuseFilterOverlay.js',
- 'javascripts/modules/editor/EditorOverlay.js',
),
'templates' => array(
- 'modules/editor/EditorOverlay',
'modules/editor/AbuseFilterOverlay',
),
'messages' => array(
@@ -200,14 +197,12 @@
'mobile-frontend-editor-summary-placeholder',
'mobile-frontend-editor-cancel-confirm',
'mobile-frontend-editor-wait',
- 'mobile-frontend-editor-guider',
'mobile-frontend-editor-success',
'mobile-frontend-editor-success-landmark-1' => array(
'parse' ),
'mobile-frontend-editor-refresh',
'mobile-frontend-editor-error',
'mobile-frontend-editor-error-conflict',
'mobile-frontend-editor-error-loading',
- 'mobile-frontend-editor-preview-header',
'mobile-frontend-editor-error-preview',
'mobile-frontend-account-create-captcha-placeholder',
'mobile-frontend-editor-captcha-try-again',
@@ -215,6 +210,48 @@
'mobile-frontend-editor-abusefilter-warning',
'mobile-frontend-editor-abusefilter-disallow',
'mobile-frontend-editor-abusefilter-read-more',
+ ),
+ ),
+
+ // FIXME: clean up when new overlays in stable (use single mobile.edit
as before)
+ 'mobile.editor.stable' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.editor.common',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/editor/AbuseFilterOverlay.js',
+ 'javascripts/modules/editor/EditorOverlay.js',
+ ),
+ 'styles' => array(
+ 'less/modules/editor.less',
+ ),
+ 'templates' => array(
+ 'modules/editor/EditorOverlay',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-editor-guider',
+ 'mobile-frontend-editor-preview-header',
+ ),
+ ),
+
+ // FIXME: clean up when new overlays in stable (use single mobile.edit
as before)
+ 'mobile.editor.beta' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.editor.common',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/editorNew/AbuseFilterOverlay.js',
+ 'javascripts/modules/editorNew/EditorOverlay.js',
+ ),
+ 'styles' => array(
+ 'less/modules/editorNew.less',
+ ),
+ 'templates' => array(
+ 'modules/editorNew/EditorOverlay',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-editor-editing' => array( 'parse' ),
+ 'mobile-frontend-editor-previewing' => array( 'parse' ),
),
),
@@ -566,7 +603,6 @@
'less/modules/issues.less',
'less/modules/watchstar.less',
'less/modules/tutorials.less',
- 'less/modules/editor.less',
),
'position' => 'top',
),
diff --git a/javascripts/modules/editor/editor.js
b/javascripts/modules/editor/editor.js
index 620b644..31a92e3 100644
--- a/javascripts/modules/editor/editor.js
+++ b/javascripts/modules/editor/editor.js
@@ -1,6 +1,9 @@
( function( M, $ ) {
- var LoadingOverlay = M.require( 'LoadingOverlay' ),
+ var
+ inStable = mw.config.get( 'wgMFMode' ) === 'stable',
+ // FIXME: use LoadingOverlayNew when new overlays in stable
+ LoadingOverlay = M.require( 'LoadingOverlay' ),
popup = M.require( 'notifications' ),
// FIXME: Disable on IE < 10 for time being
blacklisted = /MSIE \d\./.test( navigator.userAgent ),
@@ -45,8 +48,9 @@
var loadingOverlay = new LoadingOverlay();
loadingOverlay.show();
- mw.loader.using( 'mobile.editor', function() {
- var EditorOverlay = M.require(
'modules/editor/EditorOverlay' ),
+ // FIXME: clean up when new overlays in stable
+ mw.loader.using( inStable ? 'mobile.editor.stable' :
'mobile.editor.beta', function() {
+ var EditorOverlay = M.require( inStable ?
'modules/editor/EditorOverlay' : 'modules/editorNew/EditorOverlay' ),
title = page ? page.title :
mw.config.get( 'wgTitle' ),
// Note in current implementation Page
title is prefixed with namespace
ns = page ? '' : mw.config.get(
'wgCanonicalNamespace' );
diff --git a/javascripts/modules/editorNew/AbuseFilterOverlay.js
b/javascripts/modules/editorNew/AbuseFilterOverlay.js
new file mode 100644
index 0000000..e993295
--- /dev/null
+++ b/javascripts/modules/editorNew/AbuseFilterOverlay.js
@@ -0,0 +1,22 @@
+( function( M ) {
+ var OverlayNew = M.require( 'OverlayNew' ), AbuseFilterOverlay;
+ AbuseFilterOverlay = OverlayNew.extend( {
+ defaults: {
+ confirmMessage: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
+ },
+ templatePartials: {
+ content: M.template.get(
'modules/editor/AbuseFilterOverlay' )
+ },
+ className: 'overlay abusefilter-overlay',
+
+ postRender: function() {
+ this._super();
+ // make links open in separate tabs
+ this.$( 'a' ).attr( 'target', '_blank' );
+ }
+ } );
+
+ M.define( 'modules/editorNew/AbuseFilterOverlay', AbuseFilterOverlay );
+
+}( mw.mobileFrontend ) );
+
diff --git a/javascripts/modules/editorNew/EditorOverlay.js
b/javascripts/modules/editorNew/EditorOverlay.js
new file mode 100644
index 0000000..cbaa0a8
--- /dev/null
+++ b/javascripts/modules/editorNew/EditorOverlay.js
@@ -0,0 +1,316 @@
+( function( M, $ ) {
+
+ var OverlayNew = M.require( 'OverlayNew' ),
+ Page = M.require( 'Page' ),
+ popup = M.require( 'notifications' ),
+ api = M.require( 'api' ),
+ inBetaOrAlpha = mw.config.get( 'wgMFMode' ) !== 'stable',
+ inCampaign = M.query.campaign ? true : false,
+ inKeepGoingCampaign = M.query.campaign === 'mobile-keepgoing',
+ Section = M.require( 'Section' ),
+ EditorApi = M.require( 'modules/editor/EditorApi' ),
+ KeepGoingDrawer,
+ AbuseFilterOverlay = M.require(
'modules/editorNew/AbuseFilterOverlay' ),
+ EditorOverlay;
+
+ EditorOverlay = OverlayNew.extend( {
+ defaults: {
+ continueMsg: mw.msg( 'mobile-frontend-editor-continue'
),
+ saveMsg: mw.msg( 'mobile-frontend-editor-save' ),
+ cancelMsg: mw.msg( 'mobile-frontend-editor-cancel' ),
+ keepEditingMsg: mw.msg(
'mobile-frontend-editor-keep-editing' ),
+ summaryMsg: mw.msg(
'mobile-frontend-editor-summary-placeholder' ),
+ licenseMsg: mw.msg( 'mobile-frontend-editor-license' ),
+ placeholder: mw.msg(
'mobile-frontend-editor-placeholder' ),
+ waitMsg: mw.msg( 'mobile-frontend-editor-wait' ),
+ captchaMsg: mw.msg(
'mobile-frontend-account-create-captcha-placeholder' ),
+ captchaTryAgainMsg: mw.msg(
'mobile-frontend-editor-captcha-try-again' ),
+ abusefilterReadMoreMsg: mw.msg(
'mobile-frontend-editor-abusefilter-read-more')
+ },
+ template: M.template.get( 'modules/editorNew/EditorOverlay' ),
+ className: 'overlay editor-overlay',
+ closeOnBack: true,
+
+ log: function( action, errorText ) {
+ var
+ data = {
+ token: M.getSessionId(),
+ action: action,
+ section: this.sectionId,
+ namespace: mw.config.get(
'wgNamespaceNumber' ),
+ userEditCount: mw.config.get(
'wgUserEditCount' ),
+ isTestA: M.isTestA,
+ pageId: mw.config.get( 'wgArticleId' ),
+ username: mw.config.get( 'wgUserName' ),
+ mobileMode: mw.config.get( 'wgMFMode' ),
+ userAgent: window.navigator.userAgent,
+ funnel: this.funnel
+ };
+ if ( errorText ) {
+ data.errorText = errorText;
+ }
+ M.log( 'MobileWebEditing', data );
+ },
+
+ initialize: function( options ) {
+ this.api = new EditorApi( {
+ title: options.title,
+ sectionId: options.sectionId,
+ isNew: options.isNew
+ } );
+ this.sectionId = options.sectionId;
+ // FIXME: isNewEditor and isFirstEdit are the same thing
+ this.isNewEditor = options.isNewEditor;
+ this.editCount = mw.config.get( 'wgUserEditCount' );
+ this.isFirstEdit = this.editCount === 0;
+ this.funnel = options.funnel;
+
+ options.editingMsg = mw.msg(
'mobile-frontend-editor-editing', options.title );
+ options.previewingMsg = mw.msg(
'mobile-frontend-editor-previewing', options.title );
+
+ this._super( options );
+ },
+
+ postRender: function( options ) {
+ var self = this;
+ this._super( options );
+
+ this.$spinner = this.$( '.spinner' );
+ this.$preview = this.$( '.preview' );
+ this.$content = this.$( 'textarea' ).
+ microAutosize().
+ on( 'input', function() {
+ self.api.setContent(
self.$content.val() );
+ self.$( '.continue, .submit' ).prop(
'disabled', false );
+ } );
+ this.$( '.continue' ).on( 'click', $.proxy( this,
'_showPreview' ) );
+ this.$( '.back' ).on( 'click', $.proxy( this,
'_hidePreview' ) );
+ this.$( '.submit' ).on( 'click', $.proxy( this, '_save'
) );
+ this.$( '.cancel' ).on( 'click', function() {
+ // log cancel attempt
+ self.log( 'cancel' );
+ } );
+ // make license links open in separate tabs
+ this.$( '.license a' ).attr( 'target', '_blank' );
+
+ this._showHidden( '.initial-header' );
+ this._loadContent();
+ // log section edit attempt
+ self.log( 'attempt' );
+ },
+
+ hide: function() {
+ var confirmMessage = mw.msg(
'mobile-frontend-editor-cancel-confirm' );
+ if ( !this.api.hasChanged || this.canHide ||
window.confirm( confirmMessage ) ) {
+ return this._super();
+ } else {
+ return false;
+ }
+ },
+
+ _showPreview: function() {
+ var self = this;
+
+ // log save button click
+ this.log( 'save' );
+ this._showHidden( '.save-header, .save-panel' );
+
+ this.scrollTop = $( 'body' ).scrollTop();
+ this.$content.hide();
+ this.$spinner.show();
+
+ // pre-fetch keep going with expectation user will go
on to save
+ if ( inBetaOrAlpha && ( ( this.isFirstEdit &&
!inCampaign ) || inKeepGoingCampaign ) ) {
+ mw.loader.using( 'mobile.keepgoing', function()
{
+ KeepGoingDrawer = M.require(
'modules/keepgoing/KeepGoingDrawer' );
+ } );
+ }
+
+ api.post( {
+ action: 'parse',
+ // Enable section preview mode to avoid errors
(bug 49218)
+ sectionpreview: true,
+ // needed for pre-save transform to work (bug
53692)
+ pst: true,
+ // Output mobile HTML (bug 54243)
+ mobileformat: true,
+ title: self.options.title,
+ text: self.$content.val(),
+ prop: 'text'
+ } ).then( function( resp ) {
+ var html;
+ if ( resp && resp.parse && resp.parse.text ) {
+ html = resp.parse.text['*'];
+ return $.Deferred().resolve( html );
+ } else {
+ return $.Deferred().reject();
+ }
+ } ).done( function( parsedText ) {
+ // FIXME: hacky
+ var $tmp = $( '<div>' ).html( parsedText ),
heading;
+ // remove heading from the parsed output
+ $tmp.find( 'h1, h2' ).eq( 0 ).remove();
+
+ new Section( {
+ el: self.$preview,
+ content: $tmp.html()
+ // bug 49218: stop links from being clickable
(note user can still hold down to navigate to them)
+ } ).$( 'a' ).on( 'click', false );
+ // Emit event so we can perform enhancements to
page
+ M.emit( 'edit-preview', self );
+ } ).fail( function() {
+ self.$preview.addClass( 'error' ).text( mw.msg(
'mobile-frontend-editor-error-preview' ) );
+ } ).always( function() {
+ self.$spinner.hide();
+ self.$preview.show();
+ } );
+ },
+
+ _hidePreview: function() {
+ this.$preview.hide();
+ this.$content.show();
+ window.scrollTo( 0, this.scrollTop );
+ this._showHidden( '.initial-header' );
+ },
+
+ _loadContent: function() {
+ var self = this;
+
+ this.$content.hide();
+ this.$spinner.show();
+
+ this.api.getContent().
+ done( function( content ) {
+ self.$content.
+ show().
+ val( content ).
+ trigger( 'input' );
+ self.$( '.continue, .submit' ).prop(
'disabled', true );
+ self.$spinner.hide();
+ } ).
+ fail( function( error ) {
+ popup.show( mw.msg(
'mobile-frontend-editor-error-loading' ), 'toast error' );
+ // log error that occurred in
retrieving section
+ self.log( 'error', error );
+ } );
+ },
+
+ _showCaptcha: function( url ) {
+ var self = this, $input = this.$( '.captcha-word' );
+
+ if ( this.captchaShown ) {
+ $input.val( '' );
+ $input.attr( 'placeholder',
this.options.captchaTryAgainMsg );
+ setTimeout( function() {
+ $input.attr( 'placeholder',
self.options.captchaMsg );
+ }, 2000 );
+ }
+
+ this.$( '.captcha-panel img' ).attr( 'src', url );
+ this._showHidden( '.save-header, .captcha-panel' );
+
+ this.captchaShown = true;
+ },
+
+ _updateEditCount: function() {
+ this.isFirstEdit = false;
+ this.editCount += 1;
+ mw.config.set( 'wgUserEditCount', this.editCount );
+ },
+
+ _showAbuseFilter: function( type, message ) {
+ var self = this, msg;
+
+ this.$( '.abusefilter-panel .readmore' ).on( 'click',
function() {
+ self.canHide = true;
+ new AbuseFilterOverlay( { parent: self,
message: message } ).show();
+ self.canHide = false;
+ } );
+
+ if ( type === 'warning' ) {
+ msg = mw.msg(
'mobile-frontend-editor-abusefilter-warning' );
+ } else if ( type === 'disallow' ) {
+ msg = mw.msg(
'mobile-frontend-editor-abusefilter-disallow' );
+ // disable continue and save buttons, reenabled
when user changes content
+ this.$( '.continue, .submit' ).prop(
'disabled', true );
+ }
+
+ this.$( '.message p' ).text( msg );
+ this._showHidden( '.save-header, .abusefilter-panel' );
+ },
+
+ _save: function() {
+ var self = this, className = 'toast landmark',
+ options = { summary: this.$( '.summary' ).val()
},
+ msg;
+
+ if ( this.captchaId ) {
+ options.captchaId = this.captchaId;
+ options.captchaWord = this.$( '.captcha-word'
).val();
+ }
+
+ self.log( 'submit' );
+ this._showHidden( '.saving-header' );
+
+ this.api.save( options ).
+ done( function() {
+ var title = self.options.title;
+
+ // log success!
+ self.log( 'success' );
+ M.pageApi.invalidatePage( title );
+ new Page( { title: title, el: $(
'#content_wrapper' ) } ).on( 'ready', M.reloadPage );
+ M.router.navigate( '' );
+ self.hide();
+ if ( self.isNewEditor ) {
+ msg =
'mobile-frontend-editor-success-landmark-1';
+ } else {
+ className = 'toast';
+ msg =
'mobile-frontend-editor-success';
+ }
+ self._updateEditCount();
+ // Set a cookie for 30 days indicating
that this user has edited from
+ // the mobile interface.
+ $.cookie( 'mobileEditor', 'true', {
expires: 30 } );
+ // double check it was successfully
pre-fetched during preview phase
+ if ( KeepGoingDrawer ) {
+ new KeepGoingDrawer( {
isFirstEdit: self.isFirstEdit } );
+ } else {
+ // just show a toast
+ popup.show( mw.msg( msg ),
className );
+ }
+ } ).
+ fail( function( data ) {
+ var msg;
+
+ if ( data.type === 'captcha' ) {
+ self.captchaId =
data.details.id;
+ self._showCaptcha(
data.details.url );
+ } else if ( data.type === 'abusefilter'
) {
+ self._showAbuseFilter(
data.details.type, data.details.message );
+ } else {
+ if ( data.details ===
'editconflict' ) {
+ msg = mw.msg(
'mobile-frontend-editor-error-conflict' );
+ } else {
+ msg = mw.msg(
'mobile-frontend-editor-error' );
+ }
+
+ popup.show( msg, 'toast error'
);
+ self._showHidden(
'.save-header, .save-panel' );
+ // log error that occurred in
retrieving section
+ self.log( 'error', data.details
);
+ }
+ } );
+ },
+
+ _showHidden: function( className ) {
+ // can't use jQuery's hide() and show() beause show()
sets display: block
+ // and we want display: table for headers
+ this.$( '.hideable' ).addClass( 'hidden' );
+ this.$( className ).removeClass( 'hidden' );
+ }
+ } );
+
+ M.define( 'modules/editorNew/EditorOverlay', EditorOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 0c924a1..ec0f35e 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -35,7 +35,7 @@
}
.bottom-border {
- border-bottom: 1px solid #cacaca;
+ border-bottom: 1px solid @grayLight;
}
> div {
@@ -113,7 +113,21 @@
background-image: url(images/check.png);
background-color: #00af8b;
}
+
+ &.continue {
+ background-image: url(images/continue.png);
+ background-color: #2f81f0;
+ }
+
+ &.back {
+ background-image: url(images/back.png);
+ }
}
+ }
+
+ .panel {
+ padding: @contentMargin;
+ border-bottom: 1px solid @grayLight;
}
.license {
@@ -127,4 +141,11 @@
margin-top: .5em;
line-height: 1.4;
}
+
+ .content {
+ .cancel {
+ display: block;
+ margin: 1em auto;
+ }
+ }
}
diff --git a/less/common/buttons.less b/less/common/buttons.less
index 72eca6d..cdc4645 100644
--- a/less/common/buttons.less
+++ b/less/common/buttons.less
@@ -13,6 +13,10 @@
}
.content,
+// FIXME: buttons need a clean up, probably we should have more than one class
+// for them, .panel is here only for .inline styling, remove if cleaned up
+.panel,
+// FIXME: deprecate .buttonBar when new overlays in stable
.buttonBar {
.button,
button,
@@ -40,11 +44,6 @@
color: lighten( #3f77d7, 30% );;
.vertical-gradient( @disabledColor,@disabledColor );
border-color: darken( @disabledColor, 5% );
- }
-
- &.cancel {
- background: #777;
- border: 1px #666 solid;
}
&.inline {
diff --git a/less/common/common-js.less b/less/common/common-js.less
index d8253dc..ca82094 100644
--- a/less/common/common-js.less
+++ b/less/common/common-js.less
@@ -24,6 +24,10 @@
}
}
+.hidden {
+ display: none !important;
+}
+
.progress-bar {
width: 100%;
height: .9em;
diff --git a/less/common/images/back.png b/less/common/images/back.png
new file mode 100644
index 0000000..b9c4775
--- /dev/null
+++ b/less/common/images/back.png
Binary files differ
diff --git a/less/common/images/continue.png b/less/common/images/continue.png
new file mode 100644
index 0000000..c8cb5ed
--- /dev/null
+++ b/less/common/images/continue.png
Binary files differ
diff --git a/less/common/ui.less b/less/common/ui.less
index 5bd4045..9147f64 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -141,8 +141,31 @@
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
-.content .edit-page {
- display: none;
+.content {
+ .edit-page {
+ display: none;
+ position: absolute;
+ background: url(../common/images/pagemenu/edit.png) 100%
@headingMargin no-repeat;
+ .background-size( auto, 30px );
+ text-indent: -9999px;
+ border-left: solid 1px @sectionBorderColor;
+ width: @sectionIconWidth + 5px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ }
+
+ h1.openSection,
+ h2.openSection {
+ .edit-page {
+ display: block;
+ }
+ }
+}
+
+.stub .edit-page {
+ margin: 0;
+ display: block;
}
// FIXME: this is here only because non-JS version doesn't load watchstar.less
diff --git a/less/modules/editor.less b/less/modules/editor.less
index 4c2c0d1..40a7b57 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -1,31 +1,5 @@
@import "../mixins.less";
-.content {
- .edit-page {
- position: absolute;
- background: url(../common/images/pagemenu/edit.png) 100%
@headingMargin no-repeat;
- .background-size( auto, 30px );
- text-indent: -9999px;
- border-left: solid 1px @sectionBorderColor;
- width: @sectionIconWidth + 5px;
- top: 0;
- bottom: 0;
- right: 0;
- }
-
- h1.openSection,
- h2.openSection {
- .edit-page {
- display: block;
- }
- }
-}
-
-.stub .edit-page {
- margin: 0;
- display: block;
-}
-
.editor-overlay {
textarea {
width: 100%;
diff --git a/less/modules/editorNew.less b/less/modules/editorNew.less
new file mode 100644
index 0000000..5916b18
--- /dev/null
+++ b/less/modules/editorNew.less
@@ -0,0 +1,56 @@
+@import "../mixins.less";
+
+.editor-overlay {
+ textarea {
+ width: 100%;
+ min-height: 50%;
+ padding: 10px @contentMargin;
+ line-height: 1.5;
+ border: none;
+ resize: none;
+ .box-sizing( border-box );
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ input {
+ margin: 0 0 .7em;
+ width: 100%;
+ .box-sizing( border-box );
+ }
+
+ .preview {
+ display: none;
+ }
+
+ .buttonBar {
+ .message {
+ margin: 0 0 .7em;
+ padding: 0 0 .3em;
+ border-bottom: 1px solid #ccc;
+ color: #707070;
+
+ p {
+ display: inline-block;
+ text-align: center;
+ padding-top: 0;
+ }
+ }
+ }
+}
+
+.abusefilter-overlay {
+ // FIXME: enwiki only?
+ .mbox-image {
+ min-width: 30px;
+ }
+}
+
+// FIXME: high line-height (1.5) causes weird behavior in textareas on
+// Android 2.x, remove this if we don't want to support editor there
+.android2 .editor-overlay textarea {
+ line-height: 1.2;
+}
+
diff --git a/less/variables.less b/less/variables.less
index 60b558c..9264eef 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -18,7 +18,7 @@
@grayMediumDark: #565656;
@grayMedium: #777;
@grayMediumLight: #aaa;
-@grayLight: #ccc;
+@grayLight: #cacaca;
// page actions
@watchStarSize: 22px;
diff --git a/templates/modules/editor/AbuseFilterOverlay.html
b/templates/modules/editor/AbuseFilterOverlay.html
index b61bf09..59d3e3a 100644
--- a/templates/modules/editor/AbuseFilterOverlay.html
+++ b/templates/modules/editor/AbuseFilterOverlay.html
@@ -1,4 +1,4 @@
<div class="content">
{{{message}}}
- <button class="confirm">{{confirmMessage}}</button>
+ <button class="cancel">{{confirmMessage}}</button>
</div>
diff --git a/templates/modules/editorNew/EditorOverlay.html
b/templates/modules/editorNew/EditorOverlay.html
new file mode 100644
index 0000000..3f52e0e
--- /dev/null
+++ b/templates/modules/editorNew/EditorOverlay.html
@@ -0,0 +1,53 @@
+<div class="overlay-header with-margins initial-header hideable hidden">
+ <ul class="v-border bottom-border">
+ <li><button class="cancel icon">{{closeMsg}}</button></li>
+ </ul>
+ <div class="bottom-border">
+ <h2>{{{editingMsg}}}</h2>
+ </div>
+ <ul>
+ <li><button class="continue icon"
disabled>{{continueMsg}}</button></li>
+ </ul>
+</div>
+<div class="overlay-header with-margins save-header hideable hidden">
+ <ul class="v-border bottom-border">
+ <li><button class="back icon">{{keepEditingMsg}}</button></li>
+ </ul>
+ <div class="bottom-border">
+ <h2>{{{previewingMsg}}}</h2>
+ </div>
+ <ul>
+ <li><button class="submit icon">{{saveMsg}}</button></li>
+ </ul>
+</div>
+<div class="overlay-header with-margins saving-header hideable hidden">
+ <ul class="v-border bottom-border">
+ <li><button class="cancel icon"
disabled>{{closeMsg}}</button></li>
+ </ul>
+ <div class="bottom-border">
+ <h2>{{{waitMsg}}}</h2>
+ </div>
+ <ul class="v-border bottom-border">
+ <li><button class="loading icon">{{waitMsg}}</button></li>
+ </ul>
+</div>
+
+<div class="save-panel panel hideable hidden">
+ <input class="summary" placeholder="{{summaryMsg}}" />
+ <p class="license">{{{licenseMsg}}}</p>
+</div>
+<div class="captcha-panel panel hideable hidden">
+ <div class="inputs-box">
+ <img src="">
+ <input class="captcha-word" placeholder="{{captchaMsg}}" />
+ </div>
+</div>
+<div class="abusefilter-panel panel hideable hidden">
+ <div class="message">
+ <p></p><button class="readmore
inline">{{abusefilterReadMoreMsg}}</button>
+ </div>
+</div>
+
+<div class="spinner loading"></div>
+<textarea cols="40" rows="10" placeholder="{{placeholder}}"></textarea>
+<div class="preview content"></div>
--
To view, visit https://gerrit.wikimedia.org/r/96209
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I677aa4b79ee247c1accda67b697f1fbd9e278583
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
