Bartosz Dziewoński has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/189360

Change subject: [WIP] Add horizontal alignment test to demo
......................................................................

[WIP] Add horizontal alignment test to demo

Bug: T87546
Change-Id: I1c523e6c7db90306c88db59510d569227190e622
---
M demos/pages/widgets.js
M demos/styles/demo.css
M demos/widgets.php
3 files changed, 81 insertions(+), 1 deletion(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/60/189360/1

diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index a5440b5..a64d158 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1,5 +1,5 @@
 OO.ui.Demo.static.pages.widgets = function ( demo ) {
-       var styles, states, buttonStyleShowcaseWidget, fieldsets,
+       var styles, states, buttonStyleShowcaseWidget, 
horizontalAlignmentWidget, fieldsets,
                $demo = demo.$element;
 
        /**
@@ -181,6 +181,28 @@
                } );
                buttonStyleShowcaseWidget.$element.append( $( '<br>' ) );
        } );
+
+       horizontalAlignmentWidget = new OO.ui.Widget( {
+               classes: [ 'oo-ui-demo-horizontal-alignment' ]
+       } );
+       horizontalAlignmentWidget.$element.append(
+               new OO.ui.CheckboxInputWidget( { selected: true } ).$element,
+               new OO.ui.RadioInputWidget( { selected: true } ).$element,
+               new OO.ui.ButtonWidget( { label: 'Button' } ).$element,
+               new OO.ui.ButtonGroupWidget( { items: [
+                       new OO.ui.ButtonWidget( { label: 'A' } ),
+                       new OO.ui.ButtonWidget( { label: 'B' } )
+               ] } ).$element,
+               new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } 
).$element,
+               new OO.ui.TextInputWidget( { value: 'TextInput' } ).$element,
+               new OO.ui.DropdownInputWidget( { options: [
+                       {
+                               label: 'DropdownInput',
+                               value: null
+                       }
+               ] } ).$element,
+               new OO.ui.LabelWidget( { label: 'Label' } ).$element
+       );
 
        fieldsets = [
                new OO.ui.FieldsetLayout( {
@@ -953,6 +975,17 @@
                        ]
                } ),
                new OO.ui.FieldsetLayout( {
+                       label: 'Inline alignment',
+                       items: [
+                               new OO.ui.FieldLayout(
+                                       horizontalAlignmentWidget,
+                                       {
+                                               align: 'top'
+                                       }
+                               )
+                       ]
+               } ),
+               new OO.ui.FieldsetLayout( {
                        label: 'Draggable',
                        items: [
                                new OO.ui.FieldLayout(
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 1da6fd9..7218bce 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -110,6 +110,20 @@
        opacity: 1;
 }
 
+/* Widgets demo */
+
+.oo-ui-demo-horizontal-alignment > .oo-ui-checkboxInputWidget,
+.oo-ui-demo-horizontal-alignment > .oo-ui-radioInputWidget,
+.oo-ui-demo-horizontal-alignment > .oo-ui-buttonInputWidget,
+.oo-ui-demo-horizontal-alignment > .oo-ui-textInputWidget,
+.oo-ui-demo-horizontal-alignment > .oo-ui-dropdownInputWidget {
+       display: inline-block;
+}
+
+.oo-ui-demo-horizontal-alignment > .oo-ui-textInputWidget,
+.oo-ui-demo-horizontal-alignment > .oo-ui-dropdownInputWidget {
+       max-width: 10em;
+}
 
 /* Console */
 
diff --git a/demos/widgets.php b/demos/widgets.php
index a95668c..05ec44a 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -145,6 +145,28 @@
                                        }
                                        
$buttonStyleShowcaseWidget->appendContent( new OOUI\HtmlSnippet( '<br />' ) );
                                }
+                               
+                               $horizontalAlignmentWidget = new OOUI\Widget( 
array(
+                                       'classes' => array( 
'oo-ui-demo-horizontal-alignment' )
+                               ) );
+                               $horizontalAlignmentWidget->appendContent(
+                                       new OOUI\CheckboxInputWidget( array( 
'selected' => true ) ),
+                                       new OOUI\RadioInputWidget( array( 
'selected' => true ) ),
+                                       new OOUI\ButtonWidget( array( 'label' 
=> 'Button' ) ),
+                                       new OOUI\ButtonGroupWidget( array( 
'items' => array(
+                                               new OOUI\ButtonWidget( array( 
'label' => 'A' ) ),
+                                               new OOUI\ButtonWidget( array( 
'label' => 'B' ) )
+                                       ) ) ),
+                                       new OOUI\ButtonInputWidget( array( 
'label' => 'ButtonInput' ) ),
+                                       new OOUI\TextInputWidget( array( 
'value' => 'TextInput' ) ),
+                                       new OOUI\DropdownInputWidget( array( 
'options' => array(
+                                               array(
+                                                       'label' => 
'DropdownInput',
+                                                       'value' => null
+                                               )
+                                       ) ) ),
+                                       new OOUI\LabelWidget( array( 'label' => 
'Label' ) )
+                               );
 
                                echo new OOUI\FieldsetLayout( array(
                                        'label' => 'Simple buttons',
@@ -585,6 +607,17 @@
                                        )
                                ) );
                                echo new OOUI\FieldsetLayout( array(
+                                       'label' => 'Inline alignment',
+                                       'items' => array(
+                                               new OOUI\FieldLayout(
+                                                       
$horizontalAlignmentWidget,
+                                                       array(
+                                                               'align' => 'top'
+                                                       )
+                                               )
+                                       )
+                               ) );
+                               echo new OOUI\FieldsetLayout( array(
                                        'label' => 'Other widgets',
                                        'items' => array(
                                                new OOUI\FieldLayout(

-- 
To view, visit https://gerrit.wikimedia.org/r/189360
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I1c523e6c7db90306c88db59510d569227190e622
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

Reply via email to