JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/72649
Change subject: Make photo upload overlay look consistent with the editor
......................................................................
Make photo upload overlay look consistent with the editor
Move the license below the buttons. In the process make the photo
preview an overlay.
Change-Id: I00010926affb48fa3bda69d08e1452d821941350
---
M javascripts/common/uploads/PhotoUploader.js
M javascripts/common/uploads/PhotoUploaderPreview.js
M less/common/overlays.less
M less/modules/editor.less
M less/modules/mf-photo.less
M stylesheets/common/overlays.css
M stylesheets/modules/editor.css
M stylesheets/modules/mf-photo.css
M templates/photoUploadPreview.html
9 files changed, 58 insertions(+), 77 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/49/72649/1
diff --git a/javascripts/common/uploads/PhotoUploader.js
b/javascripts/common/uploads/PhotoUploader.js
index b4f252c..5379fb3 100644
--- a/javascripts/common/uploads/PhotoUploader.js
+++ b/javascripts/common/uploads/PhotoUploader.js
@@ -135,7 +135,6 @@
// nag if never nagged and shouldNag
and then keep nagging (3 times)
if ( ( nagCount === 0 && shouldNag ) ||
( nagCount > 0 && nagCount < 3 ) ) {
// FIXME: possibly set
self.preview.parent = nagOverlay when nagOverlay is present
- // and when
PhotoUploaderPreview is rewritten as an overlay
nagOverlay =
self._showNagOverlay( nagCount );
} else {
self._showPreview();
@@ -203,7 +202,7 @@
self._submit();
} );
- self.preview.overlay.show();
+ self.preview.show();
// skip the URL bar if possible
window.scrollTo( 0, 1 );
},
@@ -215,7 +214,7 @@
progressPopup = new PhotoUploadProgress();
this.emit( 'start' );
- this.preview.overlay.hide();
+ this.preview.hide();
popup.show( progressPopup.$el, 'locked noButton
loading' );
progressPopup.on( 'cancel', function() {
api.abort();
diff --git a/javascripts/common/uploads/PhotoUploaderPreview.js
b/javascripts/common/uploads/PhotoUploaderPreview.js
index 82ca588..9f9bdce 100644
--- a/javascripts/common/uploads/PhotoUploaderPreview.js
+++ b/javascripts/common/uploads/PhotoUploaderPreview.js
@@ -1,12 +1,11 @@
( function( M, $ ) {
- var View = M.require( 'view' ),
- popup = M.require( 'notifications' ),
+ var popup = M.require( 'notifications' ),
Overlay = M.require( 'Overlay' ),
LearnMoreOverlay = M.require( 'uploads/LearnMoreOverlay' ),
ownershipMessage = mw.msg( 'mobile-frontend-photo-ownership',
mw.config.get( 'wgUserName' ), mw.user ),
PhotoUploaderPreview;
- PhotoUploaderPreview = View.extend( {
+ PhotoUploaderPreview = Overlay.extend( {
defaults: {
loadingMessage: mw.msg( 'mobile-frontend-image-loading'
),
license: mw.msg( 'mobile-frontend-photo-license' ),
@@ -17,6 +16,8 @@
ownerStatement: ownershipMessage
},
+ className: 'mw-mf-overlay photo-overlay',
+
template: M.template.get( 'photoUploadPreview' ),
initialize: function( options ) {
@@ -25,20 +26,20 @@
},
postRender: function() {
- var self = this,
- $overlay, $description, $submitButton;
+ var self = this, $description, $submitButton;
- this.overlay = new Overlay( {
- content: $( '<div>' ).html( this.$el ).html()
+ this._super();
+
+ this.$description = $description = this.$( 'textarea' );
+ $submitButton = this.$( '.submit' ).on( 'click',
function() {
+ self.emit( 'submit' );
} );
- $overlay = this.overlay.$el;
-
- $description = $overlay.find( 'textarea' );
- $submitButton = $overlay.find( 'button.submit' );
- this.$description = $description;
+ this.$( '.cancel' ).on( 'click', function() {
+ self.emit( 'cancel' );
+ } );
// make license links open in separate tabs
- $overlay.find( '.license a' ).attr( 'target', '_blank'
);
+ this.$( '.license a' ).attr( 'target', '_blank' );
// use input event too, Firefox doesn't fire keyup on
many devices:
// https://bugzilla.mozilla.org/show_bug.cgi?id=737658
$description.on( 'keyup input', function() {
@@ -47,13 +48,6 @@
} else {
$submitButton.attr( 'disabled', true );
}
- } );
-
- $submitButton.on( 'click', function() {
- self.emit( 'submit' );
- } );
- $overlay.find( 'button.cancel' ).on( 'click',
function() {
- self.emit( 'cancel' );
} );
},
@@ -65,10 +59,10 @@
var self = this, $img;
this.imageUrl = url;
- this.overlay.$( '.loading' ).remove();
- this.overlay.$( 'a.help' ).on( 'click', function( ev ) {
+ this.$( '.loading' ).remove();
+ this.$( 'a.help' ).on( 'click', function( ev ) {
ev.preventDefault(); // avoid setting #
- var overlay = new LearnMoreOverlay( {
+ new LearnMoreOverlay( {
parent: self.overlay,
bulletPoints: [
mw.msg(
'mobile-frontend-photo-ownership-bullet-one' ),
@@ -76,16 +70,15 @@
mw.msg(
'mobile-frontend-photo-ownership-bullet-three' )
],
leadText: ownershipMessage
- } );
- overlay.show();
+ } ).show();
self.log( { action: 'whatDoesThisMean' } );
} );
- $img = $( '<img>' ).attr( 'src', url ).prependTo(
this.overlay.$( '.photoPreview' ) );
+ $img = $( '<img>' ).attr( 'src', url ).prependTo(
this.$( '.content' ) );
// When using a bad filetype close the overlay
$img.on( 'error', function() {
popup.show( mw.msg(
'mobile-frontend-photo-upload-error-file-type' ), 'toast error' );
- self.overlay.hide();
+ self.hide();
} );
}
} );
diff --git a/less/common/overlays.less b/less/common/overlays.less
index 8ea8b9f..ba65c1a 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -115,6 +115,16 @@
font-size: .9em;
text-align: left;
}
+
+ .license {
+ // FIXME: move this image?
+ background: url('../modules/images/cc-by-sa.png') 0
.2em no-repeat;
+ background-size: auto 16px;
+ padding: 0 0 0 55px;
+ margin-bottom: 1.2em;
+ color: #707070;
+ font-size: .75em !important;
+ }
}
.mw-mf-overlay-footer,
diff --git a/less/modules/editor.less b/less/modules/editor.less
index f1bdf3a..38235fc 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -52,14 +52,6 @@
padding-bottom: 15em;
}
- .license {
- background: url('images/cc-by-sa.png') 0 .2em no-repeat;
- background-size: auto 16px;
- padding: 0 0 0 55px;
- color: #707070;
- font-size: .75em !important;
- }
-
.buttonBar {
box-shadow: 0 -10px 10px 0 #fff;
}
diff --git a/less/modules/mf-photo.less b/less/modules/mf-photo.less
index 511020f..378b8b1 100644
--- a/less/modules/mf-photo.less
+++ b/less/modules/mf-photo.less
@@ -33,10 +33,12 @@
margin-bottom: 10px;
}
-.photoPreview {
+.photo-overlay {
@height: 90px;
- padding-bottom: 70px !important;
+ .content {
+ padding-bottom: 11em !important;
+ }
.help {
display: block;
@@ -53,16 +55,6 @@
padding: 0 0 0 48px;
margin: 0;
line-height: @height;
- }
-
- .license {
- background: url('images/cc-by-sa.png') no-repeat;
- background-size: auto 22px;
- padding: 26px 0 0;
- margin: 1em 0;
- color: #707070;
- font-size: .75em;
- line-height: 150%;
}
textarea {
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index b7c1513..5e429ed 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -92,6 +92,14 @@
font-size: .9em;
text-align: left;
}
+.mw-mf-overlay .buttonBar .license {
+ background: url('../modules/images/cc-by-sa.png') 0 0.2em no-repeat;
+ background-size: auto 16px;
+ padding: 0 0 0 55px;
+ margin-bottom: 1.2em;
+ color: #707070;
+ font-size: .75em !important;
+}
.mw-mf-overlay .mw-mf-overlay-footer,
.mw-mf-overlay .mw-mf-overlay-header {
padding: 4px 8px 4px 23px;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index f855129..fc40053 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -39,13 +39,6 @@
.editor-overlay .preview {
padding-bottom: 15em;
}
-.editor-overlay .license {
- background: url('images/cc-by-sa.png') 0 0.2em no-repeat;
- background-size: auto 16px;
- padding: 0 0 0 55px;
- color: #707070;
- font-size: .75em !important;
-}
.editor-overlay .buttonBar {
box-shadow: 0 -10px 10px 0 #ffffff;
}
diff --git a/stylesheets/modules/mf-photo.css b/stylesheets/modules/mf-photo.css
index 55a65ff..8b54d87 100644
--- a/stylesheets/modules/mf-photo.css
+++ b/stylesheets/modules/mf-photo.css
@@ -32,38 +32,29 @@
display: block;
margin-bottom: 10px;
}
-.photoPreview {
- padding-bottom: 70px !important;
+.photo-overlay .content {
+ padding-bottom: 11em !important;
}
-.photoPreview .help {
+.photo-overlay .help {
display: block;
}
-.photoPreview img {
+.photo-overlay img {
height: 90px;
float: left;
margin: 0 8px 8px 0;
}
-.photoPreview .loading {
+.photo-overlay .loading {
background-position: 0 50%;
padding: 0 0 0 48px;
margin: 0;
line-height: 90px;
}
-.photoPreview .license {
- background: url('images/cc-by-sa.png') no-repeat;
- background-size: auto 22px;
- padding: 26px 0 0;
- margin: 1em 0;
- color: #707070;
- font-size: .75em;
- line-height: 150%;
-}
-.photoPreview textarea {
+.photo-overlay textarea {
width: 100%;
height: 6em;
}
-.photoPreview textarea::-webkit-input-placeholder,
-.photoPreview textarea::-moz-placeholder {
+.photo-overlay textarea::-webkit-input-placeholder,
+.photo-overlay textarea::-moz-placeholder {
text-align: center;
line-height: 6em;
}
diff --git a/templates/photoUploadPreview.html
b/templates/photoUploadPreview.html
index 5508c60..bf660b8 100644
--- a/templates/photoUploadPreview.html
+++ b/templates/photoUploadPreview.html
@@ -1,10 +1,13 @@
-<div class="content photoPreview">
+<div class="header">
+ <button class="cancel">{{closeMsg}}</button>
+</div>
+<div class="content">
<p class="loading">{{loadingMessage}}</p>
<p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
- <div class="license">{{{license}}}</div>
</div>
<div class="position-fixed buttonBar">
- <button class="cancel">{{cancelButton}}</button>
+ <button class="cancel inline">{{cancelButton}}</button>
<button class="submit" disabled>{{submitButton}}</button>
+ <p class="license">{{{license}}}</p>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/72649
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I00010926affb48fa3bda69d08e1452d821941350
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
