Bartosz Dziewoński has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/332077 )
Change subject: demo: Add lots more FieldLayout demos
......................................................................
demo: Add lots more FieldLayout demos
Change-Id: I9d0bc6b658f8de73fbf6de829c849e7426a0b567
---
M demos/pages/widgets.js
M demos/pages/widgets.php
2 files changed, 198 insertions(+), 70 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/77/332077/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 97be642..b30fa87 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1,5 +1,7 @@
OO.ui.Demo.static.pages.widgets = function ( demo ) {
var i, styles, states, buttonStyleShowcaseWidget, $table, fieldsets,
+ loremIpsum = 'Lorem ipsum dolor sit amet, consectetur
adipisicing elit, ' +
+ 'sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.\u200E',
capsuleWithPopup, capsulePopupWidget,
horizontalDragItems = [],
verticalDragItems = [],
@@ -1923,7 +1925,7 @@
new OO.ui.FieldsetLayout( {
label: 'Field layouts',
icon: 'tag',
- help: 'This fieldset has an icon and a help
popup.\u200E',
+ help: loremIpsum,
items: [
new OO.ui.FieldLayout(
new OO.ui.ButtonWidget( {
@@ -1931,8 +1933,7 @@
} ),
{
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',
+ help: loremIpsum,
align: 'top'
}
),
@@ -1956,34 +1957,13 @@
align: 'top'
}
),
- new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget(),
+ new OO.ui.FieldLayout(
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'
+ label: $( '<i>' ).text(
'FieldLayout with rich text label' ),
+ align: 'top'
}
),
new OO.ui.ActionFieldLayout(
@@ -1996,15 +1976,11 @@
align: 'top'
}
),
- new OO.ui.ActionFieldLayout(
+ new OO.ui.FieldLayout(
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',
+ label: 'FieldLayout aligned top
with help',
+ help: loremIpsum,
align: 'top'
}
),
@@ -2014,10 +1990,98 @@
label: 'Button'
} ),
{
- label: $( '<i>' ).text(
'ActionFieldLayout aligned top with rich text label' ),
+ label: 'ActionFieldLayout
aligned top with help',
+ help: loremIpsum,
align: 'top'
}
),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned inline',
+ align: 'inline'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget(),
+ {
+ label: 'FieldLayout aligned
inline with help',
+ help: loremIpsum,
+ align: 'inline'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned inline with help',
+ help: loremIpsum,
+ align: 'inline'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned left',
+ align: 'left'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget(),
+ {
+ label: 'FieldLayout aligned
left with help',
+ help: loremIpsum,
+ align: 'left'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned left with help',
+ help: loremIpsum,
+ align: 'left'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned right',
+ align: 'right'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget(),
+ {
+ label: 'FieldLayout aligned
right with help',
+ help: loremIpsum,
+ align: 'right'
+ }
+ ),
+ new OO.ui.ActionFieldLayout(
+ new OO.ui.TextInputWidget(),
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'ActionFieldLayout
aligned right with help',
+ help: loremIpsum,
+ align: 'right'
+ }
+ ),
new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
value: ''
diff --git a/demos/pages/widgets.php b/demos/pages/widgets.php
index 3ceea2b..dcf73c9 100644
--- a/demos/pages/widgets.php
+++ b/demos/pages/widgets.php
@@ -4,6 +4,9 @@
exit;
}
+$loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " .
+ "sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.\xE2\x80\x8E";
+
$demoContainer = new OOUI\PanelLayout( [
'expanded' => false,
'padded' => true,
@@ -885,8 +888,7 @@
] ),
[
'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.\xE2\x80\x8E",
+ 'help' => $loremIpsum,
'align' => 'top'
]
),
@@ -910,34 +912,13 @@
'align' => 'top'
]
),
- new OOUI\ActionFieldLayout(
- new OOUI\TextInputWidget(),
+ new OOUI\FieldLayout(
new OOUI\ButtonWidget( [
'label' => 'Button'
] ),
[
- 'label' => 'ActionFieldLayout aligned left',
- 'align' => 'left'
- ]
- ),
- new OOUI\ActionFieldLayout(
- new OOUI\TextInputWidget(),
- new OOUI\ButtonWidget( [
- 'label' => 'Button'
- ] ),
- [
- 'label' => 'ActionFieldLayout aligned inline',
- 'align' => 'inline'
- ]
- ),
- new OOUI\ActionFieldLayout(
- new OOUI\TextInputWidget(),
- new OOUI\ButtonWidget( [
- 'label' => 'Button'
- ] ),
- [
- 'label' => 'ActionFieldLayout aligned right',
- 'align' => 'right'
+ 'label' => new OOUI\HtmlSnippet(
'<i>FieldLayout with rich text label</i>' ),
+ 'align' => 'top'
]
),
new OOUI\ActionFieldLayout(
@@ -950,15 +931,11 @@
'align' => 'top'
]
),
- new OOUI\ActionFieldLayout(
+ new OOUI\FieldLayout(
new OOUI\TextInputWidget(),
- new OOUI\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.\xE2\x80\x8E",
+ 'label' => 'FieldLayout aligned top with help',
+ 'help' => $loremIpsum,
'align' => 'top'
]
),
@@ -968,11 +945,98 @@
'label' => 'Button'
] ),
[
- 'label' =>
- new OOUI\HtmlSnippet(
'<i>ActionFieldLayout aligned top with rich text label</i>' ),
+ 'label' => 'ActionFieldLayout aligned top with
help',
+ 'help' => $loremIpsum,
'align' => 'top'
]
),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned inline',
+ 'align' => 'inline',
+ ]
+ ),
+ new OOUI\FieldLayout(
+ new OOUI\TextInputWidget(),
+ [
+ 'label' => 'FieldLayout aligned inline with
help',
+ 'help' => $loremIpsum,
+ 'align' => 'inline',
+ ]
+ ),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned inline
with help',
+ 'help' => $loremIpsum,
+ 'align' => 'inline',
+ ]
+ ),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned left',
+ 'align' => 'left',
+ ]
+ ),
+ new OOUI\FieldLayout(
+ new OOUI\TextInputWidget(),
+ [
+ 'label' => 'FieldLayout aligned left with help',
+ 'help' => $loremIpsum,
+ 'align' => 'left',
+ ]
+ ),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned left with
help',
+ 'help' => $loremIpsum,
+ 'align' => 'left',
+ ]
+ ),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned right',
+ 'align' => 'right',
+ ]
+ ),
+ new OOUI\FieldLayout(
+ new OOUI\TextInputWidget(),
+ [
+ 'label' => 'FieldLayout aligned right with
help',
+ 'help' => $loremIpsum,
+ 'align' => 'right',
+ ]
+ ),
+ new OOUI\ActionFieldLayout(
+ new OOUI\TextInputWidget(),
+ new OOUI\ButtonWidget( [
+ 'label' => 'Button'
+ ] ),
+ [
+ 'label' => 'ActionFieldLayout aligned right
with help',
+ 'help' => $loremIpsum,
+ 'align' => 'right',
+ ]
+ ),
new OOUI\FieldLayout(
new OOUI\TextInputWidget( [
'value' => ''
--
To view, visit https://gerrit.wikimedia.org/r/332077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9d0bc6b658f8de73fbf6de829c849e7426a0b567
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
