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

Adjust layout for new notification panel designs

Browse source 
Bug: T122646
Change-Id: I6cb6d121eb7e32737b1d73743061e1435e869c93
This commit is contained in:
Justin Du 2016-01-12 21:36:47 -06:00 committed by Roan Kattouw
parent 8e808fed77
commit 7b5cf41e37
5 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/echo.variables.less
View file

@ -12,8 +12,8 @@
//@notification-body-color: #888;
@notification-body-color: #666;
@notification-popup-width: 450px;
@bundle-group-padding: 1em;
@notification-popup-width: 500px;
@opacity-low: 0.5;
@opacity-mid: 0.8;

2
modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
View file

@ -103,7 +103,7 @@
this.popup = new OO.ui.PopupWidget( {
$content: this.notificationsWidget.$element,
$footer: $footer,
width: config.popupWidth || 450,
width: config.popupWidth || 500,
autoClose: true,
// Also ignore clicks from the nested action menu items, that
// actually exist in the overlay

2
modules/ooui/styles/mw.echo.ui.BundledNotificationGroupWidget.less
View file

@ -23,7 +23,7 @@
}
&-content {
padding-left: 2em;
padding-left: 0.5em + 1.5em;
}
&-markAsReadButton {

8
modules/ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less
View file

@ -7,15 +7,15 @@
padding-bottom: 0;
> .mw-echo-ui-notificationItemWidget {
// Compensate for the 0.5em of left padding we removed
// Compensate for the 0.8em of left/right padding and 0.5em of bottom padding that we removed
&-icon {
margin-left: 0.5em;
margin-left: 0.8em;
}
&-content {
margin-bottom: 0.5em;
padding-right: 0.5em;
padding-left: ~"calc(30px + 1.5em)"; // 30px+1em from ItemWidget, plus 0.5em
padding-right: 0.8em;
padding-left: ~"calc(30px + 1.6em)"; // 30px+0.8em from ItemWidget, plus 0.8em
}
}

24
modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less
View file

@ -2,7 +2,7 @@
@import '../../echo.mixins';
.mw-echo-ui-notificationItemWidget {
padding: 1em 0.5em;
padding: 0.8em;
background-color: #F1F1F1;
border-bottom: 1px solid #DDDDDD;
white-space: normal;
@ -33,8 +33,8 @@
&-content {
display: inline-block;
// The icon is 30px and has a 1em right margin
padding-left: ~"calc(30px + 1em)";
// The icon is 30px and has a 0.8em right margin
padding-left: ~"calc(30px + 0.8em)";
box-sizing: border-box;
width: 100%;
@ -45,12 +45,12 @@
}
&-actions {
margin-top: 0.5em;
font-size: 0.8em;
margin-top: 0.8em;
font-size: 0.9em;
&-button {
&:not(:last-child) {
margin-right: 0.5em;
margin-right: 1em;
}
.oo-ui-buttonElement-button {
@ -62,6 +62,13 @@
font-weight: normal !important;
color: #000 !important;
}
.oo-ui-iconElement-icon {
// We have to override oojs-ui's width/height, which uses
// a very specific selector
width: 1.5em !important;
height: 1.5em !important;
}
}
}
@ -154,16 +161,13 @@
float: right;
font-size: 1em;
margin-top: -0.5em;
margin-right: -0.5em;
padding: 0;
.mw-echo-ui-notificationItemWidget-bundle & {
font-size: 0.8em;
margin-top: 0;
}
&.oo-ui-buttonWidget {
margin-right: 0;
}
}
&-initiallyUnseen {