Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/231220
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/widgets.less
M src/widgets/SelectFileWidget.js
7 files changed, 70 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/20/231220/1
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..26075b0 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",
"ooui-semicolon-separator": "; "
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index bef65ed..938dcc4 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",
"ooui-semicolon-separator": "{{optional}} Semicolon used as a separator"
}
diff --git a/src/core.js b/src/core.js
index 433e65a..4ce4ae9 100644
--- a/src/core.js
+++ b/src/core.js
@@ -237,6 +237,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',
// Semicolon separator
'ooui-semicolon-separator': '; '
};
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 807d705..bde017e 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -279,6 +279,29 @@
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-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/widgets.less
b/src/themes/mediawiki/widgets.less
index f8318b6..11fd133 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -281,6 +281,30 @@
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-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..adf332a 100644
--- a/src/widgets/SelectFileWidget.js
+++ b/src/widgets/SelectFileWidget.js
@@ -25,6 +25,7 @@
* @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;
@@ -34,8 +35,13 @@
accept: null,
placeholder: OO.ui.msg( 'ooui-selectfile-placeholder' ),
notsupported: OO.ui.msg( 'ooui-selectfile-not-supported' ),
- droppable: true
+ droppable: true,
+ dragDropUI: false
}, config );
+
+ if ( config.dragDropUI ) {
+ config.placeholder = OO.ui.msg(
'ooui-selectfile-dragdrop-placeholder' );
+ }
// Parent constructor
OO.ui.SelectFileWidget.parent.call( this, config );
@@ -97,7 +103,11 @@
.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' );
+ } else {
+ this.$element.addClass(
'oo-ui-selectFileWidget-droppable' );
+ }
}
};
--
To view, visit https://gerrit.wikimedia.org/r/231220
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6dfef09b94947d28032b9aae74fc922b1df4940a
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
