wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-13 17:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust styling of the 'more actions' menu items

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
modules/ooui/mw.echo.ui.NotificationItemWidget.js
View file

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

43
modules/ooui/styles/mw.echo.ui.MenuItemWidget.less
View file

@ -2,8 +2,6 @@
@import '../../echo.mixins'; @import '../../echo.mixins';
.mw-echo-ui-menuItemWidget { .mw-echo-ui-menuItemWidget {
.mw-echo-ui-mixin-hover-opacity;
&-icon { &-icon {
display: inline-block; display: inline-block;
// We have to override oojs-ui's width/height, which uses // 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 // We have to override oojs-ui's color, which uses
// a very specific selector // a very specific selector
font-weight: normal !important; font-weight: normal !important;
color: #000 !important; color: #333333 !important;
// Set max-width so buttons are truncated // Set max-width so buttons are truncated
max-width: 15em; max-width: 15em;
@ -31,12 +29,41 @@
} }
} }
// Correct for when inside the menu
.mw-echo-ui-notificationItemWidget-content-actions-menu & {
display: block;
}
&-prioritized { &-prioritized {
display: inline-block; 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;
}
}
}
} }

1
modules/ooui/styles/mw.echo.ui.overlay.less
View file

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