jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/333571 )
Change subject: demo: Make the icon page easier to use
......................................................................
demo: Make the icon page easier to use
Using LabelWidgets instead of ButtonWidgets as they are selectable,
getting rid of bold text for better ability to skim.
Bug: T155880
Change-Id: I95bdaffbeea8b6749e1b2dc349d6f645ddea61da
Depends-on: I317f00a57463525235d94ee7670f81af72ebc5e4
---
M demos/pages/icons.js
M demos/styles/demo.css
2 files changed, 35 insertions(+), 34 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/icons.js b/demos/pages/icons.js
index 1072571..6829529 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, iconButton, selector,
+ var i, len, iconSet, iconsFieldset, iconWidget, selector,
icons = {
core: [
'add',
@@ -206,18 +206,20 @@
'up'
],
iconsFieldsets = [],
- iconsButtons = [],
+ iconsWidgets = [],
indicatorsFieldset = new OO.ui.FieldsetLayout( { label:
'Indicators' } );
for ( i = 0, len = indicators.length; i < len; i++ ) {
indicatorsFieldset.addItems( [
new OO.ui.FieldLayout(
- new OO.ui.ButtonWidget( {
+ new OO.ui.IndicatorWidget( {
indicator: indicators[ i ],
- framed: false,
- label: indicators[ i ]
+ title: indicators[ i ]
} ),
- { align: 'top' }
+ {
+ align: 'inline',
+ label: indicators[ i ]
+ }
)
] );
}
@@ -226,17 +228,16 @@
iconsFieldsets.push( iconsFieldset );
for ( i = 0, len = icons[ iconSet ].length; i < len; i++ ) {
- iconButton = new OO.ui.ButtonWidget( {
+ iconWidget = new OO.ui.IconWidget( {
icon: icons[ iconSet ][ i ],
- framed: false,
- label: icons[ iconSet ][ i ]
+ title: icons[ iconSet ][ i ]
} );
- iconsButtons.push( iconButton );
+ iconsWidgets.push( iconWidget );
iconsFieldset.addItems( [
- new OO.ui.FieldLayout(
- iconButton,
- { align: 'top' }
- )
+ new OO.ui.FieldLayout( iconWidget, {
+ label: icons[ iconSet ][ i ],
+ align: 'inline'
+ } )
] );
}
}
@@ -280,10 +281,12 @@
}
} )
]
- } )
+ } );
+
+ selector
.on( 'select', function ( selected ) {
- iconsButtons.forEach( function ( iconButton ) {
- iconButton.setFlags( selected.getData() );
+ iconsWidgets.forEach( function ( iconWidget ) {
+ iconWidget.setFlags( selected.getData() );
} );
} )
.selectItemByData( {
@@ -302,5 +305,6 @@
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 42bf56d..e53a5e1 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -51,29 +51,26 @@
.oo-ui-demo-icons .oo-ui-fieldLayout {
display: inline-block;
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-labelElement-label {
- display: none;
-}
-
-.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button {
margin: 1em 1em 1em 0;
- width: 12em;
- opacity: 0.8;
+ width: 13.75em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
-.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button
.oo-ui-labelElement-label {
- text-transform: capitalize;
- display: inline;
+.oo-ui-demo-icons .oo-ui-fieldLayout:nth-child( 4n ) {
+ margin-right: 0;
}
-.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button:hover {
+.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-iconElement,
+.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-indicatorElement {
+ opacity: 0.8; /* brings icons/indicators closer to text color */
+}
+
+.oo-ui-demo-icons .oo-ui-fieldLayout:hover .oo-ui-labelElement-label {
+ color: #000;
+}
+.oo-ui-demo-icons .oo-ui-fieldLayout:hover .oo-ui-iconElement,
+.oo-ui-demo-icons .oo-ui-fieldLayout:hover .oo-ui-indicatorElement {
opacity: 1;
}
--
To view, visit https://gerrit.wikimedia.org/r/333571
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I95bdaffbeea8b6749e1b2dc349d6f645ddea61da
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
