wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make new template editor sidebar items actual ButtonElements

Browse source 
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
This commit is contained in:
Thiemo Kreuz 2021-07-13 12:15:47 +02:00 committed by WMDE-Fisch
parent 63547fb86e
commit eb1f1e28a3
3 changed files with 37 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css
View file

@ -68,23 +68,6 @@
outline: 1px solid #0f0;
}
.ve-ui-mwTransclusionOutlineButtonWidget {
cursor: pointer;
font-weight: bold;
overflow: hidden;
padding: 11px 0 11px 37px;
position: relative;
text-overflow: ellipsis;
}
.ve-ui-mwTransclusionOutlineButtonWidget:hover {
background-color: #eaecf0;
}
.ve-ui-mwTransclusionOutlineButtonWidget .oo-ui-iconElement-icon {
left: 11px;
}
.ve-ui-mwTemplateDialog .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon {
opacity: 0.51;
}
@ -159,3 +142,29 @@
.ve-ui-mwTransclusionOutlineItem .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
border-width: 2px;
}
.ve-ui-mwTransclusionOutlineButtonWidget,
.ve-ui-mwTransclusionOutlineButtonWidget > .oo-ui-buttonElement-button {
display: block;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
border-left: 0;
border-radius: 0;
border-right: 0;
overflow: hidden;
padding: 8px 0 8px 36px;
text-overflow: ellipsis;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #eaecf0;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
margin-left: 0;
}
.ve-ui-mwTransclusionOutlineButtonWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
left: 10px;
}

12
modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineButtonWidget.js
View file

@ -1,4 +1,7 @@
/**
* Generic button-like widget for items in the template dialog sidebar. See {OO.ui.ButtonWidget} for
* inspiration.
*
* @class
* @extends OO.ui.Widget
*
@ -12,18 +15,23 @@ ve.ui.MWTransclusionOutlineButtonWidget = function VeUiMWTransclusionOutlineButt
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' )
.prepend( this.$icon, this.$label );
.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.AccessKeyedElement?
// TODO: Add OO.ui.mixin.TitledElement?
// TODO: Add OO.ui.mixin.TabIndexedElement?
// TODO: Add OO.ui.mixin.AccessKeyedElement?

2
modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js
View file

@ -30,7 +30,7 @@ ve.ui.MWTransclusionOutlinePartWidget = function VeUiMWTransclusionOutlinePartWi
.addClass( 've-ui-mwTransclusionOutlinePartWidget' )
// Note: There is no code that uses this. It just helps when manually inspecting the HTML.
.attr( 'data-transclusion-part-id', part.getId() )
.prepend( header.$element );
.append( header.$element );
};
/* Inheritance */