Bartosz Dziewoński has uploaded a new change for review. https://gerrit.wikimedia.org/r/189334
Change subject: demo: Reorder widgets into somewhat logical groupings
......................................................................
demo: Reorder widgets into somewhat logical groupings
Change-Id: I08d487d7c750192655e7727366917f145f2be8c0
---
M demos/pages/widgets.js
1 file changed, 992 insertions(+), 962 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/34/189334/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 85e8ce7..ff994a7 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1,5 +1,5 @@
OO.ui.Demo.static.pages.widgets = function ( demo ) {
- var fieldset, fieldLayouts,
+ var fieldsets,
$demo = demo.$element;
/**
@@ -113,985 +113,1015 @@
return items;
};
- fieldLayouts = [
- new OO.ui.FieldLayout(
- new OO.ui.IconWidget( {
- icon: 'picture',
- title: 'Picture icon'
- } ),
- {
- label: 'IconWidget (normal)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.IconWidget( {
- icon: 'picture',
- title: 'Picture icon',
- disabled: true
- } ),
- {
- label: 'IconWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.IndicatorWidget( {
- indicator: 'required',
- title: 'Required indicator'
- } ),
- {
- label: 'IndicatorWidget (normal)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.IndicatorWidget( {
- indicator: 'required',
- title: 'Required indicator',
- disabled: true
- } ),
- {
- label: 'IndicatorWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( { label: 'Normal' } ),
- {
- label: 'ButtonWidget (normal)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Progressive',
- flags: [ 'progressive' ]
- } ),
- {
- label: 'ButtonWidget (progressive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Constructive',
- flags: [ 'constructive' ]
- } ),
- {
- label: 'ButtonWidget (constructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Destructive',
- flags: [ 'destructive' ]
- } ),
- {
- label: 'ButtonWidget (destructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Primary progressive',
- flags: [ 'primary', 'progressive' ]
- } ),
- {
- label: 'ButtonWidget (primary,
progressive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Primary constructive',
- flags: [ 'primary', 'constructive' ]
- } ),
- {
- label: 'ButtonWidget (primary,
constructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Primary destructive',
- flags: [ 'primary', 'destructive' ]
- } ),
- {
- label: 'ButtonWidget (primary,
destructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Disabled',
- disabled: true
- } ),
- {
- label: 'ButtonWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Constructive',
- flags: [ 'constructive' ],
- disabled: true
- } ),
- {
- label: 'ButtonWidget (constructive,
disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Constructive',
- icon: 'picture',
- flags: [ 'constructive' ],
- disabled: true
- } ),
- {
- label: 'ButtonWidget (constructive, icon,
disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Icon',
- icon: 'picture'
- } ),
- {
- label: 'ButtonWidget (icon)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Icon',
- icon: 'picture',
- flags: [ 'progressive' ]
- } ),
- {
- label: 'ButtonWidget (icon, progressive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Indicator',
- indicator: 'down'
- } ),
- {
- label: 'ButtonWidget (indicator)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Indicator',
- indicator: 'down',
- flags: [ 'constructive' ]
- } ),
- {
- label: 'ButtonWidget (indicator,
constructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'help',
- title: 'Icon only'
- } ),
- {
- label: 'ButtonWidget (icon only)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'picture',
- label: 'Labeled'
- } ),
- {
- label: 'ButtonWidget (frameless)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- flags: [ 'progressive' ],
- icon: 'check',
- label: 'Progressive'
- } ),
- {
- label: 'ButtonWidget (frameless,
progressive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- flags: [ 'destructive' ],
- icon: 'remove',
- label: 'Destructive'
- } ),
- {
- label: 'ButtonWidget (frameless,
destructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- flags: [ 'constructive' ],
- icon: 'add',
- label: 'Constructive'
- } ),
- {
- label: 'ButtonWidget (frameless,
constructive)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- icon: 'picture',
- label: 'Disabled',
- disabled: true
- } ),
- {
- label: 'ButtonWidget (frameless,
disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- framed: false,
- flags: [ 'constructive' ],
- icon: 'picture',
- label: 'Constructive',
- disabled: true
- } ),
- {
- label: 'ButtonWidget (frameless, constructive,
disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.PopupButtonWidget( {
- icon: 'info',
- framed: false,
- popup: {
- head: true,
- label: 'More information',
- $content: $( '<p>Extra information
here.</p>' ),
- padded: true,
- align: 'left'
- }
- } ),
- {
- label: 'PopupButtonWidget (frameless, with
popup head)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.PopupButtonWidget( {
- icon: 'menu',
- label: 'Options',
- popup: {
- $content: $( '<p>Additional options
here.</p>' ),
- padded: true,
- align: 'left'
- }
- } ),
- {
- label: 'PopupButtonWidget (framed, no popup
head)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new DragDropGroupWidget( {
- orientation: 'horizontal',
- items: [
- new DragDropItemWidget( {
- $: this.$,
- data: 'item1',
- label: 'Item 1'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item2',
- label: 'Item 2'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item3',
- label: 'Item 3'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item4',
- label: 'Item 4'
- } )
- ]
- } ),
- {
- label: 'DraggableGroupWidget
(horizontal)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new DragDropGroupWidget( {
- items: [
- new DragDropItemWidget( {
- $: this.$,
- data: 'item1',
- label: 'Item 1'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item2',
- label: 'Item 2'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item3',
- label: 'Item 3'
- } ),
- new DragDropItemWidget( {
- $: this.$,
- data: 'item4',
- label: 'Item 4'
- } )
- ]
- } ),
- {
- label: 'DraggableGroupWidget (vertical)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonGroupWidget( {
- items: [
- new OO.ui.ButtonWidget( { icon:
'picture', indicator: 'down' } ),
- new OO.ui.ToggleButtonWidget( {
- label: 'One',
+ fieldsets = [
+ new OO.ui.FieldsetLayout( {
+ label: 'Simple buttons',
+ items: [
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( { label:
'Normal' } ),
+ {
+ label: 'ButtonWidget
(normal)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Progressive',
flags: [ 'progressive' ]
} ),
- new OO.ui.ToggleButtonWidget( {
- label: 'Two',
+ {
+ label: 'ButtonWidget
(progressive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Constructive',
flags: [ 'constructive' ]
} ),
- new OO.ui.ToggleButtonWidget( {
- label: 'Three',
+ {
+ label: 'ButtonWidget
(constructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Destructive',
flags: [ 'destructive' ]
- } )
- ]
- } ),
- {
- label: 'ButtonGroupWidget (colors)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonGroupWidget( {
- items: [
- new OO.ui.ToggleButtonWidget( {
- label: 'One'
} ),
- new OO.ui.ToggleButtonWidget( {
- label: 'Two'
+ {
+ label: 'ButtonWidget
(destructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary progressive',
+ flags: [ 'primary',
'progressive' ]
} ),
- new OO.ui.ToggleButtonWidget( {
- label: 'Three'
- } )
- ]
- } ),
- {
- label: 'ButtonGroupWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonSelectWidget( {
- items: [
- new OO.ui.ButtonOptionWidget( {
- data: 'a',
+ {
+ label: 'ButtonWidget (primary,
progressive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary constructive',
+ flags: [ 'primary',
'constructive' ]
+ } ),
+ {
+ label: 'ButtonWidget (primary,
constructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary destructive',
+ flags: [ 'primary',
'destructive' ]
+ } ),
+ {
+ label: 'ButtonWidget (primary,
destructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Disabled',
+ disabled: true
+ } ),
+ {
+ label: 'ButtonWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Constructive',
+ flags: [ 'constructive' ],
+ disabled: true
+ } ),
+ {
+ label: 'ButtonWidget
(constructive, disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Constructive',
icon: 'picture',
+ flags: [ 'constructive' ],
+ disabled: true
+ } ),
+ {
+ label: 'ButtonWidget
(constructive, icon, disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Icon',
+ icon: 'picture'
+ } ),
+ {
+ label: 'ButtonWidget
(icon)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Icon',
+ icon: 'picture',
+ flags: [ 'progressive' ]
+ } ),
+ {
+ label: 'ButtonWidget (icon,
progressive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Indicator',
indicator: 'down'
} ),
- new OO.ui.ButtonOptionWidget( {
- data: 'b',
- label: 'One',
- flags: [ 'progressive' ]
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 'c',
- label: 'Two',
+ {
+ label: 'ButtonWidget
(indicator)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Indicator',
+ indicator: 'down',
flags: [ 'constructive' ]
} ),
- new OO.ui.ButtonOptionWidget( {
- data: 'd',
- label: 'Three',
- flags: [ 'destructive' ]
- } )
- ]
- } ),
- {
- label: 'ButtonSelectWidget (colors)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonSelectWidget( {
- items: [
- new OO.ui.ButtonOptionWidget( {
- data: 'b',
- label: 'One'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 'c',
- label: 'Two'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 'd',
- label: 'Three'
- } )
- ]
- } ),
- {
- label: 'ButtonSelectWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonSelectWidget( {
- disabled: true,
- items: [
- new OO.ui.ButtonOptionWidget( {
- data: 'a',
- icon: 'picture', indicator:
'down'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 1,
- label: 'One'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 2,
- label: 'Two'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 3,
- label: 'Three'
- } )
- ]
- } ),
- {
- label: 'ButtonSelectWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonSelectWidget( {
- items: [
- new OO.ui.ButtonOptionWidget( {
- data: 'a',
- icon: 'picture', indicator:
'down'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 1,
- label: 'One',
- disabled: true
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 2,
- label: 'Two'
- } ),
- new OO.ui.ButtonOptionWidget( {
- data: 3,
- label: 'Three',
- disabled: true
- } )
- ]
- } ),
- {
- label: 'ButtonSelectWidget (disabled
items)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleButtonWidget( { label: 'Toggle' } ),
- {
- label: 'ToggleButtonWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleButtonWidget( { label: 'Toggle', value:
true } ),
- {
- label: 'ToggleButtonWidget (initially
active)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleButtonWidget( { icon: 'next' } ),
- {
- label: 'ToggleButtonWidget (icon only)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleSwitchWidget(),
- {
- label: 'ToggleSwitchWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleSwitchWidget( { disabled: true } ),
- {
- label: 'ToggleSwitchWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ToggleSwitchWidget( { disabled: true, value:
true } ),
- {
- label: 'ToggleSwitchWidget (disabled,
checked)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'ActionFieldLayout aligned left',
- align: 'left'
- }
- ),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'ActionFieldLayout aligned inline',
- align: 'inline'
- }
- ),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'ActionFieldLayout aligned right',
- align: 'right'
- }
- ),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'ActionFieldLayout aligned top',
- align: 'top'
- }
- ),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'ActionFieldLayout aligned top with
help',
- 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: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- label: 'Button'
- } ),
- {
- label: 'FieldLayout with help',
- 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: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonInputWidget( {
- label: 'Submit the form',
- type: 'submit'
- } ),
- {
- align: 'top',
- label: 'ButtonInputWidget (type: submit)\u200E'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ButtonInputWidget( {
- label: 'Submit the form',
- type: 'submit',
- useInputTag: true
- } ),
- {
- align: 'top',
- label: 'ButtonInputWidget (type: submit, using
<input/>)\u200E'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.CheckboxInputWidget( {
- selected: true
- } ),
- {
- align: 'inline',
- label: 'CheckboxInputWidget'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.CheckboxInputWidget( {
- selected: true,
- disabled: true
- } ),
- {
- align: 'inline',
- label: 'CheckboxInputWidget (disabled)\u200E'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.RadioInputWidget( {
- name: 'oojs-ui-radio-demo'
- } ),
- {
- align: 'inline',
- label: 'Connected RadioInputWidget #1'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.RadioInputWidget( {
- name: 'oojs-ui-radio-demo',
- selected: true
- } ),
- {
- align: 'inline',
- label: 'Connected RadioInputWidget #2'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.RadioSelectWidget( {
- items: [
- new OO.ui.RadioOptionWidget( {
- data: 'Cat',
- label: 'Cat'
- } ),
- new OO.ui.RadioOptionWidget( {
- data: 'Dog',
- label: 'Dog'
- } )
- ]
- } ),
- {
- align: 'top',
- label: 'RadioSelectWidget'
- }
- ),
- new OO.ui.FieldLayout(
- new NumberLookupTextInputWidget(),
- {
- label: 'LookupElement (try inputting an
integer)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.DropdownWidget( {
- label: 'Select one',
- 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'
- } )
- ]
- }
- } ),
- {
- label: 'DropdownWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.DropdownWidget( {
- label: 'Select one',
- menu: {
- items: [
- new OO.ui.MenuOptionWidget( {
- data: 'a',
- label: 'First'
- } ),
- new OO.ui.MenuOptionWidget( {
- data: 'b',
- label: 'Disabled second
option',
- disabled: true
- } ),
- new OO.ui.MenuOptionWidget( {
- data: 'c',
- label: 'Third'
- } ),
- new OO.ui.MenuOptionWidget( {
- data: 'd',
- label: 'Disabled fourth
option with long label',
- disabled: true
- } ),
- new OO.ui.MenuOptionWidget( {
- data: 'c',
- label: 'Third'
- } )
- ]
- }
- } ),
- {
- label: 'DropdownWidget (disabled
options)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.DropdownWidget( {
- label: 'Select one',
- disabled: true,
- 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: 'd',
- label: 'Fourth'
- } )
- ]
- }
- } ),
- {
- label: 'DropdownWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.DropdownInputWidget( {
- options: [
{
- data: 'a',
- label: 'First'
- },
- {
- data: 'b',
- label: 'Second'
- },
- {
- data: 'c',
- label: 'Third'
+ label: 'ButtonWidget
(indicator, constructive)\u200E',
+ align: 'top'
}
- ],
- value: 'b'
- } ),
- {
- label: 'DropdownInputWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ComboBoxWidget( {
- menu: {
- items: [
- new OO.ui.MenuOptionWidget( {
data: 'asd', label: 'Label for asd' } ),
- new OO.ui.MenuOptionWidget( {
data: 'fgh', label: 'Label for fgh' } ),
- new OO.ui.MenuOptionWidget( {
data: 'jkl', label: 'Label for jkl' } ),
- new OO.ui.MenuOptionWidget( {
data: 'zxc', label: 'Label for zxc' } ),
- new OO.ui.MenuOptionWidget( {
data: 'vbn', label: 'Label for vbn' } )
- ]
- }
- } ),
- {
- label: 'ComboBoxWidget',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ComboBoxWidget( {
- disabled: true,
- menu: {
- items: [
- new OO.ui.MenuOptionWidget( {
data: 'asd', label: 'Label for asd' } ),
- new OO.ui.MenuOptionWidget( {
data: 'fgh', label: 'Label for fgh' } ),
- new OO.ui.MenuOptionWidget( {
data: 'jkl', label: 'Label for jkl' } ),
- new OO.ui.MenuOptionWidget( {
data: 'zxc', label: 'Label for zxc' } ),
- new OO.ui.MenuOptionWidget( {
data: 'vbn', label: 'Label for vbn' } )
- ]
- }
- } ),
- {
- label: 'ComboBoxWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ComboBoxWidget(),
- {
- label: 'ComboBoxWidget (empty)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( { value: 'Text input' } ),
- {
- label: 'TextInputWidget\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( { icon: 'search' } ),
- {
- label: 'TextInputWidget (icon)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- indicator: 'required',
- required: true
- } ),
- {
- label: 'TextInputWidget (indicator,
required)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( { placeholder: 'Placeholder'
} ),
- {
- label: 'TextInputWidget (placeholder)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- value: 'Readonly',
- readOnly: true
- } ),
- {
- label: 'TextInputWidget (readonly)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- value: 'Disabled',
- disabled: true
- } ),
- {
- label: 'TextInputWidget (disabled)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- multiline: true,
- value: 'Multiline\nMultiline'
- } ),
- {
- label: 'TextInputWidget (multiline)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- multiline: true,
- autosize: true,
- value: 'Autosize\nAutosize\nAutosize\nAutosize'
- } ),
- {
- label: 'TextInputWidget (autosize)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.TextInputWidget( {
- icon: 'picture',
- indicator: 'alert',
- value: 'Text input with label',
- label: 'Inline label'
- } ),
- {
- label: 'TextInputWidget (label)\u200E',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ProgressBarWidget( {
- progress: 33
- } ),
- {
- label: 'Progress bar',
- align: 'top'
- }
- ),
- new OO.ui.FieldLayout(
- new OO.ui.ProgressBarWidget( {
- progress: false
- } ),
- {
- label: 'Progress bar (indeterminate)\u200E',
- align: 'top'
- }
- )
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'help',
+ title: 'Icon only'
+ } ),
+ {
+ label: 'ButtonWidget (icon
only)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'picture',
+ label: 'Labeled'
+ } ),
+ {
+ label: 'ButtonWidget
(frameless)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ flags: [ 'progressive' ],
+ icon: 'check',
+ label: 'Progressive'
+ } ),
+ {
+ label: 'ButtonWidget
(frameless, progressive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ flags: [ 'destructive' ],
+ icon: 'remove',
+ label: 'Destructive'
+ } ),
+ {
+ label: 'ButtonWidget
(frameless, destructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ flags: [ 'constructive' ],
+ icon: 'add',
+ label: 'Constructive'
+ } ),
+ {
+ label: 'ButtonWidget
(frameless, constructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'picture',
+ label: 'Disabled',
+ disabled: true
+ } ),
+ {
+ label: 'ButtonWidget
(frameless, disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ framed: false,
+ flags: [ 'constructive' ],
+ icon: 'picture',
+ label: 'Constructive',
+ disabled: true
+ } ),
+ {
+ label: 'ButtonWidget
(frameless, constructive, disabled)\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
+ label: 'Button sets',
+ items: [
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonGroupWidget( {
+ items: [
+ new OO.ui.ButtonWidget(
{ icon: 'picture', indicator: 'down' } ),
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'One',
+ flags: [
'progressive' ]
+ } ),
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'Two',
+ flags: [
'constructive' ]
+ } ),
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'Three',
+ flags: [
'destructive' ]
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonGroupWidget
(colors)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonGroupWidget( {
+ items: [
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'One'
+ } ),
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'Two'
+ } ),
+ new
OO.ui.ToggleButtonWidget( {
+ label: 'Three'
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonGroupWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonSelectWidget( {
+ items: [
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'a',
+ icon: 'picture',
+ indicator:
'down'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'b',
+ label: 'One',
+ flags: [
'progressive' ]
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'c',
+ label: 'Two',
+ flags: [
'constructive' ]
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'd',
+ label: 'Three',
+ flags: [
'destructive' ]
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonSelectWidget
(colors)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonSelectWidget( {
+ items: [
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'b',
+ label: 'One'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'c',
+ label: 'Two'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'd',
+ label: 'Three'
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonSelectWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonSelectWidget( {
+ disabled: true,
+ items: [
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'a',
+ icon:
'picture', indicator: 'down'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 1,
+ label: 'One'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 2,
+ label: 'Two'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 3,
+ label: 'Three'
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonSelectWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonSelectWidget( {
+ items: [
+ new
OO.ui.ButtonOptionWidget( {
+ data: 'a',
+ icon:
'picture', indicator: 'down'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 1,
+ label: 'One',
+ disabled: true
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 2,
+ label: 'Two'
+ } ),
+ new
OO.ui.ButtonOptionWidget( {
+ data: 3,
+ label: 'Three',
+ disabled: true
+ } )
+ ]
+ } ),
+ {
+ label: 'ButtonSelectWidget
(disabled items)\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
+ label: 'Form widgets',
+ items: [
+ new OO.ui.FieldLayout(
+ new OO.ui.CheckboxInputWidget( {
+ selected: true
+ } ),
+ {
+ align: 'inline',
+ label: 'CheckboxInputWidget'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.CheckboxInputWidget( {
+ selected: true,
+ disabled: true
+ } ),
+ {
+ align: 'inline',
+ label: 'CheckboxInputWidget
(disabled)\u200E'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.RadioInputWidget( {
+ name: 'oojs-ui-radio-demo'
+ } ),
+ {
+ align: 'inline',
+ label: 'Connected
RadioInputWidget #1'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.RadioInputWidget( {
+ name: 'oojs-ui-radio-demo',
+ selected: true
+ } ),
+ {
+ align: 'inline',
+ label: 'Connected
RadioInputWidget #2'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.RadioSelectWidget( {
+ items: [
+ new
OO.ui.RadioOptionWidget( {
+ data: 'Cat',
+ label: 'Cat'
+ } ),
+ new
OO.ui.RadioOptionWidget( {
+ data: 'Dog',
+ label: 'Dog'
+ } )
+ ]
+ } ),
+ {
+ align: 'top',
+ label: 'RadioSelectWidget'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleSwitchWidget(),
+ {
+ label: 'ToggleSwitchWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleSwitchWidget( {
disabled: true } ),
+ {
+ label: 'ToggleSwitchWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleSwitchWidget( {
disabled: true, value: true } ),
+ {
+ label: 'ToggleSwitchWidget
(disabled, checked)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleButtonWidget( { label:
'Toggle' } ),
+ {
+ label: 'ToggleButtonWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleButtonWidget( { label:
'Toggle', value: true } ),
+ {
+ label: 'ToggleButtonWidget
(initially active)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ToggleButtonWidget( { icon:
'next' } ),
+ {
+ label: 'ToggleButtonWidget
(icon only)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( { value:
'Text input' } ),
+ {
+ label: 'TextInputWidget\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( { icon:
'search' } ),
+ {
+ label: 'TextInputWidget
(icon)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ indicator: 'required',
+ required: true
+ } ),
+ {
+ label: 'TextInputWidget
(indicator, required)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
placeholder: 'Placeholder' } ),
+ {
+ label: 'TextInputWidget
(placeholder)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Readonly',
+ readOnly: true
+ } ),
+ {
+ label: 'TextInputWidget
(readonly)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Disabled',
+ disabled: true
+ } ),
+ {
+ label: 'TextInputWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ multiline: true,
+ value: 'Multiline\nMultiline'
+ } ),
+ {
+ label: 'TextInputWidget
(multiline)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ multiline: true,
+ autosize: true,
+ value:
'Autosize\nAutosize\nAutosize\nAutosize'
+ } ),
+ {
+ label: 'TextInputWidget
(autosize)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ icon: 'picture',
+ indicator: 'alert',
+ value: 'Text input with label',
+ label: 'Inline label'
+ } ),
+ {
+ label: 'TextInputWidget
(label)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.DropdownWidget( {
+ label: 'Select one',
+ 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'
+ } )
+ ]
+ }
+ } ),
+ {
+ label: 'DropdownWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.DropdownWidget( {
+ label: 'Select one',
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( {
+ data:
'a',
+ label:
'First'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'b',
+ label:
'Disabled second option',
+
disabled: true
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'c',
+ label:
'Third'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'd',
+ label:
'Disabled fourth option with long label',
+
disabled: true
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'c',
+ label:
'Third'
+ } )
+ ]
+ }
+ } ),
+ {
+ label: 'DropdownWidget
(disabled options)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.DropdownWidget( {
+ label: 'Select one',
+ disabled: true,
+ 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:
'd',
+ label:
'Fourth'
+ } )
+ ]
+ }
+ } ),
+ {
+ label: 'DropdownWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.DropdownInputWidget( {
+ options: [
+ {
+ data: 'a',
+ label: 'First'
+ },
+ {
+ data: 'b',
+ label: 'Second'
+ },
+ {
+ data: 'c',
+ label: 'Third'
+ }
+ ],
+ value: 'b'
+ } ),
+ {
+ label: 'DropdownInputWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ComboBoxWidget( {
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'ComboBoxWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ComboBoxWidget( {
+ disabled: true,
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'ComboBoxWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ComboBoxWidget(),
+ {
+ label: 'ComboBoxWidget
(empty)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonInputWidget( {
+ label: 'Submit the form',
+ type: 'submit'
+ } ),
+ {
+ align: 'top',
+ label: 'ButtonInputWidget
(type: submit)\u200E'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonInputWidget( {
+ label: 'Submit the form',
+ type: 'submit',
+ useInputTag: true
+ } ),
+ {
+ align: 'top',
+ label: 'ButtonInputWidget
(type: submit, using <input/>)\u200E'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
+ label: 'Draggable',
+ items: [
+ new OO.ui.FieldLayout(
+ new DragDropGroupWidget( {
+ orientation: 'horizontal',
+ items: [
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item1',
+ label: 'Item 1'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item2',
+ label: 'Item 2'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item3',
+ label: 'Item 3'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item4',
+ label: 'Item 4'
+ } )
+ ]
+ } ),
+ {
+ label: 'DraggableGroupWidget
(horizontal)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new DragDropGroupWidget( {
+ items: [
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item1',
+ label: 'Item 1'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item2',
+ label: 'Item 2'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item3',
+ label: 'Item 3'
+ } ),
+ new DragDropItemWidget(
{
+ $: this.$,
+ data: 'item4',
+ label: 'Item 4'
+ } )
+ ]
+ } ),
+ {
+ label: 'DraggableGroupWidget
(vertical)\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
+ label: 'Other widgets',
+ items: [
+ new OO.ui.FieldLayout(
+ new OO.ui.IconWidget( {
+ icon: 'picture',
+ title: 'Picture icon'
+ } ),
+ {
+ label: 'IconWidget
(normal)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.IconWidget( {
+ icon: 'picture',
+ title: 'Picture icon',
+ disabled: true
+ } ),
+ {
+ label: 'IconWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.IndicatorWidget( {
+ indicator: 'required',
+ title: 'Required indicator'
+ } ),
+ {
+ label: 'IndicatorWidget
(normal)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.IndicatorWidget( {
+ indicator: 'required',
+ title: 'Required indicator',
+ disabled: true
+ } ),
+ {
+ label: 'IndicatorWidget
(disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.PopupButtonWidget( {
+ icon: 'info',
+ framed: false,
+ popup: {
+ head: true,
+ label: 'More
information',
+ $content: $( '<p>Extra
information here.</p>' ),
+ padded: true,
+ align: 'left'
+ }
+ } ),
+ {
+ label: 'PopupButtonWidget
(frameless, with popup head)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.PopupButtonWidget( {
+ icon: 'menu',
+ label: 'Options',
+ popup: {
+ $content: $(
'<p>Additional options here.</p>' ),
+ padded: true,
+ align: 'left'
+ }
+ } ),
+ {
+ label: 'PopupButtonWidget
(framed, no popup head)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new NumberLookupTextInputWidget(),
+ {
+ label: 'LookupElement (try
inputting an integer)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ProgressBarWidget( {
+ progress: 33
+ } ),
+ {
+ label: 'Progress bar',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ProgressBarWidget( {
+ progress: false
+ } ),
+ {
+ label: 'Progress bar
(indeterminate)\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
+ new OO.ui.FieldsetLayout( {
+ label: 'Field layouts',
+ help: 'I am an additional, helpful information. Lorem
ipsum dolor sit amet, cibo pri ' +
+ 'in, duo ex inimicus perpetua complectitur, mel
periculis similique at.\u200E',
+ items: [
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'FieldLayout with help',
+ help: 'I am an additional,
helpful information. Lorem ipsum dolor sit amet, cibo pri ' +
+ 'in, duo ex inimicus
perpetua complectitur, mel periculis similique at.\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( {} ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned left',
+ align: 'left'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( {} ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned inline',
+ align: 'inline'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( {} ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned right',
+ align: 'right'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( {} ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned top',
+ align: 'top'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget( {} ),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned top with help',
+ help: 'I am an additional,
helpful information. Lorem ipsum dolor sit amet, cibo pri ' +
+ 'in, duo ex inimicus
perpetua complectitur, mel periculis similique at.\u200E',
+ align: 'top'
+ }
+ )
+ ]
+ } ),
];
- $.each( fieldLayouts, function ( i, fieldLayout ) {
- fieldLayout.$element.append(
- demo.buildConsole( fieldLayout.fieldWidget, 'widget' )
- );
+ $.each( fieldsets, function ( i, fieldsetLayout ) {
+ $.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) {
+ fieldLayout.$element.append(
+ demo.buildConsole( fieldLayout.fieldWidget,
'widget' )
+ );
+ } );
} );
- fieldset = new OO.ui.FieldsetLayout( {
- label: 'Widgets',
- 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'
- } );
- fieldset.addItems( fieldLayouts );
- $demo.append( $( '<div class="oo-ui-demo-container">' ).append(
fieldset.$element ) );
+ $demo.append( $( '<div class="oo-ui-demo-container">' ).append(
+ $( fieldsets.map( function ( fieldset ) { return
fieldset.$element[0]; } ) )
+ ) );
};
OO.ui.Demo.static.defaultPage = 'widgets';
--
To view, visit https://gerrit.wikimedia.org/r/189334
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I08d487d7c750192655e7727366917f145f2be8c0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
