mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineButtonWidget.js
Thiemo Kreuz eb1f1e28a3 Make new template editor sidebar items actual ButtonElements
Actually reusing this OOUI mixin gives us a lot of well
developed functionality we need anyway. Most notably proper
event management, e.g. click events.

The number of CSS properties we need to override is managable,
I would argue. Let's see:
* Our buttons are not inline-elements, but should use the full
  width.
* No focus-border left and right for the same reason.
* We want much more inner padding.
* We want a stronger hover effect.
* We need to fine-tune the position of the icon. This is
  because of the inner padding.
* Need to get rid of a negative margin that's only relevant
  for inline-buttons.

I currently feel like the benefits are worth living with
slightly more brittle code. Note that we can undo this change
any time because all this is well encapsulated in this new
class.

Bug: T274544
Change-Id: I33f275a958964d49e803e56bf74a6fa961093da1
2021-07-14 13:31:40 +02:00

38 lines
1.2 KiB
JavaScript

/**
* Generic button-like widget for items in the template dialog sidebar. See {OO.ui.ButtonWidget} for
* inspiration.
*
* @class
* @extends OO.ui.Widget
*
* @constructor
* @param {Object} config
* @cfg {string} [icon='']
* @cfg {string} label
*/
ve.ui.MWTransclusionOutlineButtonWidget = function VeUiMWTransclusionOutlineButtonWidget( config ) {
// Parent constructor
ve.ui.MWTransclusionOutlineButtonWidget.super.call( this, config );
// Mixin constructors
OO.ui.mixin.ButtonElement.call( this, {
framed: false
} );
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.LabelElement.call( this, config );
this.$element
.addClass( 've-ui-mwTransclusionOutlineButtonWidget' )
.append( this.$button.append( this.$icon, this.$label ) );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.Widget );
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.ButtonElement );
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.IconElement );
OO.mixinClass( ve.ui.MWTransclusionOutlineButtonWidget, OO.ui.mixin.LabelElement );
// TODO: Add OO.ui.mixin.TitledElement?
// TODO: Add OO.ui.mixin.TabIndexedElement?
// TODO: Add OO.ui.mixin.AccessKeyedElement?