JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/92787
Change subject: Story 1280 (1/2): Overhaul of image uploading overlay design
......................................................................
Story 1280 (1/2): Overhaul of image uploading overlay design
* Separate styles for the new overlay.
* Use LoadingOverlayNew during dynamic loading of new uploading overlay.
* Change license copy from "By clicking Submit..." to "By continuing"
since the new upload button has no caption.
* Change new overlay header CSS to display: table for better
flexibility.
Change-Id: Ie00b8d76caae882ae27e726478d1662fcced63d6
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/common/ContentOverlay.js
M javascripts/common/Overlay.js
M javascripts/common/OverlayNew.js
M javascripts/modules/uploads/PhotoUploaderButton.js
M javascripts/modules/uploadsNew/LearnMoreOverlay.js
R javascripts/modules/uploadsNew/PhotoUploadOverlay.js
M javascripts/modules/uploadsNew/PhotoUploadProgress.js
M javascripts/modules/uploadsNew/PhotoUploader.js
M less/common/OverlayNew.less
M less/common/common-js.less
A less/modules/images/upload.png
M less/modules/uploads/PhotoUploaderButton.less
M less/modules/uploadsNew/PhotoUploadOverlay.less
M templates/OverlayNew.html
A templates/uploadsNew/PhotoUploadOverlay.html
M templates/uploadsNew/PhotoUploadProgress.html
D templates/uploadsNew/PhotoUploaderPreview.html
19 files changed, 221 insertions(+), 147 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/87/92787/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 15d31e9..dc15ff9 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -12,6 +12,8 @@
$messages = array();
$messages['en'] = array (
+ 'mobile-frontend-yes' => 'Yes',
+ 'mobile-frontend-no' => 'No',
// Random
'mobilefrontend-random-explain' => 'Does this random page interest
you?',
'mobilefrontend-random-cancel' => 'Let me read!',
@@ -264,13 +266,16 @@
'mobile-frontend-photo-upload-error-file-type' => 'Please only upload
images.',
'mobile-frontend-photo-upload-error-filename' => 'Error, please provide
a more descriptive summary.',
'mobile-frontend-photo-upload-success-article' => 'Success! Your image
is now live on this page.',
- 'mobile-frontend-photo-license' => 'By clicking "Submit", you agree to
our [//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to
release your image under the [//creativecommons.org/licenses/by-sa/3.0/
Creative Commons Attribution-ShareAlike 3.0 License].',
+ 'mobile-frontend-photo-license' => 'By continuing, you agree to our
[//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to release
your image under the [//creativecommons.org/licenses/by-sa/3.0/ Creative
Commons Attribution-ShareAlike 3.0 License].',
'mobile-frontend-photo-submit' => 'Submit',
'mobile-frontend-photo-cancel' => 'Cancel',
'mobile-frontend-photo-upload-user-count' =>
'{{PLURAL:$1|<span>1</span> upload|<span>$1</span> uploads}}',
'mobile-frontend-photo-upload-user-count-over-limit' => '500+ uploads',
'mobile-frontend-photo-upload-cta' => 'Please login or sign up to add
an image.',
'mobile-frontend-photo-upload-login' => 'You must be logged in to add
an image.',
+ 'mobile-frontend-image-heading-describe' => "'''Describe''' image",
+ 'mobile-frontend-image-uploading' => "'''Uploading''' image...",
+ 'mobile-frontend-image-cancel-confirm' => "'''Cancel''' upload?",
// edit
'mobile-frontend-editor-undo-unsupported' => 'Undo is not currently
supported on mobile devices.',
@@ -376,6 +381,8 @@
* @author 아라
*/
$messages['qqq'] = array(
+ 'mobile-frontend-yes' => 'Generic "yes" answer to confirmation
questions.',
+ 'mobile-frontend-no' => 'Generic "no" answer to confirmation
questions.',
'mobilefrontend-random-explain' => 'Asks if the reader is happy with
the random page they were given.
See also:
@@ -811,6 +818,9 @@
Used when the user is not logged in.
{{Related|Mobile-frontend-login}}',
+ 'mobile-frontend-image-heading-describe' => 'A heading instructing the
user to describe uploaded image.',
+ 'mobile-frontend-image-uploading' => 'A message telling the user that
an image is being uploaded.',
+ 'mobile-frontend-image-cancel-confirm' => 'A question asking if the
user wants to cancel an upload.',
'mobile-frontend-editor-undo-unsupported' => 'Shown when user attempts
to do an undo which is currently not supported.',
'mobile-frontend-editor-newpage-prompt' => "Message shown when a page
doesn't exist.",
'mobile-frontend-editor-disabled' => 'Toast message that appears when a
user is unable to edit a page and clicks edit icon',
diff --git a/includes/Resources.php b/includes/Resources.php
index 66ea375..d8f97c9 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -253,6 +253,7 @@
'mobile-frontend-photo-ownership-confirm',
// PhotoUploaderPreview.js
+ 'mobile-frontend-photo-license' => array( 'parse' ),
'mobile-frontend-photo-ownership',
'mobile-frontend-photo-ownership-help',
'mobile-frontend-photo-caption-placeholder',
@@ -270,7 +271,6 @@
'mobile-frontend-image-uploading-cancel',
// NagOverlay.js
- 'mobile-frontend-photo-license' => array( 'parse' ),
'mobile-frontend-photo-nag-1-bullet-1-heading',
'mobile-frontend-photo-nag-1-bullet-1-text' => array(
'parse' ),
'mobile-frontend-photo-nag-1-bullet-2-heading',
@@ -295,11 +295,14 @@
'scripts' => array(
'javascripts/modules/uploadsNew/LearnMoreOverlay.js',
'javascripts/modules/uploadsNew/PhotoUploadProgress.js',
-
'javascripts/modules/uploadsNew/PhotoUploaderPreview.js',
+ 'javascripts/modules/uploadsNew/PhotoUploadOverlay.js',
'javascripts/modules/uploadsNew/PhotoUploader.js',
),
+ 'styles' => array(
+ 'less/modules/uploadsNew/PhotoUploadOverlay.less',
+ ),
'templates' => array(
- 'uploadsNew/PhotoUploaderPreview',
+ 'uploadsNew/PhotoUploadOverlay',
'uploadsNew/PhotoUploadProgress',
'uploadsNew/LearnMoreOverlay',
),
@@ -310,22 +313,23 @@
// LearnMoreOverlay.js
'mobile-frontend-photo-ownership-confirm',
- // PhotoUploaderPreview.js
+ // PhotoUploadOverlay.js
+ 'mobile-frontend-image-heading-describe' => array(
'parse' ),
+ 'mobile-frontend-photo-license' => array( 'parse' ),
'mobile-frontend-photo-ownership',
'mobile-frontend-photo-ownership-help',
'mobile-frontend-photo-caption-placeholder',
- 'mobile-frontend-image-loading',
'mobile-frontend-photo-submit',
- 'mobile-frontend-photo-cancel',
'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',
// PhotoUploadProgress.js
- 'mobile-frontend-image-uploading-wait',
- 'mobile-frontend-image-uploading-long',
- 'mobile-frontend-image-uploading-cancel',
+ 'mobile-frontend-image-uploading' => array( 'parse' ),
+ 'mobile-frontend-image-cancel-confirm' => array(
'parse' ),
+ 'mobile-frontend-yes',
+ 'mobile-frontend-no',
),
),
@@ -391,6 +395,7 @@
),
'scripts' => array(
'javascripts/common/OverlayNew.js',
+ 'javascripts/common/LoadingOverlayNew.js',
'javascripts/modules/mf-toggle-dynamic.js',
'javascripts/modules/talk/talk.js',
'javascripts/modules/search/pageImages.js',
diff --git a/javascripts/common/ContentOverlay.js
b/javascripts/common/ContentOverlay.js
index 2f5b2e2..788aa31 100644
--- a/javascripts/common/ContentOverlay.js
+++ b/javascripts/common/ContentOverlay.js
@@ -4,6 +4,7 @@
ContentOverlay = Overlay.extend( {
fullScreen: false,
+ closeOnContentTap: true,
appendTo: '#mw-mf-page-center',
postRender: function( options ) {
this._super( options );
diff --git a/javascripts/common/Overlay.js b/javascripts/common/Overlay.js
index 3ab8e6e..917f787 100644
--- a/javascripts/common/Overlay.js
+++ b/javascripts/common/Overlay.js
@@ -8,6 +8,7 @@
template: M.template.get( 'overlay' ),
className: 'mw-mf-overlay',
closeOnBack: false,
+ closeOnContentTap: false,
fullScreen: true,
// use '#mw-mf-viewport' rather than 'body' - for some reasons
this has
// odd consequences on Opera Mobile (see bug 52361)
@@ -60,13 +61,17 @@
this.$el.appendTo( this.appendTo );
this.scrollTop = document.body.scrollTop;
+
if ( this.fullScreen ) {
$( 'html' ).addClass( 'overlay-enabled' );
// skip the URL bar if possible
window.scrollTo( 0, 1 );
- } else {
+ }
+
+ if ( this.closeOnContentTap ) {
$( '#mw-mf-page-center' ).one( M.tapEvent(
'click' ), $.proxy( this, 'hide' ) );
}
+
$( 'body' ).removeClass( 'navigation-enabled' );
},
hide: function() {
diff --git a/javascripts/common/OverlayNew.js b/javascripts/common/OverlayNew.js
index 45b4242..2fac641 100644
--- a/javascripts/common/OverlayNew.js
+++ b/javascripts/common/OverlayNew.js
@@ -4,7 +4,7 @@
var Overlay = M.require( 'Overlay' ),
OverlayNew = Overlay.extend( {
className: 'overlay',
- template: M.template.get( 'OverlayNew' ),
+ template: M.template.get( 'OverlayNew' )
} );
M.define( 'OverlayNew', OverlayNew );
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index c3dcbf8..eb413d9 100644
--- a/javascripts/modules/uploads/PhotoUploaderButton.js
+++ b/javascripts/modules/uploads/PhotoUploaderButton.js
@@ -2,7 +2,6 @@
var View = M.require( 'view' ),
popup = M.require( 'notifications' ),
CtaDrawer = M.require( 'CtaDrawer' ),
- LoadingOverlay = M.require( 'LoadingOverlay' ),
PhotoUploaderButton,
LeadPhotoUploaderButton;
@@ -110,22 +109,31 @@
file: $input[0].files[0],
parent: self
} ),
- loadingOverlay = new
LoadingOverlay();
-
- loadingOverlay.show();
+ 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 {
- mw.loader.using(
'mobile.uploadsNew', function() {
- var PhotoUploader =
M.require( 'modules/uploadsNew/PhotoUploader' );
- loadingOverlay.hide();
- new PhotoUploader(
options );
+ // 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 );
+ } );
} );
}
@@ -149,7 +157,7 @@
popup.show( mw.msg(
'mobile-frontend-photo-upload-success-article' ), 'toast' );
// just in case, LeadPhoto should be
loaded by now anyway
- mw.loader.using( 'mobile.uploads',
function() {
+ mw.loader.using(
'mobile.uploads.common', function() {
var LeadPhoto = M.require(
'modules/uploads/LeadPhoto' );
new LeadPhoto( {
diff --git a/javascripts/modules/uploadsNew/LearnMoreOverlay.js
b/javascripts/modules/uploadsNew/LearnMoreOverlay.js
index abab12c..93270f3 100644
--- a/javascripts/modules/uploadsNew/LearnMoreOverlay.js
+++ b/javascripts/modules/uploadsNew/LearnMoreOverlay.js
@@ -1,6 +1,6 @@
( function( M ) {
- var Overlay = M.require( 'Overlay' ), LearnMoreOverlay;
- LearnMoreOverlay = Overlay.extend( {
+ var OverlayNew = M.require( 'OverlayNew' ), LearnMoreOverlay;
+ LearnMoreOverlay = OverlayNew.extend( {
defaults: {
confirmMessage: mw.msg(
'mobile-frontend-photo-ownership-confirm' )
},
diff --git a/javascripts/modules/uploadsNew/PhotoUploaderPreview.js
b/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
similarity index 61%
rename from javascripts/modules/uploadsNew/PhotoUploaderPreview.js
rename to javascripts/modules/uploadsNew/PhotoUploadOverlay.js
index 511f4be..b3bee7e 100644
--- a/javascripts/modules/uploadsNew/PhotoUploaderPreview.js
+++ b/javascripts/modules/uploadsNew/PhotoUploadOverlay.js
@@ -1,25 +1,26 @@
( function( M, $ ) {
var popup = M.require( 'notifications' ),
- Overlay = M.require( 'Overlay' ),
+ OverlayNew = M.require( 'OverlayNew' ),
LearnMoreOverlay = M.require(
'modules/uploadsNew/LearnMoreOverlay' ),
ownershipMessage = mw.msg( 'mobile-frontend-photo-ownership',
mw.config.get( 'wgUserName' ), mw.user ),
- PhotoUploaderPreview;
+ PhotoUploadOverlay;
- PhotoUploaderPreview = Overlay.extend( {
+ PhotoUploadOverlay = OverlayNew.extend( {
defaults: {
- loadingMessage: mw.msg( 'mobile-frontend-image-loading'
),
license: mw.msg( 'mobile-frontend-photo-license' ),
- cancelButton: mw.msg( 'mobile-frontend-photo-cancel' ),
- submitButton: mw.msg( 'mobile-frontend-photo-submit' ),
descriptionPlaceholder: mw.msg(
'mobile-frontend-photo-caption-placeholder' ),
help: mw.msg( 'mobile-frontend-photo-ownership-help' ),
- ownerStatement: ownershipMessage
+ ownerStatement: ownershipMessage,
+ heading: mw.msg(
'mobile-frontend-photo-heading-describe' ),
+ headerButtons: [
+ { className: 'submit icon', msg: mw.msg(
'mobile-frontend-photo-submit' ) }
+ ]
},
- className: 'mw-mf-overlay photo-overlay',
+ className: 'overlay photo-overlay',
templatePartials: {
- content: M.template.get(
'uploadsNew/PhotoUploaderPreview' )
+ content: M.template.get(
'uploadsNew/PhotoUploadOverlay' )
},
initialize: function( options ) {
@@ -33,9 +34,11 @@
this._super();
this.$description = $description = this.$( 'textarea' );
- $submitButton = this.$( '.submit' ).on( 'click',
function() {
- self.emit( 'submit' );
- } );
+ $submitButton = this.$( '.submit' ).
+ prop( 'disabled', true ).
+ on( 'click', function() {
+ self.emit( 'submit' );
+ } );
this.$( '.cancel' ).on( 'click', function() {
self.emit( 'cancel' );
} );
@@ -45,11 +48,7 @@
// 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() {
- if ( $description.val() ) {
- $submitButton.removeAttr( 'disabled' );
- } else {
- $submitButton.attr( 'disabled', true );
- }
+ $submitButton.prop( 'disabled',
$description.val() === '' );
} );
},
@@ -58,10 +57,10 @@
},
setImageUrl: function( url ) {
- var self = this, $img;
+ var self = this, $preview = this.$( '.preview' );
this.imageUrl = url;
- this.$( '.loading' ).remove();
+ $preview.removeClass( 'loading' );
this.$( 'a.help' ).on( 'click', function( ev ) {
ev.preventDefault(); // avoid setting #
new LearnMoreOverlay( {
@@ -75,16 +74,17 @@
} ).show();
self.log( { action: 'whatDoesThisMean' } );
} );
- $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.hide();
- } );
- }
+ $( '<img>' ).
+ attr( 'src', url ).
+ appendTo( $preview ).
+ on( 'error', function() {
+ // When using a bad filetype close the
overlay
+ popup.show( mw.msg(
'mobile-frontend-photo-upload-error-file-type' ), 'toast error' );
+ self.hide();
+ } );
+ }
} );
- M.define( 'modules/uploadsNew/PhotoUploaderPreview',
PhotoUploaderPreview );
+ M.define( 'modules/uploadsNew/PhotoUploadOverlay', PhotoUploadOverlay );
}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/uploadsNew/PhotoUploadProgress.js
b/javascripts/modules/uploadsNew/PhotoUploadProgress.js
index d737d04..04f8823 100644
--- a/javascripts/modules/uploadsNew/PhotoUploadProgress.js
+++ b/javascripts/modules/uploadsNew/PhotoUploadProgress.js
@@ -1,45 +1,51 @@
( function( M ) {
- var Drawer = M.require( 'Drawer' ),
+ var OverlayNew = M.require( 'OverlayNew' ),
ProgressBar = M.require( 'widgets/progress-bar' ),
PhotoUploadProgress;
- PhotoUploadProgress = Drawer.extend( {
+ PhotoUploadProgress = OverlayNew.extend( {
defaults: {
- waitMessage: mw.msg(
'mobile-frontend-image-uploading-wait' ),
- cancelMessage: mw.msg(
'mobile-frontend-image-uploading-cancel' ),
- messageInterval: 10000
+ uploadingMsg: mw.msg( 'mobile-frontend-image-uploading'
),
+ closeMsg: mw.msg( 'cancel' ),
+ showCancel: false,
+ cancelMsg: mw.msg(
'mobile-frontend-image-cancel-confirm' ),
+ yesMsg: mw.msg( 'mobile-frontend-yes' ),
+ noMsg: mw.msg( 'mobile-frontend-no' )
+ },
+ template: M.template.get( 'uploadsNew/PhotoUploadProgress' ),
+ fullScreen: false,
+
+ initialize: function( options ) {
+ this._super( options );
+ this.progressBar = new ProgressBar();
},
- template: M.template.get( 'uploadsNew/PhotoUploadProgress' ),
- className: 'drawer position-fixed text loading',
- locked: true,
-
- postRender: function( options ) {
- var self = this, longMessage = false;
-
+ postRender: function() {
+ var self = this;
this._super();
-
- this.$( 'a' ).on( 'click', function() {
- self.hide();
- self.emit( 'cancel' );
- return false;
+ this.$( '.continue' ).on( M.tapEvent( 'click' ),
function() {
+ self.options.showCancel = false;
+ self.render();
} );
+ },
- setInterval( function() {
- if ( longMessage ) {
- self.$( '.wait' ).text( mw.msg(
'mobile-frontend-image-uploading-wait' ) );
- } else {
- self.$( '.wait' ).text( mw.msg(
'mobile-frontend-image-uploading-long' ) );
- }
- longMessage = !longMessage;
- }, options.messageInterval );
+ hide: function() {
+ if ( !this.options.showCancel ) {
+ this.options.showCancel = true;
+ this.render();
+ return false;
+ } else {
+ this.emit( 'cancel' );
+ return this._super();
+ }
},
setValue: function( value ) {
+ var $uploading = this.$( '.uploading' );
// only add progress bar if we're getting progress
events
- if ( !this.progressBar ) {
- this.progressBar = new ProgressBar();
- this.progressBar.appendTo( this.$el );
+ if ( $uploading.length && $uploading.text() !== '' ) {
+ $uploading.text( '' );
+ this.progressBar.appendTo( $uploading );
}
this.progressBar.setValue( value );
}
diff --git a/javascripts/modules/uploadsNew/PhotoUploader.js
b/javascripts/modules/uploadsNew/PhotoUploader.js
index 2654387..89f9424 100644
--- a/javascripts/modules/uploadsNew/PhotoUploader.js
+++ b/javascripts/modules/uploadsNew/PhotoUploader.js
@@ -3,7 +3,7 @@
popup = M.require( 'notifications' ),
PhotoApi = M.require( 'modules/uploads/PhotoApi' ),
PhotoUploadProgress = M.require(
'modules/uploadsNew/PhotoUploadProgress' ),
- PhotoUploaderPreview = M.require(
'modules/uploadsNew/PhotoUploaderPreview' ),
+ PhotoUploadOverlay = M.require(
'modules/uploadsNew/PhotoUploadOverlay' ),
PhotoUploader;
function getLog( funnel ) {
@@ -29,7 +29,7 @@
var fileReader = new FileReader(), preview;
this.log = getLog( options.funnel );
- preview = this.preview = new PhotoUploaderPreview( {
log: this.log } );
+ preview = this.preview = new PhotoUploadOverlay( { log:
this.log } );
this.options = options;
this.parent = options.parent;
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 6a3d462..97596c9 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -2,6 +2,9 @@
@import "../mixins.less";
@headerMargin: .4em;
+@headingMarginV: 1em;
+@headingFontSize: 1em;
+@buttonSize: @headingFontSize + @headingMarginV * 2;
.overlay-enabled {
.overlay {
@@ -21,41 +24,44 @@
z-index: 4;
.overlay-header {
- margin: @headerMargin @headerMargin 0;
- border-bottom: 1px solid #cacaca;
- overflow: hidden;
+ padding: @headerMargin @headerMargin 0;
+ display: table;
+ width: 100%;
+ .box-sizing(border-box);
+
+ > div, h2 {
+ display: table-cell;
+ border-bottom: 1px solid #cacaca;
+ }
button, h2 {
- display: inline-block;
line-height: 1;
- padding: 1em .6em;
+ padding: @headingMarginV .6em;
+ // FIXME: should not be necessary, scope other h2s to
.content
+ font-size: @headingFontSize;
+ }
+
+ > div, button {
+ width: @buttonSize;
+ white-space: nowrap;
}
button {
border-radius: 0;
- // needed for proper horizontal icon/text centering in
both LTR and RTL
- min-width: (3em + @headerMargin);
+ min-height: @buttonSize;
+ font-weight: bold;
+
+ &.cancel {
+ color: #d11d13;
+ }
}
- .left {
- float: left;
- // needed for proper horizontal icon/text centering in
both LTR and RTL
- margin-left: -@headerMargin;
+ > div:first-child button {
border-right: 1px solid #cacaca;
}
- .right {
- float: right;
-
- button {
- float: left;
-
- &:last-child {
- // needed for proper horizontal
icon/text centering in both LTR and RTL
- margin-right: -@headerMargin;
- border-left: 1px solid #cacaca;
- }
- }
+ > div:last-child button:last-child {
+ border-left: 1px solid #cacaca;
}
.icon {
@@ -64,15 +70,41 @@
background-repeat: no-repeat;
.background-size( 24px, auto );
+ &[disabled] {
+ opacity: .5;
+ }
+
&.cancel {
background-image: url(images/cancel.png);
}
}
+ }
- h2 {
- float: left;
- // FIXME: should not be necessary, scope other h2s to
.content
- font-size: 1em;
+ // 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;
+ .background-size( auto, 16px );
+ padding-left: 55px;
+ font-size: .9em;
+ // if license is only one line (big screens) prevent cutting
off the image
+ min-height: 18px;
+ margin-top: .5em;
+ line-height: 1.4;
+ }
}
diff --git a/less/common/common-js.less b/less/common/common-js.less
index 8cb93f3..c3f78db 100644
--- a/less/common/common-js.less
+++ b/less/common/common-js.less
@@ -25,9 +25,9 @@
.progress-bar {
width: 100%;
- height: 8px;
- border: 1px solid #9ea0a3;
- box-shadow: inset 0 0 4px #bbb;
+ height: .9em;
+ border: 1px solid #cacaca;
+ .box-sizing(border-box);
.value {
width: 0;
diff --git a/less/modules/images/upload.png b/less/modules/images/upload.png
new file mode 100644
index 0000000..f070263
--- /dev/null
+++ b/less/modules/images/upload.png
Binary files differ
diff --git a/less/modules/uploads/PhotoUploaderButton.less
b/less/modules/uploads/PhotoUploaderButton.less
index d0480ee..e5d3693 100644
--- a/less/modules/uploads/PhotoUploaderButton.less
+++ b/less/modules/uploads/PhotoUploaderButton.less
@@ -10,7 +10,7 @@
// separate <div> to avoid overriding button's gradient
div {
// Note: Use left to ensure it flips in RTL mode
- background: url(images/camera.png) left 45% no-repeat;
+ background: url(../images/camera.png) left 45% no-repeat;
margin: 0 10px;
.background-size( 24px, auto );
}
diff --git a/less/modules/uploadsNew/PhotoUploadOverlay.less
b/less/modules/uploadsNew/PhotoUploadOverlay.less
index 5c1fd25..b93f99c 100644
--- a/less/modules/uploadsNew/PhotoUploadOverlay.less
+++ b/less/modules/uploadsNew/PhotoUploadOverlay.less
@@ -1,34 +1,30 @@
+@import "../../mixins.less";
+
.photo-overlay {
@height: 90px;
-
- .content {
- padding-bottom: 11em !important;
- }
.help {
display: block;
}
- img {
+ .preview {
height: @height;
+ min-width: 50px;
float: left;
margin: 0 8px 8px 0;
}
- .loading {
- background-position: 0 50%;
- padding: 0 0 0 48px;
- margin: 0;
- line-height: @height;
+ img {
+ height: @height !important;
+ }
+
+ .submit {
+ background-image: url(../images/upload.png);
}
textarea {
+ .box-sizing( border-box );
width: 100%;
height: 6em;
-
- &::-webkit-input-placeholder, &::-moz-placeholder {
- text-align: center;
- line-height: 6em;
- }
}
}
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
index 41a17ae..481b607 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -1,12 +1,12 @@
<div class="overlay-header">
- <button class="cancel icon left">{{closeMsg}}</button>
- {{#heading}}
- <h2>{{heading}}</h2>
- {{/heading}}
- <div class="right">
- {{#headerButtons}}
+ <div>
+ <button class="cancel icon">{{closeMsg}}</button>
+ </div>
+ <h2>{{{heading}}}</h2>
+ <div>
+ {{#headerButtons}}
<button class="{{className}}">{{msg}}</button>
- {{/headerButtons}}
+ {{/headerButtons}}
</div>
</div>
{{>content}}
diff --git a/templates/uploadsNew/PhotoUploadOverlay.html
b/templates/uploadsNew/PhotoUploadOverlay.html
new file mode 100644
index 0000000..a53f3b2
--- /dev/null
+++ b/templates/uploadsNew/PhotoUploadOverlay.html
@@ -0,0 +1,6 @@
+<div class="content">
+ <div class="preview loading"></div>
+ <p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
+ <textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
+ <p class="license">{{{license}}}</p>
+</div>
diff --git a/templates/uploadsNew/PhotoUploadProgress.html
b/templates/uploadsNew/PhotoUploadProgress.html
index 53d2fcd..b32b823 100644
--- a/templates/uploadsNew/PhotoUploadProgress.html
+++ b/templates/uploadsNew/PhotoUploadProgress.html
@@ -1,3 +1,18 @@
-<p class="wait">{{waitMessage}}</p>
-<p class="cancel">{{{cancelMessage}}}</p>
-
+<div class="overlay-header">
+ <div>
+ <button class="cancel icon">{{closeMsg}}</button>
+ </div>
+ {{^showCancel}}
+ <h2 class="uploading">{{{uploadingMsg}}}</h2>
+ <div>
+ <button class="loading icon">{{{uploadingMsg}}}</button>
+ </div>
+ {{/showCancel}}
+ {{#showCancel}}
+ <h2>{{{cancelMsg}}}</h2>
+ <div>
+ <button class="cancel">{{yesMsg}}</button>
+ <button class="continue">{{noMsg}}</button>
+ </div>
+ {{/showCancel}}
+</div>
diff --git a/templates/uploadsNew/PhotoUploaderPreview.html
b/templates/uploadsNew/PhotoUploaderPreview.html
deleted file mode 100644
index 099467d..0000000
--- a/templates/uploadsNew/PhotoUploaderPreview.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="content">
- <p class="loading">{{loadingMessage}}</p>
- <p>{{ownerStatement}} <a href="#" class="help">{{help}}</a></p>
- <textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
-</div>
-<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>
-</div>
--
To view, visit https://gerrit.wikimedia.org/r/92787
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie00b8d76caae882ae27e726478d1662fcced63d6
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
