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