jenkins-bot has submitted this change and it was merged.
Change subject: SelectFileWidget: Add drag drop UI as a config
......................................................................
SelectFileWidget: Add drag drop UI as a config
Change-Id: I6dfef09b94947d28032b9aae74fc922b1df4940a
---
M demos/pages/widgets.js
M i18n/en.json
M i18n/qqq.json
M src/core.js
M src/themes/apex/widgets.less
M src/themes/mediawiki/MediaWikiTheme.js
M src/themes/mediawiki/widgets.less
M src/widgets/SelectFileWidget.js
8 files changed, 130 insertions(+), 4 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index d861bd9..d4a53bb 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -922,6 +922,13 @@
}
),
new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( {
dragDropUI: true } ),
+ {
+ label: 'SelectFileWidget (drag
drop UI)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
diff --git a/i18n/en.json b/i18n/en.json
index 9812ec6..db2399f 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -30,5 +30,6 @@
"ooui-dialog-process-continue": "Continue",
"ooui-selectfile-not-supported": "File selection is not supported",
"ooui-selectfile-placeholder": "No file is selected",
+ "ooui-selectfile-dragdrop-placeholder": "Drop file here (or click to
browse)",
"ooui-semicolon-separator": "; "
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index bef65ed..607229d 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -34,5 +34,6 @@
"ooui-dialog-process-continue": "Label for process dialog retry action
button, visible when describing only warnings\n{{Identical|Continue}}",
"ooui-selectfile-not-supported": "Label for the file selection dialog
if file selection is not supported",
"ooui-selectfile-placeholder": "Label for the file selection dialog
when no file is currently selected",
+ "ooui-selectfile-dragdrop-placeholder": "Label for the file selection
dialog when no file is currently selected in the drag drop UI. Suggests
clicking to open the browse dialog.",
"ooui-semicolon-separator": "{{optional}} Semicolon used as a separator"
}
diff --git a/src/core.js b/src/core.js
index b4bf0e3..2d80bfd 100644
--- a/src/core.js
+++ b/src/core.js
@@ -269,6 +269,8 @@
'ooui-selectfile-not-supported': 'File selection is not
supported',
// Default placeholder for file selection widgets
'ooui-selectfile-placeholder': 'No file is selected',
+ // Default placeholder for file selection widgets when using
drag drop UI
+ 'ooui-selectfile-dragdrop-placeholder': 'Drop file here (or
click to browse)',
// Semicolon separator
'ooui-semicolon-separator': '; '
};
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 0d126bf..a133a23 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -277,6 +277,33 @@
padding-right: 2em;
}
}
+
+ &.oo-ui-selectFileWidget-dragdrop-ui &-handle {
+ height: 3.5em;
+ border: 1px dashed #aaa;
+ padding: 0.5em 1em;
+ background: #fff;
+ text-align: center;
+ vertical-align: middle;
+
+ .oo-ui-iconElement-icon {
+ margin: 0.6em 0;
+ }
+
+ .oo-ui-selectFileWidget-label {
+ color: #000;
+ }
+ }
+
+ &.oo-ui-selectFileWidget-dragdrop-ui &-handle:hover,
+ &.oo-ui-selectFileWidget-dragdrop-ui.oo-ui-selectFileWidget-canDrop
&-handle {
+ background-color: @progressive;
+ border-color: #fff;
+
+ .oo-ui-labelElement-label {
+ color: #fff;
+ }
+ }
}
.theme-oo-ui-inputWidget () {
diff --git a/src/themes/mediawiki/MediaWikiTheme.js
b/src/themes/mediawiki/MediaWikiTheme.js
index 9e2a7cb..6944e12 100644
--- a/src/themes/mediawiki/MediaWikiTheme.js
+++ b/src/themes/mediawiki/MediaWikiTheme.js
@@ -47,6 +47,12 @@
}
}
+ if ( element instanceof OO.ui.SelectFileWidget ) {
+ if ( !element.isDisabled() && element.active ) {
+ variants.invert = true;
+ }
+ }
+
for ( variant in variants ) {
classes[ variants[ variant ] ? 'on' : 'off' ].push(
'oo-ui-image-' + variant );
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 87d7c18..350b4b1 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -279,6 +279,34 @@
padding-right: 2em;
}
}
+
+ &.oo-ui-selectFileWidget-dragdrop-ui &-handle {
+ height: 3.5em;
+ border: 2px dashed @text;
+ border-radius: 0em;
+ padding: 0.5em 1em;
+ background: #fff;
+ text-align: center;
+ vertical-align: middle;
+
+ .oo-ui-iconElement-icon {
+ margin: 0.6em 0;
+ }
+
+ .oo-ui-selectFileWidget-label {
+ color: #000;
+ }
+ }
+
+ &.oo-ui-selectFileWidget-dragdrop-ui &-handle:hover,
+ &.oo-ui-selectFileWidget-dragdrop-ui.oo-ui-selectFileWidget-canDrop
&-handle {
+ background-color: @progressive-hover;
+ border-color: #fff;
+
+ .oo-ui-labelElement-label {
+ color: #fff;
+ }
+ }
}
.theme-oo-ui-inputWidget () {
diff --git a/src/widgets/SelectFileWidget.js b/src/widgets/SelectFileWidget.js
index ff77002..b35e193 100644
--- a/src/widgets/SelectFileWidget.js
+++ b/src/widgets/SelectFileWidget.js
@@ -25,16 +25,21 @@
* @cfg {string} [placeholder] Text to display when no file is selected.
* @cfg {string} [notsupported] Text to display when file support is missing
in the browser.
* @cfg {boolean} [droppable=true] Whether to accept files by drag and drop.
+ * @cfg {boolean} [dragDropUI=false] Whether to render the drag and drop UI.
*/
OO.ui.SelectFileWidget = function OoUiSelectFileWidget( config ) {
- var dragHandler;
+ var dragHandler,
+ placeholderMsg = ( config && config.dragDropUI ) ?
+ 'ooui-selectfile-dragdrop-placeholder' :
+ 'ooui-selectfile-placeholder';
// Configuration initialization
config = $.extend( {
accept: null,
- placeholder: OO.ui.msg( 'ooui-selectfile-placeholder' ),
+ placeholder: OO.ui.msg( placeholderMsg ),
notsupported: OO.ui.msg( 'ooui-selectfile-not-supported' ),
- droppable: true
+ droppable: true,
+ dragDropUI: false
}, config );
// Parent constructor
@@ -51,6 +56,8 @@
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$handle } ) );
// Properties
+ this.active = false;
+ this.dragDropUI = config.dragDropUI;
this.isSupported = this.constructor.static.isSupported();
this.currentFile = null;
if ( Array.isArray( config.accept ) ) {
@@ -97,7 +104,15 @@
.addClass( 'oo-ui-selectFileWidget' )
.append( this.$handle );
if ( config.droppable ) {
- this.$element.addClass( 'oo-ui-selectFileWidget-droppable' );
+ if ( config.dragDropUI ) {
+ this.$element.addClass(
'oo-ui-selectFileWidget-dragdrop-ui' );
+ this.$element.on( {
+ mouseover: this.onMouseOver.bind( this ),
+ mouseleave: this.onMouseLeave.bind( this )
+ } );
+ } else {
+ this.$element.addClass(
'oo-ui-selectFileWidget-droppable' );
+ }
}
};
@@ -305,6 +320,7 @@
if ( this.isDisabled() || !this.isSupported ) {
this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
+ this.setActive( false );
dt.dropEffect = 'none';
return false;
}
@@ -322,8 +338,10 @@
}
if ( file ) {
this.$element.addClass( 'oo-ui-selectFileWidget-canDrop' );
+ this.setActive( true );
} else {
this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
+ this.setActive( false );
dt.dropEffect = 'none';
}
@@ -338,6 +356,7 @@
*/
OO.ui.SelectFileWidget.prototype.onDragLeave = function () {
this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
+ this.setActive( false );
};
/**
@@ -353,6 +372,7 @@
e.preventDefault();
e.stopPropagation();
this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
+ this.setActive( false );
if ( this.isDisabled() || !this.isSupported ) {
return false;
@@ -372,6 +392,26 @@
};
/**
+ * Handle mouse over events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse over event
+ */
+OO.ui.SelectFileWidget.prototype.onMouseOver = function () {
+ this.setActive( true );
+};
+
+/**
+ * Handle mouse leave events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse over event
+ */
+OO.ui.SelectFileWidget.prototype.onMouseLeave = function () {
+ this.setActive( false );
+};
+
+/**
* @inheritdoc
*/
OO.ui.SelectFileWidget.prototype.setDisabled = function ( state ) {
@@ -381,3 +421,17 @@
}
return this;
};
+
+/**
+ * Set 'active' (hover) state, only matters for widgets with `dragDropUI:
true`.
+ *
+ * @param {boolean} value Whether widget is active
+ * @chainable
+ */
+OO.ui.SelectFileWidget.prototype.setActive = function ( value ) {
+ if ( this.dragDropUI ) {
+ this.active = value;
+ this.updateThemeClasses();
+ }
+ return this;
+};
--
To view, visit https://gerrit.wikimedia.org/r/231220
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6dfef09b94947d28032b9aae74fc922b1df4940a
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Anomie <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Nirzar <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
