Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/73550
Change subject: Story 920: Show uploads tutorial after following anon cta
......................................................................
Story 920: Show uploads tutorial after following anon cta
Enable the anonymous user CTA in beta.
Refactor photo uploads tutorial css to be more generic
Change-Id: Ic54af4d87553218b2e382544ee852508717bdf39
---
M includes/Resources.php
M includes/skins/SkinMobileBeta.php
A javascripts/common/TutorialOverlay.js
A javascripts/modules/newbie.js
M javascripts/specials/uploads.js
M javascripts/widgets/carousel.js
A less/common/TutorialOverlay.less
M less/common/overlays.less
M less/specials/uploads.less
A stylesheets/common/TutorialOverlay.css
R stylesheets/common/images/tutorials/photos.png
M stylesheets/common/overlays.css
M stylesheets/specials/uploads.css
A templates/leadPhotoTutorial.html
M templates/overlays/editor.html
M templates/overlays/talkSectionAdd.html
M templates/photoUploadPreview.html
M templates/specials/uploads/carousel.html
18 files changed, 188 insertions(+), 90 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/50/73550/1
diff --git a/includes/Resources.php b/includes/Resources.php
index bb325a7..cbb3501 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -206,6 +206,7 @@
'talkSection',
// page.js
'page',
+ 'leadPhotoTutorial',
'languageSection',
),
'messages' => array(
@@ -278,6 +279,8 @@
'javascripts/common/user.js',
'javascripts/modules/search-pageimages.js',
'javascripts/modules/languages-preferred.js',
+ 'javascripts/common/TutorialOverlay.js',
+ 'javascripts/modules/newbie.js',
),
'position' => 'bottom',
'messages' => array(
@@ -379,6 +382,7 @@
'stylesheets/modules/mf-cleanuptemplates.css',
'stylesheets/modules/mf-watchstar.css',
'stylesheets/modules/mf-photo.css',
+ 'stylesheets/common/TutorialOverlay.css',
),
'position' => 'top',
),
@@ -418,7 +422,7 @@
'mobile-frontend-drawer-cancel',
'mobile-frontend-overlay-escape',
- // LearnMoreOverlay.js
+ // LearnMoreOverlay.js, newbie.js
'mobile-frontend-photo-ownership-confirm',
// PhotoApi.js
diff --git a/includes/skins/SkinMobileBeta.php
b/includes/skins/SkinMobileBeta.php
index 754abed..c54bb47 100644
--- a/includes/skins/SkinMobileBeta.php
+++ b/includes/skins/SkinMobileBeta.php
@@ -9,6 +9,8 @@
}
public function initPage( OutputPage $out ) {
+ global $wgMFEnablePhotoUploadCTA;
+ $wgMFEnablePhotoUploadCTA = true;
parent::initPage( $out );
$out->addModuleStyles( 'mobile.styles.beta' );
}
diff --git a/javascripts/common/TutorialOverlay.js
b/javascripts/common/TutorialOverlay.js
new file mode 100644
index 0000000..70da2af
--- /dev/null
+++ b/javascripts/common/TutorialOverlay.js
@@ -0,0 +1,30 @@
+( function( M, $ ) {
+
+ var Overlay = M.require( 'Overlay' ), TutorialOverlay;
+
+ TutorialOverlay = Overlay.extend( {
+ postRender: function( options ) {
+ this._super( options );
+ if ( options.target ) {
+ this.addPointerArrow( $( options.target ) );
+ }
+ },
+ addPointerArrow: function( $pa ) {
+ var tb = 'solid 10px transparent',
+ paOffset = $pa.offset(),
+ h = $pa.outerHeight();
+
+ this.$el.css( 'top', paOffset.top + h + 8 );
+ $( '<div>' ).css( {
+ 'border-bottom': 'solid 10px #006398',
+ 'border-right': tb,
+ 'border-left': tb,
+ position: 'absolute',
+ top: -10,
+ left: paOffset.left + 10
+ } ).appendTo( this.$el );
+ }
+ } );
+ M.define( 'TutorialOverlay', TutorialOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/newbie.js b/javascripts/modules/newbie.js
new file mode 100644
index 0000000..132ba30
--- /dev/null
+++ b/javascripts/modules/newbie.js
@@ -0,0 +1,19 @@
+( function( M, $ ) {
+ var TutorialOverlay = M.require( 'TutorialOverlay' ),
+ TutorialPhotoNewbie = TutorialOverlay.extend( {
+ template: M.template.get( 'leadPhotoTutorial' ),
+ defaults: {
+ cancelMsg: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
+ }
+ } );
+
+ $( function() {
+
+ if ( $( '#ca-upload' ).hasClass( 'enabled' ) &&
window.location.search.indexOf( 'article_action=photo-upload' ) > -1 ) {
+ new TutorialPhotoNewbie( {
+ target: $( '#ca-upload' )
+ } ).show();
+ }
+ } );
+
+ }( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index a1feeeb..16791f0 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -172,7 +172,7 @@
{
caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-header' ),
cancel: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-ok' ),
- className: 'page-3',
id: 3
+ className:
'slide-image', id: 3
}
]
} ).show();
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
index 00a21ea8..fc5fe23 100644
--- a/javascripts/widgets/carousel.js
+++ b/javascripts/widgets/carousel.js
@@ -4,7 +4,7 @@
Carousel = View.extend( {
template: M.template.get( 'specials/uploads/carousel' ),
- className: 'carousel slideable',
+ className: 'carousel tutorial slideable',
postRender: function() {
var self = this, $pages;
$pages = this.$( '.page' );
diff --git a/less/common/TutorialOverlay.less b/less/common/TutorialOverlay.less
new file mode 100644
index 0000000..79d1781
--- /dev/null
+++ b/less/common/TutorialOverlay.less
@@ -0,0 +1,47 @@
+@import "../mf-mixins.less";
+/* Tutorial overlay styling */
+
+.mw-mf-overlay {
+ .tutorial {
+ padding-left: @contentMarginRight;
+ padding-right: @contentMarginRight;
+ line-height: 1.4;
+ font-size: 0.9em;
+ background-color: #006398;
+ color: white;
+ height: 100%;
+
+ @imageHeight: 180px;
+ .slide {
+ padding: @imageHeight 0 0 0;
+ text-align: center;
+ background-size: auto @imageHeight;
+ background-repeat: no-repeat;
+ background-position: center 0;
+ top: 10px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+
+ p {
+ font-size: 0.9em;
+ margin: 0 26px;
+ }
+
+ .cancel {
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ border-radius: 0;
+ }
+ }
+
+ .slide-image {
+ background-image: url(images/tutorials/photos.png);
+ }
+
+ }
+}
diff --git a/less/common/overlays.less b/less/common/overlays.less
index d4746dd..c9b90ec 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -86,18 +86,21 @@
}
}
- .buttonBar {
- bottom: 0;
- left: 0;
- right: 0;
- border-top: 1px solid #ccc;
- background-color: #f3f3f3;
+ .button-bar-centered {
text-align: center;
padding: 0 1em;
button {
margin: .7em .3em;
}
+ }
+
+ .buttonBar {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border-top: 1px solid #ccc;
+ background-color: #f3f3f3;
p {
margin: .7em 0;
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 3a2cc2b..842322f 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -9,11 +9,6 @@
@buttonPadding: 4px;
position: relative;
- background-color: #006398;
- color: white;
- height: 100%;
- padding-left: @contentMarginRight;
- padding-right: @contentMarginRight;
.box-sizing( border-box );
> button {
@@ -44,27 +39,8 @@
}
}
- button.cancel {
- color: #006398;
- padding: 12px;
- border: none;
- background-color: #F0F0F0;
- font-weight: bold;
- border-radius: 0;
- }
-
- @imageHeight: 180px;
- .page {
- padding: @imageHeight 0 0 0;
- text-align: center;
- background-size: auto @imageHeight;
- background-repeat: no-repeat;
- background-position: center 0;
- top: 10px;
+ .slide {
left: 100%;
- bottom: 0;
- width: 100%;
- position: absolute;
visibility: hidden;
&.active {
@@ -82,21 +58,13 @@
margin: 0 26px 16px;
}
- p {
- font-size: 0.9em;
- margin: 0 26px;
- }
-
+ // FIXME: Make page-1 and page-2 more generic and reusable?
&.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
}
&.page-2 {
background-image: url(images/uploads/SplashScreen2.png);
- }
-
- &.page-3 {
- background-image: url(images/uploads/SplashScreen3.png);
}
}
}
diff --git a/stylesheets/common/TutorialOverlay.css
b/stylesheets/common/TutorialOverlay.css
new file mode 100644
index 0000000..fe5cd9a
--- /dev/null
+++ b/stylesheets/common/TutorialOverlay.css
@@ -0,0 +1,44 @@
+/**
+ * DO NOT EDIT THIS FILE
+ * This is an automatically generated css file.
+ * It was generated by LESS (http://lesscss.org).
+ * Please edit the corresponding less file instead.
+ * See README.mediawiki for details on installing.
+ */
+/* Tutorial overlay styling */
+.mw-mf-overlay .tutorial {
+ padding-left: 23px;
+ padding-right: 23px;
+ line-height: 1.4;
+ font-size: 0.9em;
+ background-color: #006398;
+ color: white;
+ height: 100%;
+}
+.mw-mf-overlay .tutorial .slide {
+ padding: 180px 0 0 0;
+ text-align: center;
+ background-size: auto 180px;
+ background-repeat: no-repeat;
+ background-position: center 0;
+ top: 10px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ position: absolute;
+}
+.mw-mf-overlay .tutorial .slide p {
+ font-size: 0.9em;
+ margin: 0 26px;
+}
+.mw-mf-overlay .tutorial .slide .cancel {
+ color: #006398;
+ padding: 12px;
+ border: none;
+ background-color: #F0F0F0;
+ font-weight: bold;
+ border-radius: 0;
+}
+.mw-mf-overlay .tutorial .slide-image {
+ background-image: url(images/tutorials/photos.png);
+}
diff --git a/stylesheets/specials/images/uploads/SplashScreen3.png
b/stylesheets/common/images/tutorials/photos.png
similarity index 100%
rename from stylesheets/specials/images/uploads/SplashScreen3.png
rename to stylesheets/common/images/tutorials/photos.png
Binary files differ
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 2661f97..163647b 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -73,17 +73,19 @@
display: block;
margin: auto;
}
+.mw-mf-overlay .button-bar-centered {
+ text-align: center;
+ padding: 0 1em;
+}
+.mw-mf-overlay .button-bar-centered button {
+ margin: .7em .3em;
+}
.mw-mf-overlay .buttonBar {
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #ccc;
background-color: #f3f3f3;
- text-align: center;
- padding: 0 1em;
-}
-.mw-mf-overlay .buttonBar button {
- margin: .7em .3em;
}
.mw-mf-overlay .buttonBar p {
margin: .7em 0;
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 7713a24..c136fce 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -11,11 +11,6 @@
}
.carousel {
position: relative;
- background-color: #006398;
- color: white;
- height: 100%;
- padding-left: 23px;
- padding-right: 23px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -52,52 +47,28 @@
.carousel > button.active {
visibility: visible;
}
-.carousel button.cancel {
- color: #006398;
- padding: 12px;
- border: none;
- background-color: #F0F0F0;
- font-weight: bold;
- border-radius: 0;
-}
-.carousel .page {
- padding: 180px 0 0 0;
- text-align: center;
- background-size: auto 180px;
- background-repeat: no-repeat;
- background-position: center 0;
- top: 10px;
+.carousel .slide {
left: 100%;
- bottom: 0;
- width: 100%;
- position: absolute;
visibility: hidden;
}
-.carousel .page.active {
+.carousel .slide.active {
visibility: visible;
left: 23px;
}
-.carousel .page p,
-.carousel .page strong {
+.carousel .slide p,
+.carousel .slide strong {
line-height: 1.4;
}
-.carousel .page strong {
+.carousel .slide strong {
display: block;
font-size: 1.1em;
margin: 0 26px 16px;
}
-.carousel .page p {
- font-size: 0.9em;
- margin: 0 26px;
-}
-.carousel .page.page-1 {
+.carousel .slide.page-1 {
background-image: url(images/uploads/SplashScreen1.png);
}
-.carousel .page.page-2 {
+.carousel .slide.page-2 {
background-image: url(images/uploads/SplashScreen2.png);
-}
-.carousel .page.page-3 {
- background-image: url(images/uploads/SplashScreen3.png);
}
.ctaUploadPhoto {
padding: 8px;
diff --git a/templates/leadPhotoTutorial.html b/templates/leadPhotoTutorial.html
new file mode 100644
index 0000000..e168f20
--- /dev/null
+++ b/templates/leadPhotoTutorial.html
@@ -0,0 +1,8 @@
+<div class="tutorial">
+ <div class="slide slide-image active">
+ <p>Ensure that your image can help illustrate the article. It
should be an image that you created which does not violate copyright.</p>
+ <div class="button-bar-centered">
+ <button class="cancel inline">{{cancelMsg}}</button>
+ </div>
+ </div>
+</div>
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index 6fbb83f..8fbcf94 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -7,16 +7,16 @@
<h2>{{previewMsg}}</h2>
<div class="content"></div>
</div>
-<div class="position-fixed buttonBar initial-bar">
+<div class="position-fixed buttonBar button-bar-centered initial-bar">
<button class="cancel inline">{{cancelMsg}}</button>
<button class="continue" disabled>{{continueMsg}}</button>
</div>
-<div class="position-fixed buttonBar save-bar">
+<div class="position-fixed buttonBar button-bar-centered save-bar">
<input class="summary" placeholder="{{summaryMsg}}" />
<button class="inline back">{{keepEditingMsg}}</button>
<button class="save">{{saveMsg}}</button>
<p class="license">{{{licenseMsg}}}</p>
</div>
-<div class="position-fixed buttonBar saving-bar loading">
+<div class="position-fixed buttonBar button-bar-centered saving-bar loading">
<p>{{waitMsg}}</p>
</div>
diff --git a/templates/overlays/talkSectionAdd.html
b/templates/overlays/talkSectionAdd.html
index f8b35b7..97cdeef 100644
--- a/templates/overlays/talkSectionAdd.html
+++ b/templates/overlays/talkSectionAdd.html
@@ -8,7 +8,7 @@
<h3><input type="text" class="search"
placeholder="{{topicTitlePlaceHolder}}"></h3>
<textarea cols="40" rows="10"
placeholder="{{topicContentPlaceHolder}}"></textarea>
</div>
-<div class="position-fixed buttonBar confirm-bar">
+<div class="position-fixed buttonBar button-bar-centered confirm-bar">
<p class="count"></p>
<p>{{{licenseMsg}}}</p>
<button class="cancel">{{cancelMsg}}</button>
diff --git a/templates/photoUploadPreview.html
b/templates/photoUploadPreview.html
index bf660b8..ecf027e 100644
--- a/templates/photoUploadPreview.html
+++ b/templates/photoUploadPreview.html
@@ -6,7 +6,7 @@
<p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
</div>
-<div class="position-fixed buttonBar">
+<div class="position-fixed buttonBar button-bar-centered">
<button class="cancel inline">{{cancelButton}}</button>
<button class="submit" disabled>{{submitButton}}</button>
<p class="license">{{{license}}}</p>
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
index 216b913..3185a68 100644
--- a/templates/specials/uploads/carousel.html
+++ b/templates/specials/uploads/carousel.html
@@ -1,6 +1,6 @@
<button class='prev'></button>
{{#pages}}
-<div class="page {{className}} slider">
+<div class="page slide {{className}} slider">
<strong>{{caption}}</strong>
<p>{{text}}</p>
{{#cancel}}<button class="cancel">{{cancel}}</button>{{/cancel}}
--
To view, visit https://gerrit.wikimedia.org/r/73550
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic54af4d87553218b2e382544ee852508717bdf39
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
