Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/74526
Change subject: Story 920: Make upload tutorial screen have an upload and
cancel button
......................................................................
Story 920: Make upload tutorial screen have an upload and cancel button
Change-Id: Id44543263056c6b999e541076817aeddd46aceeb
---
M MobileFrontend.i18n.php
M javascripts/modules/tutorials/PageActionOverlay.js
M javascripts/modules/tutorials/newbie.js
M less/common/pageactions.less
M less/modules/tutorials.less
M stylesheets/modules/tutorials.css
M templates/pageActionTutorial.html
M templates/photoUploadAction.html
M templates/specials/uploads/carousel.html
9 files changed, 74 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/26/74526/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index fc91daa..f64f2a7 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -227,6 +227,7 @@
'mobile-frontend-photo-nag-learn-more-2' => "'''Yes!''' Photos that can
help illustrate and enrich {{SITENAME}} pages.",
'mobile-frontend-photo-nag-learn-more-3' => "'''No.''' Photos of movie
posters, book covers or other copyrighted material. These will be deleted.",
'mobile-frontend-lead-image-tutorial-summary' => 'Ensure that your
image can help illustrate the article. It should be an image that you created
which does not violate copyright.',
+ 'mobile-frontend-lead-image-tutorial-go' => 'Start uploading',
'mobile-frontend-image-uploading-wait' => 'Uploading image, please
wait.',
'mobile-frontend-image-uploading-long' => 'Image still uploading!
Thanks for your patience.',
'mobile-frontend-image-uploading-cancel' => '<a href="#">Cancel</a> if
this is taking too long.',
@@ -649,6 +650,7 @@
'mobile-frontend-photo-nag-learn-more-2' => 'Explain to users that the
image they upload should be a good illustration for an article.',
'mobile-frontend-photo-nag-learn-more-3' => "Explain to users that the
image can't violate copyrights or else it will be deleted.",
'mobile-frontend-lead-image-tutorial-summary' => 'Briefly summarise
that a lead image should illustrate the page whilst not violating copyright.
Shown to new users after logging in',
+ 'mobile-frontend-lead-image-tutorial-go' => 'Call to action that when
clicked starts uploading an image to a page from tutorial.',
'mobile-frontend-image-uploading-wait' => 'Text that displays whilst an
image is being uploaded',
'mobile-frontend-image-uploading-long' => 'Text that displays whilst an
image is taking long to upload',
'mobile-frontend-image-uploading-cancel' => 'Text saying that user can
cancel the image upload. Word "cancel" should be a link.',
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
index 86a17f9..82166a7 100644
--- a/javascripts/modules/tutorials/PageActionOverlay.js
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -1,5 +1,7 @@
( function( M ) {
var ContentOverlay = M.require( 'ContentOverlay' ),
+ LeadPhotoUploaderButton = M.require(
'modules/uploads/LeadPhotoUploaderButton' ),
+ LeadPhotoTutorialOverlay,
PageActionOverlay;
PageActionOverlay = ContentOverlay.extend( {
@@ -10,6 +12,22 @@
}
} );
+ LeadPhotoTutorialOverlay = PageActionOverlay.extend( {
+ template: M.template.get( 'pageActionTutorial' ),
+ defaults: {
+ summary: mw.msg(
'mobile-frontend-lead-image-tutorial-summary' ),
+ cancelMsg: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
+ },
+ postRender: function( options ) {
+ this._super( options );
+ new LeadPhotoUploaderButton( {
+ el: this.$( '.button' ),
+ label: 'Start uploading',
+ pageTitle: mw.config.get( 'wgTitle' ),
insertInPage: true } );
+ }
+ } );
+
M.define( 'tutorials/PageActionOverlay', PageActionOverlay );
+ M.define( 'tutorials/LeadPhotoTutorialOverlay',
LeadPhotoTutorialOverlay );
}( mw.mobileFrontend ) );
diff --git a/javascripts/modules/tutorials/newbie.js
b/javascripts/modules/tutorials/newbie.js
index 6b2e304..809811e 100644
--- a/javascripts/modules/tutorials/newbie.js
+++ b/javascripts/modules/tutorials/newbie.js
@@ -1,5 +1,5 @@
( function( M, $ ) {
- var PageActionOverlay = M.require( 'tutorials/PageActionOverlay' );
+ var LeadPhotoTutorialOverlay = M.require(
'tutorials/LeadPhotoTutorialOverlay' );
function shouldShowUploadTutorial() {
// FIXME: Limit audience to only users with low edit count
@@ -11,8 +11,9 @@
var photoOverlay;
if ( shouldShowUploadTutorial() ) {
- photoOverlay = new PageActionOverlay( {
- target: $( '#ca-upload' )
+ photoOverlay = new LeadPhotoTutorialOverlay( {
+ target: $( '#ca-upload' ),
+ funnel: 'newbie'
} );
photoOverlay.show();
$( '#ca-upload' ).on( 'mousedown', $.proxy(
photoOverlay, 'hide' ) );
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index 845b30b..0bfe057 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -34,6 +34,7 @@
background-repeat: no-repeat;
margin-right: 16px;
+ // FIXME: use .cloaked class
// file inputs are notoriously difficult to style
input {
opacity: 0;
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 47a95cf..c71d314 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,12 +1,27 @@
@import "../mf-mixins.less";
/* Tutorial overlay styling */
+@colorTutorial: #006398;
+
+// FIXME: Make this global - file inputs are notoriously difficult to style
+// We already use it in several places
+.cloaked {
+ input {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+
.tutorial {
padding-left: @contentMarginRight;
padding-right: @contentMarginRight;
line-height: 1.4;
font-size: 0.9em;
- background-color: #006398;
+ background-color: @colorTutorial;
color: white;
height: 100%;
@@ -28,14 +43,23 @@
margin: 0 26px;
}
- .cancel {
- color: #006398;
+ // FIXME: exists because of inconsistency in new user uploads
tutorial workflow
+ button.actionable,
+ button,
+ .button {
+ // FIXME: without this the cloaked input seems to
interfere making cancel button start upload
+ position: relative;
+ background-color: white;
+ color: @colorTutorial;
padding: 12px;
- border: none;
- background-color: #F0F0F0;
font-weight: bold;
border-radius: 0;
}
+
+ .cancel {
+ background: none;
+ color: white;
+ }
}
.slide-image {
diff --git a/stylesheets/modules/tutorials.css
b/stylesheets/modules/tutorials.css
index 92712f5..a77b2cb 100644
--- a/stylesheets/modules/tutorials.css
+++ b/stylesheets/modules/tutorials.css
@@ -6,6 +6,14 @@
* See README.mediawiki for details on installing.
*/
/* Tutorial overlay styling */
+.cloaked input {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
.tutorial {
padding-left: 16px;
padding-right: 16px;
@@ -31,14 +39,20 @@
font-size: 0.9em;
margin: 0 26px;
}
-.tutorial .slide .cancel {
+.tutorial .slide button.actionable,
+.tutorial .slide button,
+.tutorial .slide .button {
+ position: relative;
+ background-color: white;
color: #006398;
padding: 12px;
- border: none;
- background-color: #F0F0F0;
font-weight: bold;
border-radius: 0;
}
+.tutorial .slide .cancel {
+ background: none;
+ color: white;
+}
.tutorial .slide-image {
background-image: url(images/tutorials/photos.png);
}
diff --git a/templates/pageActionTutorial.html
b/templates/pageActionTutorial.html
index 425c001..d6542f5 100644
--- a/templates/pageActionTutorial.html
+++ b/templates/pageActionTutorial.html
@@ -3,6 +3,7 @@
<p>{{summary}}</p>
<div class="button-bar-centered">
<button class="cancel inline">{{cancelMsg}}</button>
+ <div class="button actionable cloaked">Start
upload</div>
</div>
</div>
</div>
diff --git a/templates/photoUploadAction.html b/templates/photoUploadAction.html
index 1a861d9..5bbd6d1 100644
--- a/templates/photoUploadAction.html
+++ b/templates/photoUploadAction.html
@@ -1 +1 @@
-<input name="file" type="file">
+<input name="file" type="file">{{label}}
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
index a6e021c..ee1cdab 100644
--- a/templates/specials/uploads/carousel.html
+++ b/templates/specials/uploads/carousel.html
@@ -3,7 +3,7 @@
<div class="slide {{className}} slider">
<strong>{{caption}}</strong>
<p>{{text}}</p>
- {{#cancel}}<button class="cancel">{{cancel}}</button>{{/cancel}}
+ {{#cancel}}<button class="cancel
actionable">{{cancel}}</button>{{/cancel}}
</div>
{{/pages}}
<button class='next'></button>
--
To view, visit https://gerrit.wikimedia.org/r/74526
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id44543263056c6b999e541076817aeddd46aceeb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
