Merge "Make new template editor sidebar items actual ButtonElements"

This commit is contained in:
jenkins-bot 2021-07-15 08:39:18 +00:00 committed by Gerrit Code Review
commit 11978b968d
3 changed files with 37 additions and 20 deletions

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;
}

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?

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 */