Make MenuItemWidgets inherit from ButtonOptionWidgets

This gives them a consistent appearance with the expand/collapse
button. Only requires a small visual tweak to work in the popup
menu.

Bug: T258701
Bug: T258703
Change-Id: Ib3d074d1117e08d11136791354184e2e4b655290
This commit is contained in:
Ed Sanders 2020-07-23 14:38:23 +01:00
parent 3abe6b77bd
commit 769d6579f9
3 changed files with 13 additions and 8 deletions

View file

@ -3,4 +3,10 @@
// Override width: 100%; rule from OOUI
width: auto;
}
// We put MenutItemWidgets in the popup menu, as we reuse the same widgets when they appear outside the popup.
// Re-style them to look more like DecoratedOptionWidgets instead of ButtonOptionWidgets
.mw-echo-ui-menuItemWidget.oo-ui-labelElement:first-child {
margin-left: 0;
}
}

View file

@ -7,27 +7,26 @@
text-decoration: none;
}
> .oo-ui-labelElement-label {
> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
// Override link colour
color: @color-base;
// Set max-width so buttons are truncated
max-width: 25em;
font-weight: normal;
}
&-prioritized {
.mw-echo-ui-mixin-hover-opacity();
display: inline-block;
// Remove left padding up to icon, 11/14
margin-left: -0.78571429em;
}
&-dynamic-action {
> .oo-ui-labelElement-label {
> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
white-space: normal;
overflow: visible;
}
&.oo-ui-iconElement > .oo-ui-iconElement-icon {
&.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
// Limit to single line height, 32/14
height: 2.28571em;
}

View file

@ -3,7 +3,7 @@
* Secondary menu item
*
* @class
* @extends OO.ui.DecoratedOptionWidget
* @extends OO.ui.ButtonOptionWidget
* @mixins OO.ui.mixin.PendingElement
*
* @constructor
@ -25,7 +25,7 @@
this.isLink = config.url && !this.isDynamicAction();
// Parent constructor
mw.echo.ui.MenuItemWidget.super.call( this, config );
mw.echo.ui.MenuItemWidget.super.call( this, $.extend( { framed: false }, config ) );
// Mixin constructors
OO.ui.mixin.PendingElement.call( this, config );
@ -62,7 +62,7 @@
/* Initialization */
OO.inheritClass( mw.echo.ui.MenuItemWidget, OO.ui.DecoratedOptionWidget );
OO.inheritClass( mw.echo.ui.MenuItemWidget, OO.ui.ButtonOptionWidget );
OO.mixinClass( mw.echo.ui.MenuItemWidget, OO.ui.mixin.PendingElement );
/* Static Properties */