jenkins-bot has submitted this change and it was merged.
Change subject: SelectFileWidget: Show thumbnail when dropTarget is shown
......................................................................
SelectFileWidget: Show thumbnail when dropTarget is shown
Bug: T115860
Bug: T124571
Change-Id: I3f68bc47209dad469eafdc6b4327dd2ac2d33d3d
---
M demos/pages/icons.js
M src/styles/widgets/SelectFileWidget.less
M src/themes/apex/icons-content.json
M src/themes/apex/icons-editing-advanced.json
A src/themes/apex/images/icons/attachment-ltr.svg
A src/themes/apex/images/icons/attachment-rtl.svg
A src/themes/apex/images/icons/upload-ltr.svg
A src/themes/apex/images/icons/upload-rtl.svg
M src/themes/apex/widgets.less
M src/themes/mediawiki/icons-editing-advanced.json
A src/themes/mediawiki/images/icons/attachment-ltr.svg
A src/themes/mediawiki/images/icons/attachment-rtl.svg
M src/themes/mediawiki/widgets.less
M src/widgets/SelectFileWidget.js
14 files changed, 243 insertions(+), 44 deletions(-)
Approvals:
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/icons.js b/demos/pages/icons.js
index e21463d..b4a17e3 100644
--- a/demos/pages/icons.js
+++ b/demos/pages/icons.js
@@ -126,6 +126,7 @@
'alignCentre',
'alignLeft',
'alignRight',
+ 'attachment',
'calendar',
'find',
'language',
diff --git a/src/styles/widgets/SelectFileWidget.less
b/src/styles/widgets/SelectFileWidget.less
index 7017681..de84a33 100644
--- a/src/styles/widgets/SelectFileWidget.less
+++ b/src/styles/widgets/SelectFileWidget.less
@@ -76,16 +76,90 @@
&-dropTarget {
cursor: default;
+ height: 5.5em;
+ text-align: left;
+ padding: 0;
+
+ .oo-ui-selectFileWidget-dropLabel,
+ .oo-ui-selectFileWidget-selectButton {
+ display: none;
+ }
+
+ .oo-ui-selectFileWidget-thumbnail {
+ height: 5.5em;
+ width: 5.5em;
+ position: absolute;
+ background-size: cover;
+ background-position: center center;
+
+ &.oo-ui-pendingElement-pending {
+ background-size: auto;
+ }
+
+ > .oo-ui-selectFileWidget-noThumbnail-icon {
+ opacity: 0.4;
+ background-color: #ccc;
+ height: 5.5em;
+ width: 5.5em;
+ }
+ }
+
+ .oo-ui-selectFileWidget-info {
+ border: none;
+ background: none;
+ display: block;
+ height: 100%;
+ width: auto;
+ margin-left: 5.5em;
+
+ > .oo-ui-selectFileWidget-label {
+ position: relative;
+
+ > .oo-ui-selectFileWidget-fileName {
+ display: block;
+ float: none;
+ }
+
+ > .oo-ui-selectFileWidget-fileType {
+ display: block;
+ float: none;
+ }
+ }
+
+ > .oo-ui-selectFileWidget-clearButton {
+ position: absolute;
+ right: 0.5em;
+ }
+ }
}
- &-supported.oo-ui-widget-enabled {
- .oo-ui-selectFileWidget-dropTarget {
- cursor: pointer;
+ &-empty .oo-ui-selectFileWidget-dropTarget {
+ text-align: center;
+
+ .oo-ui-selectFileWidget-dropLabel {
+ display: block
+ }
+
+ .oo-ui-selectFileWidget-thumbnail,
+ .oo-ui-selectFileWidget-info {
+ display: none;
+ }
+
+ .oo-ui-selectFileWidget-selectButton {
+ display: block;
+ margin: 0.7em;
}
}
&-empty,
&-notsupported {
+ .oo-ui-selectFileWidget-dropTarget {
+ text-align: center;
+
+ .oo-ui-selectFileWidget-info {
+ margin: 0;
+ }
+ }
.oo-ui-selectFileWidget-clearButton {
display: none;
}
diff --git a/src/themes/apex/icons-content.json
b/src/themes/apex/icons-content.json
index 0886fa6..c565256 100644
--- a/src/themes/apex/icons-content.json
+++ b/src/themes/apex/icons-content.json
@@ -5,6 +5,10 @@
"articleRedirect": { "file": {
"ltr": "images/icons/articleRedirect-ltr.svg",
"rtl": "images/icons/articleRedirect-rtl.svg"
+ } },
+ "upload": { "file": {
+ "ltr": "images/icons/upload-ltr.svg",
+ "rtl": "images/icons/upload-rtl.svg"
} }
}
}
diff --git a/src/themes/apex/icons-editing-advanced.json
b/src/themes/apex/icons-editing-advanced.json
index ab04d36..aae5201 100644
--- a/src/themes/apex/icons-editing-advanced.json
+++ b/src/themes/apex/icons-editing-advanced.json
@@ -5,6 +5,10 @@
"alignCentre": { "file": "images/icons/align-center.svg" },
"alignLeft": { "file": "images/icons/align-float-left.svg" },
"alignRight": { "file": "images/icons/align-float-right.svg" },
+ "attachment": { "file": {
+ "ltr": "images/icons/attachment-ltr.svg",
+ "rtl": "images/icons/attachment-rtl.svg"
+ } },
"calendar": { "file": {
"ltr": "images/icons/calendar-ltr.svg",
"rtl": "images/icons/calendar-rtl.svg"
diff --git a/src/themes/apex/images/icons/attachment-ltr.svg
b/src/themes/apex/images/icons/attachment-ltr.svg
new file mode 100644
index 0000000..74a4d64
--- /dev/null
+++ b/src/themes/apex/images/icons/attachment-ltr.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="-293 385 24 24">
+ <path d="M-274.3 390.9c-1.6-1.6-4.3-1.5-5.8.1l.2.2c.5.5 1.3.7 2.1.4.8-.3
1.7-.1 2.4.6 1 .9.9 2.4 0 3.4l-7.1 7.1c-.9 1-2.4.9-3.4 0s-.9-2.4
0-3.4l4.4-4.4c.3-.3.9-.5 1.3-.1s.2 1-.1 1.3l-3.4 3.4c-.6.6-.6 1.7.1
2.3l4.3-4.3c.8-.8 1.1-1.8.9-2.7-.2-.9-.9-1.6-1.7-1.9-.9-.2-1.9 0-2.6.7l-4.4
4.4c-1.6 1.6-1.6 4.3.1 5.8 1.5 1.6 4.3 1.5 5.8-.1l7-7c.8-.8 1.2-1.9
1.2-3s-.5-2.1-1.3-2.8c-.7-.7.8.7 0 0-.7-.7.8.7 0 0-.7-.7.8.7 0 0-.7-.7.8.7 0
0-.7-.7.8.7 0 0-.7-.7.8.7 0 0-1.5-1.6.8.7 0 0z"/>
+</svg>
diff --git a/src/themes/apex/images/icons/attachment-rtl.svg
b/src/themes/apex/images/icons/attachment-rtl.svg
new file mode 100644
index 0000000..f53f5a4
--- /dev/null
+++ b/src/themes/apex/images/icons/attachment-rtl.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="-119 70 24 24">
+ <path d="M-113.3 75.6c-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7.7-.7
0 0-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7-1.3 1.7-1.3 2.8 0 1.1.4 2.2 1.2 3l7 7c1.5
1.6 4.3 1.7 5.8.1 1.7-1.5 1.7-4.2.1-5.8l-4.4-4.4c-.7-.7-1.7-.9-2.6-.7-.8.3-1.5
1-1.7 1.9-.2.9.1 1.9.9 2.7l4.3
4.3c.7-.6.7-1.7.1-2.3l-3.4-3.4c-.3-.3-.5-.9-.1-1.3s1-.2 1.3.1l4.4 4.4c.9 1 1
2.5 0 3.4s-2.5 1-3.4 0l-7.1-7.1c-.9-1-1-2.5 0-3.4.7-.7 1.6-.9 2.4-.6.8.3 1.6.1
2.1-.4l.2-.2c-1.5-1.6-4.2-1.8-5.8-.1-.8.7 1.5-1.7 0 0z"/>
+</svg>
diff --git a/src/themes/apex/images/icons/upload-ltr.svg
b/src/themes/apex/images/icons/upload-ltr.svg
new file mode 100644
index 0000000..dc4676f
--- /dev/null
+++ b/src/themes/apex/images/icons/upload-ltr.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
+ <path d="M10 13c0 1.7 1.3 3 3 3V9h3l-4.5-5L7 9h3v4zm7 0v5H7c-.6
0-1-.4-1-1v-4H4v4c0 1.9 1.3 3 3 3h12v-7h-2z"/>
+</svg>
diff --git a/src/themes/apex/images/icons/upload-rtl.svg
b/src/themes/apex/images/icons/upload-rtl.svg
new file mode 100644
index 0000000..ed3fe77
--- /dev/null
+++ b/src/themes/apex/images/icons/upload-rtl.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
+ <path d="M13 13c0 1.7-1.3 3-3 3V9H7l4.5-5L16 9h-3v4zm-7 0v5h10c.6 0 1-.4
1-1v-4h2v4c0 1.9-1.3 3-3 3H4v-7h2z"/>
+</svg>
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index e257476..feade15 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -301,24 +301,13 @@
}
}
- &-dropTarget {
- line-height: 3.5em;
- background-color: @background-color-main;
- border: 1px dashed #aaa;
- padding: 0.5em 1em;
- margin-bottom: 0.5em;
- text-align: center;
- vertical-align: middle;
- }
-
&-supported.oo-ui-widget-enabled {
- .oo-ui-selectFileWidget-dropTarget:hover,
- &.oo-ui-selectFileWidget-canDrop
oo-ui-selectFileWidget-dropTarget {
+ &.oo-ui-selectFileWidget-canDrop
.oo-ui-selectFileWidget-dropTarget {
background-color: #e1f3ff;
}
}
- &.oo-ui-widget-disabled,
+ &-empty.oo-ui-widget-disabled,
&-notsupported {
.oo-ui-selectFileWidget-dropTarget {
color: #ccc;
@@ -327,6 +316,18 @@
background-color: #f3f3f3;
}
}
+
+ &-dropTarget {
+ background-color: @background-color-main;
+ border: 1px solid #aaa;
+ margin-bottom: 0.5em;
+ vertical-align: middle;
+ border-radius: 0.25em;
+ }
+
+ &-empty .oo-ui-selectFileWidget-dropTarget {
+ border-style: dashed;
+ }
}
.theme-oo-ui-inputWidget () {
diff --git a/src/themes/mediawiki/icons-editing-advanced.json
b/src/themes/mediawiki/icons-editing-advanced.json
index dbb3411..50e65d6 100644
--- a/src/themes/mediawiki/icons-editing-advanced.json
+++ b/src/themes/mediawiki/icons-editing-advanced.json
@@ -12,6 +12,10 @@
"alignCentre": { "file": "images/icons/align-center.svg" },
"alignLeft": { "file": "images/icons/align-float-left.svg" },
"alignRight": { "file": "images/icons/align-float-right.svg" },
+ "attachment": { "file": {
+ "ltr": "images/icons/attachment-ltr.svg",
+ "rtl": "images/icons/attachment-rtl.svg"
+ } },
"calendar": { "file": {
"ltr": "images/icons/calendar-ltr.svg",
"rtl": "images/icons/calendar-rtl.svg"
diff --git a/src/themes/mediawiki/images/icons/attachment-ltr.svg
b/src/themes/mediawiki/images/icons/attachment-ltr.svg
new file mode 100644
index 0000000..74a4d64
--- /dev/null
+++ b/src/themes/mediawiki/images/icons/attachment-ltr.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="-293 385 24 24">
+ <path d="M-274.3 390.9c-1.6-1.6-4.3-1.5-5.8.1l.2.2c.5.5 1.3.7 2.1.4.8-.3
1.7-.1 2.4.6 1 .9.9 2.4 0 3.4l-7.1 7.1c-.9 1-2.4.9-3.4 0s-.9-2.4
0-3.4l4.4-4.4c.3-.3.9-.5 1.3-.1s.2 1-.1 1.3l-3.4 3.4c-.6.6-.6 1.7.1
2.3l4.3-4.3c.8-.8 1.1-1.8.9-2.7-.2-.9-.9-1.6-1.7-1.9-.9-.2-1.9 0-2.6.7l-4.4
4.4c-1.6 1.6-1.6 4.3.1 5.8 1.5 1.6 4.3 1.5 5.8-.1l7-7c.8-.8 1.2-1.9
1.2-3s-.5-2.1-1.3-2.8c-.7-.7.8.7 0 0-.7-.7.8.7 0 0-.7-.7.8.7 0 0-.7-.7.8.7 0
0-.7-.7.8.7 0 0-.7-.7.8.7 0 0-1.5-1.6.8.7 0 0z"/>
+</svg>
diff --git a/src/themes/mediawiki/images/icons/attachment-rtl.svg
b/src/themes/mediawiki/images/icons/attachment-rtl.svg
new file mode 100644
index 0000000..f53f5a4
--- /dev/null
+++ b/src/themes/mediawiki/images/icons/attachment-rtl.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="-119 70 24 24">
+ <path d="M-113.3 75.6c-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7.7-.7
0 0-.8.7.7-.7 0 0-.8.7.7-.7 0 0-.8.7-1.3 1.7-1.3 2.8 0 1.1.4 2.2 1.2 3l7 7c1.5
1.6 4.3 1.7 5.8.1 1.7-1.5 1.7-4.2.1-5.8l-4.4-4.4c-.7-.7-1.7-.9-2.6-.7-.8.3-1.5
1-1.7 1.9-.2.9.1 1.9.9 2.7l4.3
4.3c.7-.6.7-1.7.1-2.3l-3.4-3.4c-.3-.3-.5-.9-.1-1.3s1-.2 1.3.1l4.4 4.4c.9 1 1
2.5 0 3.4s-2.5 1-3.4 0l-7.1-7.1c-.9-1-1-2.5 0-3.4.7-.7 1.6-.9 2.4-.6.8.3 1.6.1
2.1-.4l.2-.2c-1.5-1.6-4.2-1.8-5.8-.1-.8.7 1.5-1.7 0 0z"/>
+</svg>
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 12d7ab6..3b48937 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -304,35 +304,39 @@
}
}
- &-dropTarget {
- line-height: 3.5em;
- background-color: @background-color-default;
- border: 1px dashed #ccc;
- padding: 0.5em 1em;
- margin-bottom: 0.5em;
- text-align: center;
- vertical-align: middle;
- }
-
&-supported.oo-ui-widget-enabled {
- .oo-ui-selectFileWidget-dropTarget:hover {
- background-color: #eee;
- }
-
&.oo-ui-selectFileWidget-canDrop
.oo-ui-selectFileWidget-dropTarget {
background: @progressive-fade;
}
}
- &.oo-ui-widget-disabled,
+ &-empty.oo-ui-widget-disabled,
&-notsupported {
.oo-ui-selectFileWidget-dropTarget {
- color: @color-disabled;
- text-shadow: @text-shadow-disabled;
border-color: @border-color-disabled;
background-color: @background-color-disabled;
+
+ .oo-ui-selectFileWidget-info,
+ .oo-ui-selectFileWidget-dropLabel {
+ color: @color-disabled;
+ text-shadow: @text-shadow-disabled;
+ }
}
}
+
+ &-dropTarget {
+ background-color: @background-color-default;
+ border: 1px solid #ccc;
+ margin-bottom: 0.5em;
+ vertical-align: middle;
+ overflow: hidden;
+ border-radius: @border-radius-default;
+ }
+
+ &-empty .oo-ui-selectFileWidget-dropTarget {
+ background-color: #eee;
+ border-style: dashed;
+ }
}
.theme-oo-ui-inputWidget () {
diff --git a/src/widgets/SelectFileWidget.js b/src/widgets/SelectFileWidget.js
index d121dd4..4aceae3 100644
--- a/src/widgets/SelectFileWidget.js
+++ b/src/widgets/SelectFileWidget.js
@@ -26,6 +26,8 @@
* @cfg {boolean} [droppable=true] Whether to accept files by drag and drop.
* @cfg {boolean} [showDropTarget=false] Whether to show a drop target.
Requires droppable to be true.
* @cfg {boolean} [dragDropUI=false] Deprecated alias for showDropTarget
+ * @cfg {Number} [thumbnailSizeLimit=20] File size limit in MiB above which to
not try and show a
+ * preview (for performance)
*/
OO.ui.SelectFileWidget = function OoUiSelectFileWidget( config ) {
var dragHandler;
@@ -41,7 +43,8 @@
placeholder: OO.ui.msg( 'ooui-selectfile-placeholder' ),
notsupported: OO.ui.msg( 'ooui-selectfile-not-supported' ),
droppable: true,
- showDropTarget: false
+ showDropTarget: false,
+ thumbnailSizeLimit: 20
}, config );
// Parent constructor
@@ -55,9 +58,8 @@
// Properties
this.$info = $( '<span>' );
-
- // Properties
this.showDropTarget = config.showDropTarget;
+ this.thumbnailSizeLimit = config.thumbnailSizeLimit;
this.isSupported = this.constructor.static.isSupported();
this.currentFile = null;
if ( Array.isArray( config.accept ) ) {
@@ -78,7 +80,7 @@
this.clearButton = new OO.ui.ButtonWidget( {
classes: [ 'oo-ui-selectFileWidget-clearButton' ],
framed: false,
- icon: 'remove',
+ icon: 'close',
disabled: this.disabled
} );
@@ -101,23 +103,35 @@
// Initialization
this.addInput();
- this.updateUI();
this.$label.addClass( 'oo-ui-selectFileWidget-label' );
this.$info
.addClass( 'oo-ui-selectFileWidget-info' )
.append( this.$icon, this.$label, this.clearButton.$element,
this.$indicator );
- this.$element
- .addClass( 'oo-ui-selectFileWidget' )
- .append( this.$info, this.selectButton.$element );
+
if ( config.droppable && config.showDropTarget ) {
+ this.selectButton.setIcon( 'upload' );
+ this.$thumbnail = $( '<div>' ).addClass(
'oo-ui-selectFileWidget-thumbnail' );
+ this.setPendingElement( this.$thumbnail );
this.$dropTarget = $( '<div>' )
.addClass( 'oo-ui-selectFileWidget-dropTarget' )
- .text( OO.ui.msg(
'ooui-selectfile-dragdrop-placeholder' ) )
.on( {
click: this.onDropTargetClick.bind( this )
- } );
- this.$element.prepend( this.$dropTarget );
+ } )
+ .append(
+ this.$thumbnail,
+ this.$info,
+ this.selectButton.$element,
+ $( '<span>' )
+ .addClass(
'oo-ui-selectFileWidget-dropLabel' )
+ .text( OO.ui.msg(
'ooui-selectfile-dragdrop-placeholder' ) )
+ );
+ this.$element.append( this.$dropTarget );
+ } else {
+ this.$element
+ .addClass( 'oo-ui-selectFileWidget' )
+ .append( this.$info, this.selectButton.$element );
}
+ this.updateUI();
};
/* Setup */
@@ -222,11 +236,75 @@
);
}
this.setLabel( $label );
+
+ if ( this.showDropTarget ) {
+ this.pushPending();
+ this.loadAndGetImageUrl().done( function ( url
) {
+ this.$thumbnail.css(
'background-image', 'url( ' + url + ' )' );
+ }.bind( this ) ).fail( function () {
+ this.$thumbnail.append(
+ new OO.ui.IconWidget( {
+ icon: 'attachment',
+ classes: [
'oo-ui-selectFileWidget-noThumbnail-icon' ]
+ } ).$element
+ );
+ }.bind( this ) ).always( function () {
+ this.popPending();
+ }.bind( this ) );
+ this.$dropTarget.off( 'click' );
+ }
} else {
+ if ( this.showDropTarget ) {
+ this.$dropTarget.off( 'click' );
+ this.$dropTarget.on( {
+ click: this.onDropTargetClick.bind(
this )
+ } );
+ this.$thumbnail
+ .empty()
+ .css( 'background-image', '' );
+ }
this.$element.addClass( 'oo-ui-selectFileWidget-empty'
);
this.setLabel( this.placeholder );
}
}
+};
+
+/**
+ * Get the URL of the image if the selected file is one
+ *
+ * @return {jQuery.Promise} Promise resolves with the image URL
+ */
+OO.ui.SelectFileWidget.prototype.loadAndGetImageUrl = function () {
+ var deferred = $.Deferred(),
+ file = this.currentFile,
+ reader = new FileReader();
+
+ if (
+ file &&
+ ( OO.getProp( file, 'type' ) || '' ).indexOf( 'image/' ) === 0
&&
+ file.size < this.thumbnailSizeLimit * 1024 * 1024
+ ) {
+ reader.onload = function ( event ) {
+ var img = document.createElement( 'img' );
+ img.addEventListener( 'load', function () {
+ if (
+ img.naturalWidth === 0 ||
+ img.naturalHeight === 0 ||
+ img.complete === false
+ ) {
+ deferred.reject();
+ } else {
+ deferred.resolve( event.target.result );
+ }
+ } );
+ img.src = event.target.result;
+ };
+ reader.readAsDataURL( file );
+ } else {
+ deferred.reject();
+ }
+
+ return deferred.promise();
};
/**
@@ -246,6 +324,11 @@
this.$input = $( '<input type="file">' );
this.$input.on( 'change', this.onFileSelectedHandler );
+ this.$input.on( 'click', function ( e ) {
+ // Prevents dropTarget to get clicked which calls
+ // a click on this input
+ e.stopPropagation();
+ } );
this.$input.attr( {
tabindex: -1
} );
--
To view, visit https://gerrit.wikimedia.org/r/265279
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3f68bc47209dad469eafdc6b4327dd2ac2d33d3d
Gerrit-PatchSet: 14
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
