Prtksxna has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/348098 )
Change subject: MenuOptionWidget: Stop adding check icon
......................................................................
MenuOptionWidget: Stop adding check icon
We were adding a check icon on all MenuOptionWidgets but showing them
only on Apex. We don't add it any more, and instead, Apex has a hack
to add it through CSS.
The hack has to replicate a bunch of CSS rules from IconElement and
DecoratedOptionWidget. This is because while we're adding an icon
using CSS the parent element does not get the oo-ui-iconElement class.
We are also removing the Mediawiki theme CSS rule to hide all icons
in the MenuOptionWidget (T101560). While the icon is now visible, it
looks broken. Fixing this will need some design input on the padding
and margin of the widget, and whether or not we always want to leave
enough space on the side to allow for an icon, or just shift the text
when it is there. Demo added.
Bug: T87835
Bug: T101560
Change-Id: If34ab5302767b8505650a079b033af5506e5cb27
---
M demos/pages/widgets.js
M src/styles/widgets/MenuOptionWidget.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/MenuOptionWidget.js
5 files changed, 17 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/98/348098/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 3081ec4..176e0b0 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -996,8 +996,9 @@
label:
'The fourth option has a long label'
} ),
new
OO.ui.MenuOptionWidget( {
+ icon:
'feedback',
data:
'd',
- label:
'Fifth'
+ label:
'The fifth option has an icon'
} )
]
}
diff --git a/src/styles/widgets/MenuOptionWidget.less
b/src/styles/widgets/MenuOptionWidget.less
index 10556e0..ad62ee2 100644
--- a/src/styles/widgets/MenuOptionWidget.less
+++ b/src/styles/widgets/MenuOptionWidget.less
@@ -1,17 +1,5 @@
@import '../common';
.oo-ui-menuOptionWidget {
- .oo-ui-iconElement-icon {
- display: none;
- }
-
- &.oo-ui-optionWidget {
- &-selected {
- .oo-ui-iconElement-icon {
- display: block;
- }
- }
- }
-
.theme-oo-ui-menuOptionWidget();
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 178c2c1..7ef25f0 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -407,6 +407,21 @@
&.oo-ui-optionWidget {
&-selected {
background-color: transparent;
+
+ // Hack for T87835
+ .oo-ui-iconElement-icon {
+ display: block;
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+ min-width: 24px;
+ width: 1.875em;
+ min-height: 24px;
+ left: 0.5em;
+ top: 0;
+ height: 100%;
+ .oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check' );
+ }
}
&-highlighted,
&-highlighted.oo-ui-optionWidget-selected {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 5bab5a1..9e4f13b 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -750,10 +750,6 @@
&-selected {
background-color: @background-color-progressive;
color: @color-progressive;
-
- .oo-ui-iconElement-icon {
- display: none;
- }
}
&-selected&-highlighted,
&-pressed&-highlighted {
diff --git a/src/widgets/MenuOptionWidget.js b/src/widgets/MenuOptionWidget.js
index 1ee67c6..427d1f3 100644
--- a/src/widgets/MenuOptionWidget.js
+++ b/src/widgets/MenuOptionWidget.js
@@ -12,9 +12,6 @@
* @param {Object} [config] Configuration options
*/
OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {
- // Configuration initialization
- config = $.extend( { icon: 'check' }, config );
-
// Parent constructor
OO.ui.MenuOptionWidget.parent.call( this, config );
--
To view, visit https://gerrit.wikimedia.org/r/348098
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If34ab5302767b8505650a079b033af5506e5cb27
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
