Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/53877
Change subject: Add explanation overlay to photo upload view
......................................................................
Add explanation overlay to photo upload view
Changes:
* Allows any element matching .close selector inside content to close
the overlay
TODO:
Currently only one overlay can exist at a time, next commit will refactor
createOverlay to allow stacking..
Change-Id: Icadff153ee8d933c920bd0df50e6003b9af768b0
---
M MobileFrontend.i18n.php
M MobileFrontend.php
M javascripts/common/mf-navigation.js
M javascripts/modules/mf-photo.js
M less/common/mf-navigation.less
M less/modules/mf-photo.less
M stylesheets/common/mf-navigation.css
M stylesheets/modules/mf-photo.css
A templates/photoCopyrightDialog.html
9 files changed, 71 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/77/53877/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 64286f2..f4acade 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -230,6 +230,11 @@
'mobile-frontend-photo-caption-placeholder' => 'Add a description
(required)',
'mobile-frontend-image-loading' => 'Loading image',
'mobile-frontend-image-ownership' => 'I, $1 created this image',
+ 'mobile-frontend-image-ownership-help' => 'What does this mean?',
+ 'mobile-frontend-image-ownership-confirm' => 'Got it!',
+ 'mobile-frontend-image-ownership-bullet-one' => 'We can only accept
images that you took yourself. Please do not upload images you found somewhere
else on the Internet.',
+ 'mobile-frontend-image-ownership-bullet-two' => 'Copyrighted and
inappropriate images will be removed.',
+ 'mobile-frontend-image-ownership-bullet-three' => 'Your uploads are
released under a free license and can be reused by anyone for free.',
'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.',
@@ -499,6 +504,11 @@
'mobile-frontend-meta-data-issues' => 'This should be several words and
should explain that an article has cleanup templates on it - meaning there is
room for improvement on the page. It appears in a button that when clicked
opens the overlay with heading
{{msg-mw|mobile-frontend-meta-data-issues-header}}',
'mobile-frontend-ajax-page-loading' => 'Text that accompanies an ajax
loader when you dynamically load an article via javascript',
'mobile-frontend-image-ownership' => 'A statement saying the user
created the image where $1 is the username',
+ 'mobile-frontend-image-ownership-help' => 'A link that allows the user
to open more information about what "mobile-frontend-image-ownership" entails',
+ 'mobile-frontend-image-ownership-confirm' => 'Friendly confirmation
message expressing understanding',
+ 'mobile-frontend-image-ownership-bullet-one' => 'Explain to users that
photos must belong to them',
+ 'mobile-frontend-image-ownership-bullet-two' => 'Explain to users their
photos risk deletion.',
+ 'mobile-frontend-image-ownership-bullet-three' => 'Explain the
consequences of reuse to a photo donation',
'mobile-frontend-page-saving' => 'Text shown whilst an article is being
saved',
'mobile-frontend-ajax-page-error' => 'Text that accompanies an ajax
loader when you dynamically load an article via javascript and it fails',
'mobile-frontend-nearby-title' => 'Title of Special:Nearby.
diff --git a/MobileFrontend.php b/MobileFrontend.php
index b69578a..fa74116 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -213,6 +213,7 @@
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
+ 'photoCopyrightDialog',
'leadPhoto',
'photoUploader',
'photoUploadPreview',
@@ -376,6 +377,7 @@
// mf-photo.js
'mobile-frontend-image-ownership',
+ 'mobile-frontend-image-ownership-help',
'mobile-frontend-photo-article-edit-comment',
'mobile-frontend-photo-article-donate-comment',
'mobile-frontend-photo-upload-error',
@@ -389,6 +391,10 @@
'mobile-frontend-photo-upload-comment',
'mobile-frontend-photo-submit',
'mobile-frontend-photo-cancel',
+ 'mobile-frontend-image-ownership-confirm',
+ 'mobile-frontend-image-ownership-bullet-one',
+ 'mobile-frontend-image-ownership-bullet-two',
+ 'mobile-frontend-image-ownership-bullet-three',
// for mf-search.js
'mobile-frontend-search-help',
diff --git a/javascripts/common/mf-navigation.js
b/javascripts/common/mf-navigation.js
index 7d3dc90..8a524f9 100644
--- a/javascripts/common/mf-navigation.js
+++ b/javascripts/common/mf-navigation.js
@@ -72,6 +72,7 @@
$( 'html' ).removeClass( 'navigationEnabled' );
}
+ // FIXME: redo using view
function createOverlay( heading, contents, options ) {
options = options || {};
var overlay = document.getElementById( mfePrefix + 'overlay' );
@@ -87,6 +88,7 @@
}
$( heading ).appendTo( '#' + mfePrefix + 'overlay .header' );
$( overlay ).append( contents );
+ $( overlay ).find( '.close' ).click( closeOverlay );
return overlay;
}
diff --git a/javascripts/modules/mf-photo.js b/javascripts/modules/mf-photo.js
index cd5287f..3dbcd96 100644
--- a/javascripts/modules/mf-photo.js
+++ b/javascripts/modules/mf-photo.js
@@ -212,10 +212,25 @@
},
setImageUrl: function( url ) {
+ var msg = mw.msg( 'mobile-frontend-image-ownership',
+ mw.config.get( 'wgUserName' ) ),
+ data = {
+ bulletPoints: [
+ { text: mw.msg(
'mobile-frontend-image-ownership-bullet-one' ) },
+ { text: mw.msg(
'mobile-frontend-image-ownership-bullet-two' ) },
+ { text: mw.msg(
'mobile-frontend-image-ownership-bullet-three' ) }
+ ],
+ closeText: mw.msg(
'mobile-frontend-image-ownership-confirm' ),
+ leadText: msg
+ };
this.imageUrl = url;
- this.$( '.loading' ).removeClass( 'loading' ).text(
- mw.msg( 'mobile-frontend-image-ownership',
mw.config.get( 'wgUserName' ) )
- );
+ this.$( '.loading' ).removeClass( 'loading' ).text( msg
);
+ $( '<a class="help">' ).
+ text( mw.msg(
'mobile-frontend-image-ownership-help' ) ).
+ click( function() {
+ nav.createOverlay( '', $(
M.template.get( 'photoCopyrightDialog' ).render( data ) ) );
+ } ).
+ appendTo( this.$( 'p' ) );
$( '<img>' ).attr( 'src', url ).prependTo( this.$(
'.photoPreview' ) );
}
} );
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index 5708b69..0709356 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -267,6 +267,11 @@
.content {
margin-top: @headingMarginTop;
+
+ .close {
+ display: block;
+ margin: auto;
+ }
}
.buttonBar {
@@ -349,6 +354,11 @@
cursor: pointer;
margin: 0;
list-style: none;
+
+ &.informative {
+ list-style: inside square;
+ margin-bottom: 8px;
+ }
}
a.escapeOverlay,
diff --git a/less/modules/mf-photo.less b/less/modules/mf-photo.less
index c6e60bd..d805c23 100644
--- a/less/modules/mf-photo.less
+++ b/less/modules/mf-photo.less
@@ -37,6 +37,10 @@
padding-bottom: 70px !important;
+ .help {
+ display: block;
+ }
+
img {
height: @height;
float: left;
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index ba7a706..96b6d0c 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -358,6 +358,10 @@
#mw-mf-overlay .content {
margin-top: 14pt;
}
+#mw-mf-overlay .content .close {
+ display: block;
+ margin: auto;
+}
#mw-mf-overlay .buttonBar {
position: fixed;
bottom: 0;
@@ -428,6 +432,10 @@
margin: 0;
list-style: none;
}
+.overlay ul.informative {
+ list-style: inside square;
+ margin-bottom: 8px;
+}
a.escapeOverlay,
button.escapeOverlay {
position: absolute;
diff --git a/stylesheets/modules/mf-photo.css b/stylesheets/modules/mf-photo.css
index c1be8ab..137f4e9 100644
--- a/stylesheets/modules/mf-photo.css
+++ b/stylesheets/modules/mf-photo.css
@@ -31,6 +31,9 @@
.photoPreview {
padding-bottom: 70px !important;
}
+.photoPreview .help {
+ display: block;
+}
.photoPreview img {
height: 90px;
float: left;
diff --git a/templates/photoCopyrightDialog.html
b/templates/photoCopyrightDialog.html
new file mode 100644
index 0000000..734c1e1
--- /dev/null
+++ b/templates/photoCopyrightDialog.html
@@ -0,0 +1,10 @@
+<div class="content">
+ <p>{{leadText}}</p>
+
+ <ul class="informative">
+ {{#bulletPoints}}
+ <li>{{text}}</li>
+ {{/bulletPoints}}
+ </ul>
+ <button class="close">{{closeText}}</button>
+</div>
--
To view, visit https://gerrit.wikimedia.org/r/53877
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icadff153ee8d933c920bd0df50e6003b9af768b0
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
