jenkins-bot has submitted this change and it was merged.
Change subject: Adjust styling for Special:Notification items
......................................................................
Adjust styling for Special:Notification items
The items should resemble the popup items, but the styles clashed
with the popup's cross-wiki notification item, so the image size
was smaller and the border was incomplete.
Bug: T136572
Change-Id: I3c3f825d469ccee1e711da21f627eeb9491e9480
(cherry picked from commit 070656731d54059ff677881bd6ccdd433138f46e)
---
M modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
M modules/styles/mw.echo.ui.NotificationBadgeWidget.less
M modules/styles/mw.echo.ui.NotificationItemWidget.less
M modules/styles/mw.echo.ui.SubGroupListWidget.less
M modules/ui/mw.echo.ui.NotificationItemWidget.js
5 files changed, 32 insertions(+), 32 deletions(-)
Approvals:
Dereckson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
index 77073a6..8a95a59 100644
--- a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
+++ b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
@@ -13,9 +13,10 @@
}
&-content {
- margin-bottom: 1em;
// The icon is 30px
margin-left: 30px;
+
+ padding-bottom: 1em;
// 0.8em from ItemWidget, plus 0.8em
padding-left: 1.6em;
padding-right: 0.8em;
diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.less
b/modules/styles/mw.echo.ui.NotificationBadgeWidget.less
index 9c66b87..83c4d77 100644
--- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationBadgeWidget.less
@@ -41,6 +41,16 @@
overflow-y: visible;
// Work around OO.ui.FloatableElement bug
(T130153)
overflow-x: auto;
+
+ > .mw-echo-ui-notificationsListWidget >
.mw-echo-ui-notificationItemWidget {
+ // The popup body itself has a border.
We need to override the notification
+ // item widget styles so that the edge
borders of the items are not duplicated
+ border-left: 0;
+ border-right: 0;
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
}
> .oo-ui-popupWidget-footer {
diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less
b/modules/styles/mw.echo.ui.NotificationItemWidget.less
index ba270c1..82b02ca 100644
--- a/modules/styles/mw.echo.ui.NotificationItemWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less
@@ -3,18 +3,21 @@
.mw-echo-ui-notificationItemWidget {
position: relative;
+ white-space: normal;
padding: 0.8em 1em 0.5em 1em;
background-color: #F1F1F1;
- border-bottom: 1px solid #DDDDDD;
- white-space: normal;
+ box-sizing: border-box;
+
+ border: 1px solid #DDDDDD;
+ border-bottom: 0;
+
+ &:last-child {
+ border-bottom: 1px solid #DDDDDD;
+ }
> a,
&:hover > a {
text-decoration: none;
- }
-
- &:last-child {
- border-bottom: none;
}
&-icon {
@@ -91,12 +94,14 @@
}
// Table layout only for the content inside bundles
- &-bundle {
+ &-bundled {
display: table;
width: 100%;
+ padding: 0.5em;
.mw-echo-ui-notificationItemWidget-content {
display: table-row;
+ padding-left: 0.5em + 1.5em;
.mw-echo-ui-notificationItemWidget {
// CSS table layout
@@ -112,6 +117,12 @@
&-icon {
position: relative;
padding-right: 0.5em;
+
+ img {
+ height: 1.5em;
+ width: 1.5em;
+ }
+
}
&-content-message {
@@ -147,6 +158,7 @@
&-markAsReadButton {
width: 1em;
float: none;
+ padding-top: 0;
}
}
diff --git a/modules/styles/mw.echo.ui.SubGroupListWidget.less
b/modules/styles/mw.echo.ui.SubGroupListWidget.less
index 869c177..8f951e9 100644
--- a/modules/styles/mw.echo.ui.SubGroupListWidget.less
+++ b/modules/styles/mw.echo.ui.SubGroupListWidget.less
@@ -29,27 +29,4 @@
.mw-echo-ui-sortedListWidget {
margin-bottom: @bundle-group-padding / 2;
}
-
- .mw-echo-ui-notificationItemWidget {
- padding: 0.5em;
- border: 1px solid #DDDDDD;
- box-sizing: border-box;
-
- &:not(:last-child) {
- border-bottom: 0;
- }
-
- &-icon img {
- height: 1.5em;
- width: 1.5em;
- }
-
- &-content {
- padding-left: 0.5em + 1.5em;
- }
-
- &-markAsReadButton {
- padding-top: 0;
- }
- }
}
diff --git a/modules/ui/mw.echo.ui.NotificationItemWidget.js
b/modules/ui/mw.echo.ui.NotificationItemWidget.js
index 2caaaad..7f67bd8 100644
--- a/modules/ui/mw.echo.ui.NotificationItemWidget.js
+++ b/modules/ui/mw.echo.ui.NotificationItemWidget.js
@@ -168,7 +168,7 @@
this.$element
.addClass( 'mw-echo-ui-notificationItemWidget' )
.toggleClass(
'mw-echo-ui-notificationItemWidget-initiallyUnseen', !this.model.isSeen() &&
!this.bundle )
- .toggleClass(
'mw-echo-ui-notificationItemWidget-bundle', this.bundle );
+ .toggleClass(
'mw-echo-ui-notificationItemWidget-bundled', this.bundle );
// Wrap the entire item with primary url
if ( this.model.getPrimaryUrl() ) {
--
To view, visit https://gerrit.wikimedia.org/r/291962
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3c3f825d469ccee1e711da21f627eeb9491e9480
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: wmf/1.28.0-wmf.4
Gerrit-Owner: Catrope <roan.katt...@gmail.com>
Gerrit-Reviewer: Dereckson <dereck...@espace-win.org>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
