Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/207973
Change subject: Add icons with variants to icon demo
......................................................................
Add icons with variants to icon demo
Somewhat underwhelming right now.
Bug: T97584
Change-Id: I5a07410f4257389c928c8e51a6ec6667219c7ff4
---
M demos/pages/icons.js
M demos/styles/demo.css
2 files changed, 68 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/73/207973/1
diff --git a/demos/pages/icons.js b/demos/pages/icons.js
index 315e567..83af7b0 100644
--- a/demos/pages/icons.js
+++ b/demos/pages/icons.js
@@ -1,5 +1,5 @@
OO.ui.Demo.static.pages.icons = function ( demo ) {
- var i, len, iconSet, iconsFieldset,
+ var i, len, iconSet, iconsFieldset, iconButton, selector,
icons = {
core: [
'add',
@@ -195,6 +195,7 @@
'up'
],
iconsFieldsets = [],
+ iconsButtons = [],
indicatorsFieldset = new OO.ui.FieldsetLayout( { label:
'Indicators' } );
for ( i = 0, len = indicators.length; i < len; i++ ) {
@@ -214,18 +215,71 @@
iconsFieldsets.push( iconsFieldset );
for ( i = 0, len = icons[ iconSet ].length; i < len; i++ ) {
+ iconButton = new OO.ui.ButtonWidget( {
+ icon: icons[ iconSet ][ i ],
+ framed: false,
+ label: icons[ iconSet ][ i ]
+ } );
+ iconsButtons.push( iconButton );
iconsFieldset.addItems( [
new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
- icon: icons[ iconSet ][ i ],
- framed: false,
- label: icons[ iconSet ][ i ]
- } ),
+ iconButton,
{ align: 'top' }
)
] );
}
}
+
+ selector = new OO.ui.ButtonSelectWidget( {
+ items: [
+ new OO.ui.ButtonOptionWidget( {
+ label: 'None',
+ flags: [],
+ data: {
+ progressive: false,
+ constructive: false,
+ destructive: false
+ }
+ } ),
+ new OO.ui.ButtonOptionWidget( {
+ label: 'Progressive',
+ flags: [ 'progressive' ],
+ data: {
+ progressive: true,
+ constructive: false,
+ destructive: false
+ }
+ } ),
+ new OO.ui.ButtonOptionWidget( {
+ label: 'Constructive',
+ flags: [ 'constructive' ],
+ data: {
+ progressive: false,
+ constructive: true,
+ destructive: false
+ }
+ } ),
+ new OO.ui.ButtonOptionWidget( {
+ label: 'Destructive',
+ flags: [ 'destructive' ],
+ data: {
+ progressive: false,
+ constructive: false,
+ destructive: true
+ }
+ } ),
+ ]
+ } )
+ .on( 'select', function ( selected ) {
+ iconsButtons.forEach( function ( iconButton ) {
+ iconButton.setFlags( selected.getData() );
+ } );
+ } )
+ .selectItemByData( {
+ progressive: false,
+ constructive: false,
+ destructive: false
+ } );
demo.$element.append(
new OO.ui.PanelLayout( {
@@ -234,6 +288,7 @@
} ).$element
.addClass( 'oo-ui-demo-container oo-ui-demo-icons' )
.append(
+ selector.$element,
indicatorsFieldset.$element,
iconsFieldsets.map( function ( item ) { return
item.$element[0]; } )
) );
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index bb379b3..087d22b 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -75,6 +75,10 @@
/* Icons demo */
+.oo-ui-demo-icons .oo-ui-buttonSelectWidget {
+ margin-bottom: 2em;
+}
+
.oo-ui-demo-icons .oo-ui-fieldLayout {
display: inline-block;
margin-bottom: 0;
@@ -84,7 +88,7 @@
display: none;
}
-.oo-ui-demo-icons .oo-ui-buttonElement-button {
+.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button {
margin: 1em 1em 1em 0;
width: 12em;
opacity: 0.8;
@@ -93,12 +97,12 @@
text-overflow: ellipsis;
}
-.oo-ui-demo-icons .oo-ui-buttonElement-button .oo-ui-labelElement-label {
+.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button
.oo-ui-labelElement-label {
text-transform: capitalize;
display: inline !important;
}
-.oo-ui-demo-icons .oo-ui-buttonElement-button:hover {
+.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button:hover {
opacity: 1;
}
--
To view, visit https://gerrit.wikimedia.org/r/207973
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5a07410f4257389c928c8e51a6ec6667219c7ff4
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
