jenkins-bot has submitted this change and it was merged.
Change subject: UploadBooklet: Show image thumbnail in both steps
......................................................................
UploadBooklet: Show image thumbnail in both steps
Bug: T115860
Change-Id: I0794206dad06fd0652e9b62884e8996e836b73b3
---
M resources/Resources.php
M resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
A resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
M resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
4 files changed, 66 insertions(+), 3 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/Resources.php b/resources/Resources.php
index 60d4142..b9dd3fa 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1182,6 +1182,9 @@
'scripts' => array(
'resources/src/mediawiki/mediawiki.Upload.BookletLayout.js',
),
+ 'styles' => array(
+
'resources/src/mediawiki/mediawiki.Upload.BookletLayout.css',
+ ),
'dependencies' => array(
'oojs-ui',
'oojs-ui.styles.icons-content',
diff --git
a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
index d8aa22f..daacb2a 100644
--- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
+++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
@@ -158,6 +158,8 @@
layout.getDateFromExif( file ).done( function ( date ) {
layout.dateWidget.setValue( date );
} );
+
+ layout.updateFilePreview();
} );
return this.uploadForm;
@@ -179,6 +181,9 @@
mw.ForeignStructuredUpload.BookletLayout.prototype.renderInfoForm =
function () {
var fieldset;
+ this.filePreview = new OO.ui.Widget( {
+ classes: [ 'mw-upload-bookletLayout-filePreview' ]
+ } );
this.filenameWidget = new OO.ui.TextInputWidget( {
required: true,
validate: /.+/
@@ -223,7 +228,10 @@
align: 'top'
} )
] );
- this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
+ this.infoForm = new OO.ui.FormLayout( {
+ classes: [ 'mw-upload-bookletLayout-infoForm' ],
+ items: [ this.filePreview, fieldset ]
+ } );
// Validation
this.filenameWidget.on( 'change', this.onInfoFormChange.bind(
this ) );
diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
new file mode 100644
index 0000000..11bad8c
--- /dev/null
+++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
@@ -0,0 +1,19 @@
+.mw-upload-bookletLayout-filePreview {
+ width: 100%;
+ height: 1em;
+ background-color: #eee;
+ background-size: cover;
+ background-position: center center;
+ padding: 1.5em;
+ margin: -1.5em;
+ margin-bottom: 1.5em;
+}
+
+.mw-upload-bookletLayout-infoForm.mw-upload-bookletLayout-hasThumbnail
.mw-upload-bookletLayout-filePreview {
+ height: 10em;
+}
+
+.mw-upload-bookletLayout-filePreview p {
+ line-height: 1em;
+ margin: 0;
+}
\ No newline at end of file
diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
index b2f1981..eaab8c7 100644
--- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
+++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
@@ -383,7 +383,8 @@
* @return {OO.ui.FormLayout}
*/
mw.Upload.BookletLayout.prototype.renderUploadForm = function () {
- var fieldset;
+ var fieldset,
+ layout = this;
this.selectFileWidget = new OO.ui.SelectFileWidget( {
showDropTarget: true
@@ -395,7 +396,33 @@
// Validation
this.selectFileWidget.on( 'change',
this.onUploadFormChange.bind( this ) );
+ this.selectFileWidget.on( 'change', function () {
+ layout.updateFilePreview();
+ } );
+
return this.uploadForm;
+ };
+
+ /**
+ * Updates the file preview on the info form when a file is added.
+ *
+ * @protected
+ */
+ mw.Upload.BookletLayout.prototype.updateFilePreview = function () {
+ this.selectFileWidget.loadAndGetImageUrl().done( function ( url
) {
+ this.filePreview.$element.find( 'p' ).remove();
+ this.filePreview.$element.css( 'background-image',
'url(' + url + ')' );
+ this.infoForm.$element.addClass(
'mw-upload-bookletLayout-hasThumbnail' );
+ }.bind( this ) ).fail( function () {
+ this.filePreview.$element.find( 'p' ).remove();
+ if ( this.selectFileWidget.getValue() ) {
+ this.filePreview.$element.append(
+ $( '<p>' ).text(
this.selectFileWidget.getValue().name )
+ );
+ }
+ this.filePreview.$element.css( 'background-image', '' );
+ this.infoForm.$element.removeClass(
'mw-upload-bookletLayout-hasThumbnail' );
+ }.bind( this ) );
};
/**
@@ -419,6 +446,9 @@
mw.Upload.BookletLayout.prototype.renderInfoForm = function () {
var fieldset;
+ this.filePreview = new OO.ui.Widget( {
+ classes: [ 'mw-upload-bookletLayout-filePreview' ]
+ } );
this.filenameWidget = new OO.ui.TextInputWidget( {
indicator: 'required',
required: true,
@@ -447,7 +477,10 @@
help: mw.msg(
'upload-form-label-infoform-description-tooltip' )
} )
] );
- this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
+ this.infoForm = new OO.ui.FormLayout( {
+ classes: [ 'mw-upload-bookletLayout-infoForm' ],
+ items: [ this.filePreview, fieldset ]
+ } );
this.filenameWidget.on( 'change', this.onInfoFormChange.bind(
this ) );
this.descriptionWidget.on( 'change',
this.onInfoFormChange.bind( this ) );
--
To view, visit https://gerrit.wikimedia.org/r/269978
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0794206dad06fd0652e9b62884e8996e836b73b3
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Edokter <er...@darcoury.nl>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Krinkle <krinklem...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
