Adjust styling of the 'more actions' menu items

Bug: T126734
Bug: T126740
Change-Id: I48924aba5c06ebf1eeccd2a8977150b366f412a7
This commit is contained in:
Moriel Schottlender 2016-02-26 15:16:47 -08:00
parent 2ac0d2d761
commit 07c5850b88
3 changed files with 38 additions and 10 deletions

View file

@ -126,10 +126,10 @@
}
}
// Add a "mark as read" secondary action
this.markAsReadSecondary = new OO.ui.ButtonOptionWidget( {
this.markAsReadSecondary = new mw.echo.ui.MenuItemWidget( {
icon: 'check',
framed: false,
data: 'markAsRead',
prioritized: false,
label: mw.msg( 'echo-notification-markasread' ),
classes: [ 'mw-echo-ui-notificationItemWidget-content-actions-button' ]
} );

View file

@ -2,8 +2,6 @@
@import '../../echo.mixins';
.mw-echo-ui-menuItemWidget {
.mw-echo-ui-mixin-hover-opacity;
&-icon {
display: inline-block;
// We have to override oojs-ui's width/height, which uses
@ -22,7 +20,7 @@
// We have to override oojs-ui's color, which uses
// a very specific selector
font-weight: normal !important;
color: #000 !important;
color: #333333 !important;
// Set max-width so buttons are truncated
max-width: 15em;
@ -31,12 +29,41 @@
}
}
// Correct for when inside the menu
.mw-echo-ui-notificationItemWidget-content-actions-menu & {
display: block;
}
&-prioritized {
display: inline-block;
}
// Correct for when inside the popup menu
.mw-echo-ui-actionMenuPopupWidget-menu & {
display: block;
padding: 0.7em;
&:hover {
background: #eeeeee;
}
&-icon {
// The icon should be 15px, which is 1.1em. However,
// ooui icons are surrounded by whitespace. In this case,
// the whitespace is about 6px out of the original 24px
// so the non-whitespace dimensions are 3/4 of the total.
// So to compensate, the new size should be 1.1em*4/3 = 1.4em
width: 1.4em !important;
height: 1.4em !important;
// Take into account the padding and subtract half of
// the whitespace adjustment of the icon
top: 0.7em - 0.3em / 2;
}
&-content {
margin-left: 1.4em + 0.7em; // Icon width + 0.7em spacing
font-weight: bold !important;
span.oo-ui-labelElement-label {
line-height: 1em;
}
}
}
}

View file

@ -1,4 +1,5 @@
.mw-echo-ui-overlay {
font-size: 0.875em;
position: absolute;
top: 0;
right: 0;