Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/175568
Change subject: [wip] Add an ActionFieldLayout
......................................................................
[wip] Add an ActionFieldLayout
Add an extension to FieldLayout that allows for an inline button
after the field. Demos added.
Change-Id: I2cdf9a43bc8fe9d681c12df6b427e25934a65200
---
M build/modules.json
M demos/pages/widgets.js
A src/layouts/ActionFieldLayout.js
M src/styles/core.less
A src/styles/layouts/ActionFieldLayout.less
5 files changed, 100 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/68/175568/1
diff --git a/build/modules.json b/build/modules.json
index 20bc694..c635b65 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -38,6 +38,7 @@
"src/layouts/BookletLayout.js",
"src/layouts/FieldLayout.js",
+ "src/layouts/ActionFieldLayout.js",
"src/layouts/FieldsetLayout.js",
"src/layouts/FormLayout.js",
"src/layouts/GridLayout.js",
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index fabfe7f..1408404 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -432,6 +432,57 @@
align: 'top'
}
),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( { value: 'Text
input' } ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout with text
field',
+ help: 'I am an additional, helpful
information. Lorem ipsum dolor sit amet, cibo definiebas pri ' +
+ 'in, duo ex inimicus perpetua
complectitur, mel periculis similique at.\u200E',
+ align: 'left'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.DropdownWidget( {
+ label: 'Select one',
+ align: 'top',
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( {
+ data: 'a',
+ label: 'First'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data: 'b',
+ label: 'Second'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data: 'c',
+ label: 'Third'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data: 'c',
+ label: 'The
fourth option has a long label'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data: 'd',
+ label: 'Fifth'
+ } )
+ ]
+ }
+ } ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout with drop
down field',
+ help: 'I am an additional, helpful
information. Lorem ipsum dolor sit amet, cibo definiebas pri ' +
+ 'in, duo ex inimicus perpetua
complectitur, mel periculis similique at.\u200E',
+ align: 'left'
+ }
+ ),
new OO.ui.FieldLayout(
new OO.ui.ButtonInputWidget( {
label: 'Submit the form',
diff --git a/src/layouts/ActionFieldLayout.js b/src/layouts/ActionFieldLayout.js
new file mode 100644
index 0000000..0188857
--- /dev/null
+++ b/src/layouts/ActionFieldLayout.js
@@ -0,0 +1,42 @@
+/**
+ * Layout made of a field, a button, and an optional label.
+ *
+ * @class
+ * @extends OO.ui.ActionFieldLayout
+ *
+ * @constructor
+ * @param {OO.ui.Widget} fieldWidget Field widget
+ * @param {OO.ui.ButtonWidget} buttonWidget Button widget
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top'
or 'inline'
+ * @cfg {string} [help] Explanatory text shown as a '?' icon.
+ */
+OO.ui.ActionFieldLayout = function OoUiActionFieldLayout( fieldWidget,
buttonWidget, config ) {
+ // Configuration initialization
+ config = $.extend( { align: 'left' }, config );
+
+ // Properties (must be set before parent constructor, which calls
#getTagName)
+ this.fieldWidget = fieldWidget;
+ this.buttonWidget = buttonWidget;
+
+ // Parent constructor
+ OO.ui.ActionFieldLayout.super.call( this, fieldWidget, config );
+
+ // Mixin constructors
+ OO.ui.LabelElement.call( this, config );
+
+ // Properties
+ this.$button = this.$( '<div>' )
+ .addClass( 'oo-ui-actionFieldLayout-button' )
+ .toggleClass( 'oo-ui-fieldLayout-disable',
this.buttonWidget.isDisabled() )
+ .append( this.buttonWidget.$element );
+
+ this.$field
+ .addClass( 'oo-ui-actionFieldLayout' )
+ .append( this.$button );
+
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.ActionFieldLayout, OO.ui.FieldLayout );
diff --git a/src/styles/core.less b/src/styles/core.less
index fccf383..cb8d192 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -29,6 +29,7 @@
@import 'Layout.less';
@import 'layouts/BookletLayout.less';
@import 'layouts/FieldLayout.less';
+@import 'layouts/ActionFieldLayout.less';
@import 'layouts/FieldsetLayout.less';
@import 'layouts/FormLayout.less';
@import 'layouts/GridLayout.less';
diff --git a/src/styles/layouts/ActionFieldLayout.less
b/src/styles/layouts/ActionFieldLayout.less
new file mode 100644
index 0000000..d83b7a8
--- /dev/null
+++ b/src/styles/layouts/ActionFieldLayout.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-actionFieldLayout-button {
+ display: inline-block;
+}
--
To view, visit https://gerrit.wikimedia.org/r/175568
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2cdf9a43bc8fe9d681c12df6b427e25934a65200
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
