jenkins-bot has submitted this change and it was merged.
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
Also, fix line-height (make it the same as in uploads dashboard
tutorial) and make padding around the image smaller to make sure it fits
on most devices (jgonera).
Change-Id: Id44543263056c6b999e541076817aeddd46aceeb
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/modules/tutorials/PageActionOverlay.js
M javascripts/modules/tutorials/newbie.js
M less/common/pageactions.less
M less/modules/tutorials.less
M less/specials/uploads.less
M stylesheets/modules/tutorials.css
M templates/pageActionTutorial.html
M templates/photoUploadAction.html
M templates/specials/uploads/carousel.html
11 files changed, 84 insertions(+), 24 deletions(-)
Approvals:
JGonera: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 10a5d88..ad91ecc 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -225,6 +225,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.',
@@ -645,6 +646,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/includes/Resources.php b/includes/Resources.php
index 2aed95a..1a79b35 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -414,6 +414,7 @@
// LearnMoreOverlay.js, newbie.js
'mobile-frontend-photo-ownership-confirm',
+ 'cancel',
// PhotoApi.js
'mobile-frontend-photo-article-edit-comment',
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
index 86a17f9..83aff8f 100644
--- a/javascripts/modules/tutorials/PageActionOverlay.js
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -1,15 +1,29 @@
( function( M ) {
var ContentOverlay = M.require( 'ContentOverlay' ),
+ LeadPhotoUploaderButton = M.require(
'modules/uploads/LeadPhotoUploaderButton' ),
+ LeadPhotoTutorialOverlay,
PageActionOverlay;
PageActionOverlay = ContentOverlay.extend( {
template: M.template.get( 'pageActionTutorial' ),
defaults: {
summary: mw.msg(
'mobile-frontend-lead-image-tutorial-summary' ),
- cancelMsg: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
+ cancelMsg: mw.msg( 'cancel' )
+ }
+ } );
+
+ LeadPhotoTutorialOverlay = PageActionOverlay.extend( {
+ template: M.template.get( 'pageActionTutorial' ),
+ 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 db1763b..88255c7 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -35,6 +35,7 @@
background-position: 50% 0;
background-repeat: no-repeat;
+ // 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..366959a 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,22 +1,38 @@
@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;
+ }
+}
+
+// FIXME: merge some of this with .carousel
.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%;
@imageHeight: 180px;
.slide {
- padding: @imageHeight 0 0 0;
+ padding: (@imageHeight - 20) 0 0 0;
text-align: center;
background-size: auto @imageHeight;
background-repeat: no-repeat;
- background-position: center 0;
+ background-position: center -10px;
top: 10px;
left: 0;
bottom: 0;
@@ -24,17 +40,26 @@
position: absolute;
p {
- font-size: 0.9em;
- margin: 0 26px;
+ line-height: 1.4;
+ margin: 0 26px 1em;
+ }
+
+ // 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;
+ font-weight: bold;
+ border-radius: 0;
}
.cancel {
- color: #006398;
- padding: 12px;
- border: none;
- background-color: #F0F0F0;
- font-weight: bold;
- border-radius: 0;
+ background: none;
+ color: white;
}
}
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 842322f..5ec6831 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -5,6 +5,7 @@
height: 100%;
}
+// FIXME: merge some of this with .tutorial
.carousel {
@buttonPadding: 4px;
diff --git a/stylesheets/modules/tutorials.css
b/stylesheets/modules/tutorials.css
index 92712f5..e78648d 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;
@@ -16,11 +24,11 @@
height: 100%;
}
.tutorial .slide {
- padding: 180px 0 0 0;
+ padding: 160px 0 0 0;
text-align: center;
background-size: auto 180px;
background-repeat: no-repeat;
- background-position: center 0;
+ background-position: center -10px;
top: 10px;
left: 0;
bottom: 0;
@@ -28,17 +36,23 @@
position: absolute;
}
.tutorial .slide p {
- font-size: 0.9em;
- margin: 0 26px;
+ line-height: 1.4;
+ margin: 0 26px 1em;
}
-.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..91b8f21 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"></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: merged
Gerrit-Change-Id: Id44543263056c6b999e541076817aeddd46aceeb
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
