- Make the options smaller (less padding)
- Make the text blue
- Move the icon to the other side of the widget, and
get rid of the placeholder-spacing for all other
items without the icon
Bug: T164861
Change-Id: If8e0249f4322e1ab7cea09ca12e66492581f009e
.mw-rcfilters-ui-savedLinksListItemWidget {
.mw-rcfilters-ui-savedLinksListItemWidget {
&:hover {
// Mimicking optionWidget styles
&:hover {
// Mimicking optionWidget styles
vertical-align: middle;
}
vertical-align: middle;
}
- &:not( .oo-ui-iconElement ) .oo-ui-iconElement-icon {
- // The iconElement-icon class still appears when we
- // have an empty icon, and we need it to pretend to
- // be there so the text has the same alignment as
- // text next to a visible icon. #ThanksOOUI
- width: 1.875em;
- height: 1.875em;
+ .oo-ui-iconElement-icon {
+ // Since we made the rows narrower (height smaller than usual)
+ // then the icon needs to be slightly smaller as well, so that
+ // when we toggle 'default' the icon doesn't bounce the option
+ // height up a little
+ width: 1.7em;
+ height: 1.7em;
overflow: hidden;
cursor: pointer;
margin-left: 0.5px;
overflow: hidden;
cursor: pointer;
margin-left: 0.5px;
+ color: #36c; // Accent50;
$( '<div>' )
.addClass( 'mw-rcfilters-ui-row' )
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-row' )
.append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-cell' )
- .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
- .append( this.$icon ),
$( '<div>' )
.addClass( 'mw-rcfilters-ui-cell' )
.addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
$( '<div>' )
.addClass( 'mw-rcfilters-ui-cell' )
.addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
this.editInput.$element,
this.saveButton.$element
),
this.editInput.$element,
this.saveButton.$element
),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
+ .append( this.$icon ),
this.popupButton.$element
.addClass( 'mw-rcfilters-ui-cell' )
)
this.popupButton.$element
.addClass( 'mw-rcfilters-ui-cell' )
)
this.editInput.toggle( isEdit );
this.$label.toggleClass( 'oo-ui-element-hidden', isEdit );
this.editInput.toggle( isEdit );
this.$label.toggleClass( 'oo-ui-element-hidden', isEdit );
+ this.$icon.toggleClass( 'oo-ui-element-hidden', isEdit );
this.popupButton.toggle( !isEdit );
this.saveButton.toggle( isEdit );
this.popupButton.toggle( !isEdit );
this.saveButton.toggle( isEdit );