JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/72764
Change subject: Story 839: Add preview header (follow-up)
......................................................................
Story 839: Add preview header (follow-up)
I forgot to add that in the original commit implementing the new
preview. Added now to avoid Vibha's wrath.
Change-Id: Icbdfe1fc5bf42e7978db4660d3e4ef4335a22ea3
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
M less/modules/editor.less
M stylesheets/modules/editor.css
A stylesheets/modules/images/preview-bg.png
M templates/overlays/editor.html
7 files changed, 38 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/64/72764/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 12e99a3..986b6fe 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -258,7 +258,7 @@
'mobile-frontend-editor-error' => 'Error, edit not saved.',
'mobile-frontend-editor-error-conflict' => 'Error, another user has
edited this page.',
'mobile-frontend-editor-error-loading' => 'Error, can\'t load section.',
- 'mobile-frontend-editor-preview-explanation' => 'A preview of this edit
will be shown below.',
+ 'mobile-frontend-editor-preview-header' => 'Preview',
'mobile-frontend-editor-error-preview' => 'Error, something unexpected
happened upon loading the preview. Please close and try again.',
// Change tags
@@ -693,7 +693,7 @@
'mobile-frontend-editor-error-loading' => 'Text that displays when
there have been errors when loading a page section in the editor.
Used as "toast" error message.',
- 'mobile-frontend-editor-preview-explanation' => 'A summary explaining
that the preview is being prepared and will appear below.',
+ 'mobile-frontend-editor-preview-header' => 'A header explaining that
user is viewing a preview of the changes they made in the editor.',
'mobile-frontend-editor-error-preview' => 'Error message for when a
preview fails to load for an unknown reason',
'tag-mobile_edit' => 'Short change tag name that appears e.g. in
[[Special:RecentChanges]].
diff --git a/includes/Resources.php b/includes/Resources.php
index f4094b4..a7f832d 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -246,9 +246,8 @@
'mobile-frontend-editor-error',
'mobile-frontend-editor-error-conflict',
'mobile-frontend-editor-error-loading',
- // modules/editor/PreviewOverlay.js
+ 'mobile-frontend-editor-preview-header',
'mobile-frontend-editor-error-preview',
- 'mobile-frontend-editor-preview-explanation',
// modules/editor/EditorOverlay.js and modules/talk.js
'mobile-frontend-editor-save',
// page.js
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index c6f6f3d..91fc0c0 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -17,6 +17,7 @@
keepEditingMsg: mw.msg(
'mobile-frontend-editor-keep-editing' ),
summaryMsg: mw.msg(
'mobile-frontend-editor-summary-placeholder' ),
licenseMsg: mw.msg( 'mobile-frontend-editor-license' ),
+ previewMsg: mw.msg(
'mobile-frontend-editor-preview-header' ),
waitMsg: mw.msg( 'mobile-frontend-editor-wait' )
},
template: M.template.get( 'overlays/editor' ),
@@ -137,7 +138,7 @@
$tmp.find( 'h2' ).eq( 0 ).remove();
new Section( {
- el: self.$preview,
+ el: self.$preview.find( '.content' ),
index: 'preview',
// doesn't account for headings with
html inside
heading: heading,
diff --git a/less/modules/editor.less b/less/modules/editor.less
index b17352e..ec32a0a 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -48,6 +48,20 @@
.preview {
display: none;
padding-bottom: 15em;
+
+ > h2 {
+ font: bold .75em @fontFamily;
+ color: #707070;
+ text-align: center;
+ background: #f3f3f3 url('images/preview-bg.png') 50%
50% repeat-x;
+ .background-size( auto, .8em );
+ line-height: 1.7;
+ text-transform: uppercase;
+ // FIXME: possibly the default styling of headings
should apply to
+ // headings in #content only and this wouldn't be
necessary?
+ margin: 0;
+ padding: 0;
+ }
}
.license {
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index 022d351..6ce1ff3 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -40,6 +40,21 @@
display: none;
padding-bottom: 15em;
}
+.editor-overlay .preview > h2 {
+ font: bold 0.75em "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial",
"Liberation Sans", sans-serif;
+ color: #707070;
+ text-align: center;
+ background: #f3f3f3 url('images/preview-bg.png') 50% 50% repeat-x;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -o-background-size: auto 0.8em;
+ -webkit-background-size: auto 0.8em;
+ background-size: auto 0.8em;
+ line-height: 1.7;
+ text-transform: uppercase;
+ margin: 0;
+ padding: 0;
+}
.editor-overlay .license {
background: url('images/cc-by-sa.png') 0 0.2em no-repeat;
background-size: auto 16px;
diff --git a/stylesheets/modules/images/preview-bg.png
b/stylesheets/modules/images/preview-bg.png
new file mode 100644
index 0000000..23ef3d9
--- /dev/null
+++ b/stylesheets/modules/images/preview-bg.png
Binary files differ
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index 3b0b759..6fbb83f 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -3,7 +3,10 @@
</div>
<div class="spinner loading"></div>
<textarea cols="40" rows="10"></textarea>
-<div class="preview content"></div>
+<div class="preview">
+ <h2>{{previewMsg}}</h2>
+ <div class="content"></div>
+</div>
<div class="position-fixed buttonBar initial-bar">
<button class="cancel inline">{{cancelMsg}}</button>
<button class="continue" disabled>{{continueMsg}}</button>
--
To view, visit https://gerrit.wikimedia.org/r/72764
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icbdfe1fc5bf42e7978db4660d3e4ef4335a22ea3
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
