Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/283184
Change subject: ButtonOptionWidget: Inherit OptionWidget, not
DecoratedOptionWidget
......................................................................
ButtonOptionWidget: Inherit OptionWidget, not DecoratedOptionWidget
DecoratedOptionWidget comes with some styles meant mostly for dropdowns
which are a bit of a pain for buttons. We had tons of CSS to override
them. Instead, inherit just OptionWidget and mix in IconElement and
IndicatorElement ourselves.
This actually fixes a small UI bug in Apex where icons/indicators of
disabled ButtonOptionWidget would be lighter than in any other buttons.
Change-Id: I47a31eb58fcc91124184442b23ef56c00bdc3f92
---
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/ButtonOptionWidget.js
3 files changed, 7 insertions(+), 40 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/84/283184/1
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index c121df4..10aa00a 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -672,27 +672,10 @@
padding: 0;
background-color: transparent;
- .oo-ui-buttonElement-button {
- height: @size-icon;
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- margin-top: 0;
- }
-
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- // Override DecoratedOptionWidget styles
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- height: @size-icon;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- height: @size-indicator;
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 63b0b40..7bafb73 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -861,30 +861,10 @@
padding: 0;
background-color: transparent;
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- margin-top: 0;
- }
-
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- // Override DecoratedOptionWidget styles
- &.oo-ui-widget-disabled {
- .oo-ui-iconElement-icon,
- .oo-ui-indicatorElement-indicator {
- opacity: 1;
- }
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- height: @size-icon;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- height: @size-indicator;
}
}
diff --git a/src/widgets/ButtonOptionWidget.js
b/src/widgets/ButtonOptionWidget.js
index 75984eb..55398ad 100644
--- a/src/widgets/ButtonOptionWidget.js
+++ b/src/widgets/ButtonOptionWidget.js
@@ -7,7 +7,7 @@
* [1]:
https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Button_selects_and_options
*
* @class
- * @extends OO.ui.DecoratedOptionWidget
+ * @extends OO.ui.OptionWidget
* @mixins OO.ui.mixin.ButtonElement
* @mixins OO.ui.mixin.TabIndexedElement
* @mixins OO.ui.mixin.TitledElement
@@ -24,6 +24,8 @@
// Mixin constructors
OO.ui.mixin.ButtonElement.call( this, config );
+ OO.ui.mixin.IconElement.call( this, config );
+ OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$button } ) );
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$button,
@@ -32,14 +34,16 @@
// Initialization
this.$element.addClass( 'oo-ui-buttonOptionWidget' );
- this.$button.append( this.$element.contents() );
+ this.$button.append( this.$icon, this.$label, this.$indicator );
this.$element.append( this.$button );
};
/* Setup */
-OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.OptionWidget );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.ButtonElement );
+OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IconElement );
+OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TitledElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TabIndexedElement );
--
To view, visit https://gerrit.wikimedia.org/r/283184
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I47a31eb58fcc91124184442b23ef56c00bdc3f92
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
