jenkins-bot has submitted this change and it was merged.
Change subject: Story 1280 (2/2): Overhaul of image uploading overlay design
......................................................................
Story 1280 (2/2): Overhaul of image uploading overlay design
Refactor the uploads tutorial and use it for new users in all kind of
uploads.
Remove some unused PNG images, clean up tutorial CSS and fix it for RTL
languages.
Change-Id: I53d72eb1641e1b253ef5b8bb3832918fc654070a
---
M includes/Resources.php
M javascripts/modules/tutorials/PageActionOverlay.js
M javascripts/modules/uploads/PhotoUploaderButton.js
A javascripts/modules/uploads/UploadTutorial.js
D javascripts/modules/uploadsNew/LearnMoreOverlay.js
M javascripts/modules/uploadsNew/PhotoUploadOverlay.js
D javascripts/specials/overlays/CarouselOverlay.js
M javascripts/specials/uploads.js
D javascripts/widgets/carousel.js
M less/common/OverlayNew.less
M less/common/overlays.less
R less/modules/images/uploads/chevronLeft.png
R less/modules/images/uploads/chevronRight.png
R less/modules/images/uploads/page1.png
R less/modules/images/uploads/page2.png
R less/modules/images/uploads/page3.png
M less/modules/tutorials.less
A less/modules/uploads/UploadTutorial.less
D less/specials/images/uploads/Tour_1.png
D less/specials/images/uploads/Tour_2.png
D less/specials/images/uploads/Tour_3.png
M less/specials/uploads.less
M less/variables.less
M templates/modules/tutorials/PageActionOverlay.html
D templates/specials/uploads/carousel.html
A templates/uploads/UploadTutorial.html
D templates/uploadsNew/LearnMoreOverlay.html
M templates/uploadsNew/PhotoUploadOverlay.html
A tests/javascripts/modules/uploads/test_UploadTutorial.js
D tests/javascripts/widgets/test_carousel.js
30 files changed, 369 insertions(+), 466 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 27f93cb..fd13321 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -199,10 +199,38 @@
),
// FIXME: merge into mobile.uploadsNew when mobile.uploads is gone
+ 'mobile.uploads.tutorial' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.stable',
+ 'mobile.templates',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/uploads/UploadTutorial.js',
+ ),
+ 'styles' => array(
+ 'less/modules/uploads/UploadTutorial.less',
+ ),
+ 'templates' => array(
+ 'uploads/UploadTutorial',
+ ),
+ 'messages' => array(
+ // UploadTutorial.js
+ 'mobile-frontend-first-upload-wizard-new-page-1-header',
+ 'mobile-frontend-first-upload-wizard-new-page-1',
+ 'mobile-frontend-first-upload-wizard-new-page-2-header',
+ 'mobile-frontend-first-upload-wizard-new-page-2',
+ 'mobile-frontend-first-upload-wizard-new-page-3-header',
+ 'mobile-frontend-first-upload-wizard-new-page-3',
+ 'mobile-frontend-first-upload-wizard-new-page-3-ok',
+ ),
+ ),
+
+ // FIXME: merge into mobile.uploadsNew when mobile.uploads is gone
'mobile.uploads.common' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mobile.stable',
'mobile.templates',
+ 'mobile.uploads.tutorial',
),
'scripts' => array(
'javascripts/modules/uploads/PhotoApi.js',
@@ -292,7 +320,6 @@
'mobile.uploads.common',
),
'scripts' => array(
- 'javascripts/modules/uploadsNew/LearnMoreOverlay.js',
'javascripts/modules/uploadsNew/PhotoUploadProgress.js',
'javascripts/modules/uploadsNew/PhotoUploadOverlay.js',
'javascripts/modules/uploadsNew/PhotoUploader.js',
@@ -303,14 +330,10 @@
'templates' => array(
'uploadsNew/PhotoUploadOverlay',
'uploadsNew/PhotoUploadProgress',
- 'uploadsNew/LearnMoreOverlay',
),
'messages' => array(
'mobile-frontend-photo-upload-success-article',
'mobile-frontend-photo-upload-error',
-
- // LearnMoreOverlay.js
- 'mobile-frontend-photo-ownership-confirm',
// PhotoUploadOverlay.js
'mobile-frontend-image-heading-describe' => array(
'parse' ),
@@ -318,9 +341,6 @@
'mobile-frontend-photo-ownership-help',
'mobile-frontend-photo-caption-placeholder',
'mobile-frontend-photo-submit',
- 'mobile-frontend-photo-ownership-bullet-one',
- 'mobile-frontend-photo-ownership-bullet-two',
- 'mobile-frontend-photo-ownership-bullet-three',
'mobile-frontend-photo-upload-error-file-type',
'mobile-frontend-photo-license' => array( 'parse' ),
@@ -855,32 +875,23 @@
'dependencies' => array(
'mobile.stable.styles',
'mobile.stable.common',
- 'mobile.uploads',
'mobile.templates',
+ // FIXME: remove when new uploads overlay in stable
+ 'mobile.uploads.tutorial',
),
'templates' => array(
- 'specials/uploads/carousel',
'specials/uploads/photo',
'specials/uploads/userGallery',
),
'messages' => array(
+ 'mobile-frontend-donate-image-nouploads',
'mobile-frontend-photo-upload-generic',
'mobile-frontend-donate-photo-upload-success',
'mobile-frontend-donate-photo-first-upload-success',
'mobile-frontend-listed-image-no-description',
'mobile-frontend-photo-upload-user-count',
- 'mobile-frontend-first-upload-wizard-new-page-1-header',
- 'mobile-frontend-first-upload-wizard-new-page-1',
- 'mobile-frontend-first-upload-wizard-new-page-2-header',
- 'mobile-frontend-first-upload-wizard-new-page-2',
- 'mobile-frontend-first-upload-wizard-new-page-3-header',
- 'mobile-frontend-first-upload-wizard-new-page-3',
- 'mobile-frontend-first-upload-wizard-new-page-3-ok',
- 'mobile-frontend-donate-image-nouploads',
),
'scripts' => array(
- 'javascripts/widgets/carousel.js',
- 'javascripts/specials/overlays/CarouselOverlay.js',
'javascripts/specials/uploads.js',
),
'position' => 'top',
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
index 83198e6..c677e6e 100644
--- a/javascripts/modules/tutorials/PageActionOverlay.js
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -5,8 +5,7 @@
PageActionOverlay = ContentOverlay.extend( {
template: M.template.get( 'modules/tutorials/PageActionOverlay'
),
defaults: {
- cancelMsg: mw.msg( 'cancel' ),
- className: 'slide active'
+ cancelMsg: mw.msg( 'cancel' )
}
} );
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index 30364dd..961d0fe 100644
--- a/javascripts/modules/uploads/PhotoUploaderButton.js
+++ b/javascripts/modules/uploads/PhotoUploaderButton.js
@@ -77,49 +77,58 @@
template: M.template.get( 'uploads/PhotoUploaderButton' ),
className: 'button photo',
- initialize: function( options ) {
- this._super( options );
- },
-
postRender: function() {
var self = this, $input = this.$( 'input' );
+
+ function handleFile( file ) {
+ var options = $.extend( {}, self.options, {
+ file: file,
+ parent: self
+ } ),
+ LoadingOverlay, loadingOverlay;
+
+ // FIXME: remove when new uploads overlay in
stable
+ if ( mw.config.get( 'wgMFMode' ) === 'stable' )
{
+ LoadingOverlay = M.require(
'LoadingOverlay' );
+ loadingOverlay = new LoadingOverlay();
+ loadingOverlay.show();
+
+ mw.loader.using( 'mobile.uploads',
function() {
+ var PhotoUploader = M.require(
'modules/uploads/PhotoUploader' );
+ loadingOverlay.hide();
+ new PhotoUploader( options );
+ } );
+ } else {
+ // make sure LoadingOverlayNew is
present
+ mw.loader.using( 'mobile.beta',
function() {
+ LoadingOverlay = M.require(
'LoadingOverlayNew' );
+ loadingOverlay = new
LoadingOverlay();
+ loadingOverlay.show();
+
+ mw.loader.using(
'mobile.uploadsNew', function() {
+ var PhotoUploader =
M.require( 'modules/uploadsNew/PhotoUploader' );
+ loadingOverlay.hide();
+ new PhotoUploader(
options );
+ } );
+ } );
+ }
+ }
+
+ if ( mw.config.get( 'wgMFMode' ) !== 'stable' &&
mw.config.get( 'wgUserEditCount' ) === 0 ) {
+ this.$el.on( M.tapEvent( 'click' ), function(
ev ) {
+ ev.preventDefault();
+ mw.loader.using(
'mobile.uploads.common', function() {
+ var UploadTutorial = M.require(
'modules/uploads/UploadTutorial' );
+ new UploadTutorial( {
fileButton: true } ).on( 'file', handleFile ).show();
+ } );
+ } );
+ }
$input.
// accept must be set via attr otherwise cannot
use camera on Android
attr( 'accept', 'image/*;' ).
on( 'change', function() {
- var options = $.extend( {},
self.options, {
- file: $input[0].files[0],
- parent: self
- } ),
- LoadingOverlay, loadingOverlay;
-
- // FIXME: remove when new uploads
overlay in stable
- if ( mw.config.get( 'wgMFMode' ) ===
'stable' ) {
- LoadingOverlay = M.require(
'LoadingOverlay' );
- loadingOverlay = new
LoadingOverlay();
- loadingOverlay.show();
-
- mw.loader.using(
'mobile.uploads', function() {
- var PhotoUploader =
M.require( 'modules/uploads/PhotoUploader' );
- loadingOverlay.hide();
- new PhotoUploader(
options );
- } );
- } else {
- // make sure LoadingOverlayNew
is present
- mw.loader.using( 'mobile.beta',
function() {
- LoadingOverlay =
M.require( 'LoadingOverlayNew' );
- loadingOverlay = new
LoadingOverlay();
- loadingOverlay.show();
-
- mw.loader.using(
'mobile.uploadsNew', function() {
- var
PhotoUploader = M.require( 'modules/uploadsNew/PhotoUploader' );
-
loadingOverlay.hide();
- new
PhotoUploader( options );
- } );
- } );
- }
-
+ handleFile( $input[0].files[0] );
// clear so that change event is fired
again when user selects the same file
$input.val( '' );
} );
diff --git a/javascripts/modules/uploads/UploadTutorial.js
b/javascripts/modules/uploads/UploadTutorial.js
new file mode 100644
index 0000000..9022197
--- /dev/null
+++ b/javascripts/modules/uploads/UploadTutorial.js
@@ -0,0 +1,66 @@
+( function( M, $ ) {
+
+ var Overlay = M.require( 'Overlay' ), UploadTutorial;
+
+ UploadTutorial = Overlay.extend( {
+ template: M.template.get( 'uploads/UploadTutorial' ),
+ className: 'mw-mf-overlay carousel tutorial',
+
+ defaults: {
+ pages: [
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1' )
+ },
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2-header' ),
+ text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2' )
+ },
+ {
+ caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-header' ),
+ button: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-3-ok' )
+ }
+ ],
+ fileButton: false
+ },
+
+ postRender: function( options ) {
+ var self = this, $input = this.$( 'input' );
+
+ this.page = 0;
+ this.totalPages = options.pages.length;
+ this.$( '.prev' ).on( M.tapEvent( 'click' ), $.proxy(
this, 'previous' ) );
+ this.$( '.next' ).on( M.tapEvent( 'click' ), $.proxy(
this, 'next' ) );
+ $input.
+ on( 'change', function() {
+ self.emit( 'file', $input[0].files[0] );
+ } ).
+ on( 'click', function() {
+ // need timeout for the file dialog to
open
+ setTimeout( $.proxy( self, 'hide' ), 0
);
+ } );
+ this._showCurrentPage();
+
+ this._super( options );
+ },
+
+ _showCurrentPage: function() {
+ this.$( '.slide' ).removeClass( 'active' ).eq(
this.page ).addClass( 'active' );
+ this.$( '.prev' ).toggle( this.page > 0 );
+ this.$( '.next' ).toggle( this.page < this.totalPages -
1 );
+ },
+
+ next: function() {
+ this.page += 1;
+ this._showCurrentPage();
+ },
+
+ previous: function() {
+ this.page -= 1;
+ this._showCurrentPage();
+ }
+ } );
+
+ M.define( 'modules/uploads/UploadTutorial', UploadTutorial );
+
+}( mw.mobileFrontend, jQuery ));
diff --git a/javascripts/modules/uploadsNew/LearnMoreOverlay.js
b/javascripts/modules/uploadsNew/LearnMoreOverlay.js
deleted file mode 100644
index 93270f3..0000000
--- a/javascripts/modules/uploadsNew/LearnMoreOverlay.js
+++ /dev/null
@@ -1,15 +0,0 @@
-( function( M ) {
- var OverlayNew = M.require( 'OverlayNew' ), LearnMoreOverlay;
- LearnMoreOverlay = OverlayNew.extend( {
- defaults: {
- confirmMessage: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
- },
- templatePartials: {
- content: M.template.get( 'uploadsNew/LearnMoreOverlay' )
- }
- } );
-
- M.define( 'modules/uploadsNew/LearnMoreOverlay', LearnMoreOverlay );
-
-}( mw.mobileFrontend ) );
-
diff --git a/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
b/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
index baa047f..8bac1b1 100644
--- a/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
+++ b/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
@@ -1,7 +1,7 @@
( function( M, $ ) {
var popup = M.require( 'notifications' ),
OverlayNew = M.require( 'OverlayNew' ),
- LearnMoreOverlay = M.require(
'modules/uploadsNew/LearnMoreOverlay' ),
+ UploadTutorial = M.require( 'modules/uploads/UploadTutorial' ),
ownershipMessage = mw.msg( 'mobile-frontend-photo-ownership',
mw.config.get( 'wgUserName' ), mw.user ),
PhotoUploadOverlay;
@@ -61,17 +61,8 @@
this.imageUrl = url;
$preview.removeClass( 'loading' );
- this.$( 'a.help' ).on( 'click', function( ev ) {
- ev.preventDefault(); // avoid setting #
- new LearnMoreOverlay( {
- parent: self,
- bulletPoints: [
- mw.msg(
'mobile-frontend-photo-ownership-bullet-one' ),
- mw.msg(
'mobile-frontend-photo-ownership-bullet-two' ),
- mw.msg(
'mobile-frontend-photo-ownership-bullet-three' )
- ],
- leadText: ownershipMessage
- } ).show();
+ this.$( '.help' ).on( 'click', function() {
+ new UploadTutorial( { parent: self } ).show();
self.log( { action: 'whatDoesThisMean' } );
} );
$( '<img>' ).
diff --git a/javascripts/specials/overlays/CarouselOverlay.js
b/javascripts/specials/overlays/CarouselOverlay.js
deleted file mode 100644
index ad9b673..0000000
--- a/javascripts/specials/overlays/CarouselOverlay.js
+++ /dev/null
@@ -1,20 +0,0 @@
-( function( M ) {
- var Overlay = M.require( 'Overlay' ),
- Carousel = M.require( 'widgets/carousel' ),
- CarouselOverlay = Overlay.extend( {
- template: '',
- className: 'overlay-carousel mw-mf-overlay',
- initialize: function( options ) {
- this.carousel = new Carousel( { pages:
options.pages } );
- this._super( options );
- },
- postRender: function( options ) {
- this.$el.empty();
- this.carousel.appendTo( this.$el );
- this._super( options );
- }
- } );
-
-M.define( 'overlays/CarouselOverlay', CarouselOverlay );
-
-}( mw.mobileFrontend ) );
\ No newline at end of file
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index d2222cd..52c4bed 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -4,7 +4,6 @@
popup = M.require( 'notifications' ),
Api = M.require( 'api' ).Api,
View = M.require( 'view' ),
- CarouselOverlay = M.require( 'overlays/CarouselOverlay' ),
corsUrl = mw.config.get( 'wgMFPhotoUploadEndpoint' ),
pageParams = mw.config.get( 'wgPageName' ).split( '/' ),
currentUserName = mw.config.get( 'wgUserName' ),
@@ -120,6 +119,7 @@
self.$end.remove();
if ( self.isEmpty() ) {
self.emit( 'empty' );
+ self.showEmptyMessage();
}
}
} ).fail( function() {
@@ -156,41 +156,22 @@
}
function init() {
- var $container, userGallery, emptyHandler;
+ var $container, userGallery;
userGallery = new PhotoList().appendTo( '#content_wrapper' );
- if ( currentUserName === userName ) {
- emptyHandler = function() {
- new CarouselOverlay( {
- pages: [
- {
- caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1-header' ),
- text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1' ),
- className: 'page-1
slide-image', id: 1
- },
- {
- caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2-header' ),
- text: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-2' ),
- className: 'page-2
slide-image', id: 2
- },
- {
- 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:
'photo-upload slide-image', id: 3
- }
- ]
- } ).show();
- };
- } else {
- emptyHandler = function() {
- userGallery.showEmptyMessage();
- };
- }
- userGallery.on( 'empty', emptyHandler );
if ( PhotoUploaderButton.isSupported && currentUserName ===
userName ) {
$container = $( '.ctaUploadPhoto' );
+ // FIXME: remove when new uploads overlay in stable
+ if ( mw.config.get( 'wgMFMode' ) === 'stable' ) {
+ userGallery.on( 'empty', function() {
+ console.log(111);
+ var UploadTutorial = M.require(
'modules/uploads/UploadTutorial' );
+ new UploadTutorial().show();
+ } );
+ }
+
new PhotoUploaderButton( {
buttonCaption: mw.msg(
'mobile-frontend-photo-upload-generic' ),
pageTitle: mw.config.get( 'wgTitle' ),
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
deleted file mode 100644
index 6e26568..0000000
--- a/javascripts/widgets/carousel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-( function( M, $ ) {
-
- var View = M.require( 'view' ), Carousel;
-
- // FIXME: the name Carousel is no longer accurate
- Carousel = View.extend( {
- template: M.template.get( 'specials/uploads/carousel' ),
- className: 'carousel tutorial slideable',
- postRender: function() {
- var self = this, $pages;
- $pages = this.$( '.slide' );
- this.page = 0;
- this.totalPages = $pages.length;
- this.$( 'ul li' ).on( 'click', function() {
- self.page = $( this ).index();
- self.showCurrentPage();
- } );
- this.showCurrentPage();
- this.$( 'button.prev' ).on( 'click', function() {
- self.previous();
- } );
- this.$( 'button.next' ).on( 'click', function() {
- self.next();
- } );
- },
- showCurrentPage: function() {
- this.$( '.slide' ).removeClass( 'active' ).removeClass(
'slider-left' ).removeClass( 'slider-right' );
- this.$( '.slide' ).eq( this.page - 1 ).addClass(
'slider-left' );
- this.$( '.slide' ).eq( this.page ).addClass( 'active' );
- this.$( '.slide' ).eq( this.page + 1 ).addClass(
'slider-right' );
- this.$( 'ul li' ).removeClass( 'active' ).
- eq( this.page ).addClass( 'active' );
- this.$( 'button' ).removeClass( 'active' );
- if ( this.page > 0 ) {
- this.$( 'button.prev' ).addClass( 'active' );
- }
- if ( this.page < this.totalPages - 1 ) {
- this.$( 'button.next' ).addClass( 'active' );
- }
- },
- next: function() {
- if ( this.page < this.totalPages - 1 ) {
- this.page += 1;
- }
- this.showCurrentPage();
- },
- previous: function() {
- if ( this.page > 0 ) {
- this.page -= 1;
- }
- this.showCurrentPage();
- }
- } );
-
- M.define( 'widgets/carousel', Carousel );
-
-}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 97596c9..040f65b 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -80,22 +80,6 @@
}
}
- // LearnMoreOverlay
- .informative {
- margin: 0 0 1em 16px;
- list-style: outside square;
-
- li {
- margin-bottom: .5em;
- }
- }
-
- // Got it button
- .confirm {
- display: block;
- margin: 1em auto;
- }
-
.license {
// FIXME: move this image?
background: url('../modules/images/cc-by-sa.png') left 4px
no-repeat;
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 634c434..2696b38 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -44,10 +44,6 @@
}
ul {
- li {
- text-align: left;
- }
-
// LearnMoreOverlay
&.informative {
margin: 0 0 1em 16px;
diff --git a/less/specials/images/uploads/chevron_left.png
b/less/modules/images/uploads/chevronLeft.png
similarity index 100%
rename from less/specials/images/uploads/chevron_left.png
rename to less/modules/images/uploads/chevronLeft.png
Binary files differ
diff --git a/less/specials/images/uploads/chevron_right.png
b/less/modules/images/uploads/chevronRight.png
similarity index 100%
rename from less/specials/images/uploads/chevron_right.png
rename to less/modules/images/uploads/chevronRight.png
Binary files differ
diff --git a/less/specials/images/uploads/SplashScreen1.png
b/less/modules/images/uploads/page1.png
similarity index 100%
rename from less/specials/images/uploads/SplashScreen1.png
rename to less/modules/images/uploads/page1.png
Binary files differ
diff --git a/less/specials/images/uploads/SplashScreen2.png
b/less/modules/images/uploads/page2.png
similarity index 100%
rename from less/specials/images/uploads/SplashScreen2.png
rename to less/modules/images/uploads/page2.png
Binary files differ
diff --git a/less/modules/images/tutorials/photos.png
b/less/modules/images/uploads/page3.png
similarity index 100%
rename from less/modules/images/tutorials/photos.png
rename to less/modules/images/uploads/page3.png
Binary files differ
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 92c90e9..1eb46a6 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,74 +1,33 @@
@import "../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;
+ padding: 1em @contentMarginLeft;
line-height: 1.4;
- font-size: 0.9em;
- background-color: @colorTutorial;
- color: white;
- height: 100%;
+ font-size: .9em;
+ background: @colorTutorial;
+ color: #fff;
+ text-align: center;
box-shadow: 0 1px 5px 0 rgba(117, 117, 117, .8);
- @imageHeight: 180px;
- .slide {
- text-align: center;
- background-size: auto @imageHeight;
- background-repeat: no-repeat;
- background-position: center -10px;
- padding: 10px 0;
- width: 100%;
-
- p {
- line-height: 1.4;
- margin: 0 0 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;
- // use background to override gradient in other buttons
- background: #fff;
- color: @colorTutorial;
- padding: 12px;
- border: none;
- font-weight: bold;
- }
-
- .cancel {
- background: none;
- color: white;
- }
+ p {
+ line-height: 1.4;
+ margin: 0 0 1em;
}
- .photo-upload {
- padding-top: (@imageHeight - 20);
- background-image: url(images/tutorials/photos.png);
+ button,
+ .button {
+ // FIXME: without this the cloaked input seems to interfere
making cancel button start upload
+ position: relative;
+ // use background to override gradient in other buttons
+ background: #fff;
+ color: @colorTutorial;
+ padding: 12px;
+ font-weight: bold;
}
- .editing {
- // The editing tutorial has no image
- padding-top: 20px;
+ .cancel.inline {
+ background: none;
+ color: #fff;
}
-
}
diff --git a/less/modules/uploads/UploadTutorial.less
b/less/modules/uploads/UploadTutorial.less
new file mode 100644
index 0000000..2197175
--- /dev/null
+++ b/less/modules/uploads/UploadTutorial.less
@@ -0,0 +1,122 @@
+@import "../../mixins.less";
+
+// 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;
+ }
+}
+
+.carousel {
+ @buttonWidth: 40px;
+
+ position: relative;
+ .box-sizing(border-box);
+ overflow: hidden;
+
+ > button {
+ text-indent: -9999px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: @buttonWidth;
+ bottom: 0;
+ z-index: 4;
+ background: 50% 50% no-repeat;
+ .background-size( auto, 20px );
+ // remove ugly outline
+ outline: none;
+
+ &.prev {
+ left: 0;
+ background-image:
url(../images/uploads/chevronLeft.png);
+ }
+
+ &.next {
+ right: 0;
+ background-image:
url(../images/uploads/chevronRight.png);
+ }
+ }
+
+ .slide {
+ @imageHeight: 180px;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ background: 50% 0 no-repeat;
+ .background-size(auto, @imageHeight);
+ display: none;
+ padding: 0 @buttonWidth;
+
+ &.active {
+ display: block;
+ }
+
+ strong {
+ display: block;
+ font-size: 1.1em;
+ margin: 0 0 1em;
+ }
+
+ &.slide-image {
+ padding-top: @imageHeight;
+ }
+
+ &:nth-child(1) {
+ background-image: url(../images/uploads/page1.png);
+ }
+
+ &:nth-child(2) {
+ background-image: url(../images/uploads/page2.png);
+ }
+
+ &:nth-child(3) {
+ background-image: url(../images/uploads/page3.png);
+ }
+ }
+}
+
+.animations {
+ .carousel {
+ .slide {
+ display: block;
+ .transform( translate3d(-100%, 0, 0) );
+ .transition-transform( .5s );
+
+ &.active {
+ .transform( none );
+ }
+
+ &.active ~ .slide {
+ .transform( translate3d(100%, 0, 0) );
+ }
+ }
+ }
+}
+
+html[dir="rtl"] .carousel > button {
+ .transform(rotate(180deg));
+}
+
+html[dir="rtl"].animations {
+ .carousel {
+ .slide {
+ .transform( translate3d(100%, 0, 0) );
+
+ &.active {
+ .transform( none );
+ }
+
+ &.active ~ .slide {
+ .transform( translate3d(-100%, 0, 0) );
+ }
+ }
+ }
+}
diff --git a/less/specials/images/uploads/Tour_1.png
b/less/specials/images/uploads/Tour_1.png
deleted file mode 100644
index 3c5dc87..0000000
--- a/less/specials/images/uploads/Tour_1.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/images/uploads/Tour_2.png
b/less/specials/images/uploads/Tour_2.png
deleted file mode 100644
index 941a412..0000000
--- a/less/specials/images/uploads/Tour_2.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/images/uploads/Tour_3.png
b/less/specials/images/uploads/Tour_3.png
deleted file mode 100644
index 0f207ea..0000000
--- a/less/specials/images/uploads/Tour_3.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 7d8770c..f6ff83a 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,75 +1,15 @@
@import "../mixins.less";
-/* carousel css */
-.overlay-carousel {
- height: 100%;
-}
+ul.mobileUserGallery {
+ margin: 20px @contentMarginRight 0 @contentMarginLeft;
-// FIXME: merge some of this with .tutorial
-.carousel {
- @buttonPadding: 4px;
+ li {
+ text-align: center;
+ padding-bottom: 20px;
- position: relative;
- .box-sizing( border-box );
-
- > button {
- padding: 0;
- visibility: hidden;
- border: none;
- text-indent: -9999px;
- overflow: hidden;
- position: absolute;
- top: 0;
- width: @searchBarPaddingLeft;
- bottom: 0;
-
- &.prev {
- left: @buttonPadding;
- background: url(images/uploads/chevron_left.png) 20%
center no-repeat;
- .background-size( auto, 20px );
- }
-
- &.next {
- right: @buttonPadding;
- background: url(images/uploads/chevron_right.png) 80%
center no-repeat;
- .background-size( auto, 20px );
- }
-
- &.active {
- visibility: visible;
- }
- }
-
- .slide {
- left: 100%;
- visibility: hidden;
-
- &.active {
- visibility: visible;
- left: @contentMarginLeft;
- }
-
- p, strong {
- line-height: 1.4;
- }
-
- strong {
- display: block;
- font-size: 1.1em;
- margin: 0 26px 16px;
- }
-
- &.slide-image {
- padding-top: 146px;
- }
-
- // 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);
+ p { // description
+ color: #565656;
+ line-height: 1.2;
}
}
}
@@ -85,56 +25,5 @@
font-size: 1.25em;
margin: 0 0 .5em;
text-align: center;
- }
-}
-
-// Make things slide!
-.slideable {
- width: 100%;
- overflow: hidden;
- .slider {
- position: absolute;
- &.slider-left {
- left: -100%;
- }
- &.active {
- left: 0;
- position: relative;
- }
- &.slider-right {
- left: 100%;
- }
- }
-
-}
-
-.animations {
- .slideable {
- .slider {
- left: 0;
- .transition( .5s );
-
- &.slider-left {
- .transform( translate3d(-100%, 0, 0) )
- }
-
- &.slider-right {
- .transform( translate3d(100%, 0, 0) )
- }
- }
- }
-}
-
-ul.mobileUserGallery {
- margin: 20px @contentMarginRight 0 @contentMarginLeft;
-
- li {
- text-align: center;
- padding-bottom: 20px;
-
- p { // description
- color: #565656;
- line-height: 1.2;
- }
}
}
diff --git a/less/variables.less b/less/variables.less
index 1469c20..1ca1d09 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -21,6 +21,7 @@
@redBase : #CC0000;
@overlayContentBackground: white;
@mainMenuBackgroundColor: #4E4E4E;
+@colorTutorial: #006398;
@overlayHeadingIndent: 0.4em;
@ribbonopencolor:#4B7DCE;
diff --git a/templates/modules/tutorials/PageActionOverlay.html
b/templates/modules/tutorials/PageActionOverlay.html
index 3805b24..d3b290e 100644
--- a/templates/modules/tutorials/PageActionOverlay.html
+++ b/templates/modules/tutorials/PageActionOverlay.html
@@ -1,9 +1,7 @@
<div class="tutorial">
- <div class="{{className}}">
- <p>{{summary}}</p>
- <div class="button-bar-centered">
- <button class="cancel inline">{{cancelMsg}}</button>
- <div class="button actionable
cloaked">{{confirmMsg}}</div>
- </div>
+ <p>{{summary}}</p>
+ <div class="button-bar-centered">
+ <button class="cancel inline">{{cancelMsg}}</button>
+ <button class="actionable">{{confirmMsg}}</button>
</div>
</div>
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
deleted file mode 100644
index ee1cdab..0000000
--- a/templates/specials/uploads/carousel.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<button class='prev'></button>
-{{#pages}}
-<div class="slide {{className}} slider">
- <strong>{{caption}}</strong>
- <p>{{text}}</p>
- {{#cancel}}<button class="cancel
actionable">{{cancel}}</button>{{/cancel}}
-</div>
-{{/pages}}
-<button class='next'></button>
diff --git a/templates/uploads/UploadTutorial.html
b/templates/uploads/UploadTutorial.html
new file mode 100644
index 0000000..5f2ac5a
--- /dev/null
+++ b/templates/uploads/UploadTutorial.html
@@ -0,0 +1,20 @@
+<button class="prev"></button>
+<ul>
+ {{#pages}}
+ <li class="slide slide-image">
+ <strong>{{caption}}</strong>
+ <p>{{text}}</p>
+ {{#button}}
+ {{#fileButton}}
+ <div class="button cloaked">
+ {{button}}<input name="file" type="file">
+ </div>
+ {{/fileButton}}
+ {{^fileButton}}
+ <button class="cancel">{{button}}</button>
+ {{/fileButton}}
+ {{/button}}
+ </li>
+ {{/pages}}
+</ul>
+<button class="next"></button>
diff --git a/templates/uploadsNew/LearnMoreOverlay.html
b/templates/uploadsNew/LearnMoreOverlay.html
deleted file mode 100644
index 08ff5e5..0000000
--- a/templates/uploadsNew/LearnMoreOverlay.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="content">
- {{#leadText}}
- <p>{{leadText}}</p>
- {{/leadText}}
-
- <ul class="informative">
- {{#bulletPoints}}
- <li>{{{.}}}</li>
- {{/bulletPoints}}
- </ul>
- <button class="confirm">{{confirmMessage}}</button>
-</div>
diff --git a/templates/uploadsNew/PhotoUploadOverlay.html
b/templates/uploadsNew/PhotoUploadOverlay.html
index a53f3b2..781f955 100644
--- a/templates/uploadsNew/PhotoUploadOverlay.html
+++ b/templates/uploadsNew/PhotoUploadOverlay.html
@@ -1,6 +1,6 @@
<div class="content">
<div class="preview loading"></div>
- <p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
+ <p>{{ownerStatement}} <button class="help inline">{{help}}</button></p>
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
<p class="license">{{{license}}}</p>
</div>
diff --git a/tests/javascripts/modules/uploads/test_UploadTutorial.js
b/tests/javascripts/modules/uploads/test_UploadTutorial.js
new file mode 100644
index 0000000..f9a9bd7
--- /dev/null
+++ b/tests/javascripts/modules/uploads/test_UploadTutorial.js
@@ -0,0 +1,36 @@
+( function( M ) {
+
+ var UploadTutorial = M.require( 'modules/uploads/UploadTutorial' ),
uploadTutorial;
+
+ QUnit.module( 'MobileFrontend UploadTutorial', {
+ setup: function() {
+ uploadTutorial = new UploadTutorial();
+ }
+ } );
+
+ QUnit.test( '#initialize, with cancel button', 2, function( assert ) {
+ assert.ok( uploadTutorial.$( '.cancel' ).length, 'Has cancel
button' );
+ assert.ok( !uploadTutorial.$( 'input' ).length, 'Has no file
button' );
+ } );
+
+ QUnit.test( '#initialize, with file button', 2, function( assert ) {
+ uploadTutorial = new UploadTutorial( { fileButton: true } );
+ assert.ok( uploadTutorial.$( 'input' ).length, 'Has file
button' );
+ assert.ok( !uploadTutorial.$( '.cancel' ).length, 'Has no
cancel button' );
+ } );
+
+ QUnit.test( '#next', 3, function( assert ) {
+ assert.ok( uploadTutorial.$( '.slide' ).eq( 0 ).hasClass(
'active' ), 'Initialises to page 0' );
+ uploadTutorial.next();
+ assert.ok( !uploadTutorial.$( '.slide' ).eq( 0 ).hasClass(
'active' ), 'Deactivates page 0' );
+ assert.ok( uploadTutorial.$( '.slide' ).eq( 1 ).hasClass(
'active' ), 'Progresses to page 1' );
+ } );
+
+ QUnit.test( '#previous', 2, function( assert ) {
+ uploadTutorial.next();
+ uploadTutorial.previous();
+ assert.ok( !uploadTutorial.$( '.slide' ).eq( 1 ).hasClass(
'active' ), 'Deactivates page 1' );
+ assert.ok( uploadTutorial.$( '.slide' ).eq( 0 ).hasClass(
'active' ), 'Back to page 1' );
+ } );
+
+}( mw.mobileFrontend ) );
diff --git a/tests/javascripts/widgets/test_carousel.js
b/tests/javascripts/widgets/test_carousel.js
deleted file mode 100644
index 4112b69..0000000
--- a/tests/javascripts/widgets/test_carousel.js
+++ /dev/null
@@ -1,46 +0,0 @@
-( function( M ) {
-
- var Carousel = M.require( 'widgets/carousel' );
-
- QUnit.module( 'MobileFrontend Carousel', {
- setup: function() {
- this.c = new Carousel( {
- pages: [
- { text: 'test-1', className: 'page-1',
id: 1 },
- { text: 'test-2', className: 'page-2',
id: 2 },
- { text: 'test-3', className: 'page-3',
id: 3 }
- ]
- } );
- }
- } );
-
- QUnit.test( '#next', 5, function() {
- strictEqual( this.c.totalPages, 3, 'There are 3 pages in the
carousel' );
- strictEqual( this.c.page, 0, 'Initialises to page 0' );
- this.c.next();
- strictEqual( this.c.page, 1, 'Now page 1' );
- this.c.next();
- strictEqual( this.c.page, 2, 'Now page 2' );
- this.c.next();
- strictEqual( this.c.page, 2, 'Still page 2 (no more pages)' );
- } );
-
- QUnit.test( '#prev', 4, function() {
- strictEqual( this.c.page, 0, 'Initialises to page 0' );
- this.c.previous();
- strictEqual( this.c.page, 0, 'No previous page' );
- this.c.next();
- strictEqual( this.c.page, 1, 'Now page 1' );
- this.c.previous();
- strictEqual( this.c.page, 0, 'Back on page 0' );
- } );
-
- QUnit.test( '#showCurrentPage', 3, function() {
- strictEqual( this.c.page, 0, 'Initialises to page 0' );
- this.c.next();
- this.c.showCurrentPage();
- strictEqual( this.c.$( '.slide' ).eq( 0 ).hasClass( 'active' ),
false, 'First page is hidden' );
- strictEqual( this.c.$( '.slide' ).eq( 1 ).hasClass( 'active' ),
true, 'Second page is visible' );
- } );
-
-}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/93014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I53d72eb1641e1b253ef5b8bb3832918fc654070a
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
