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