FEATURE: Diffrentiate between group + individual mentions (#10691)

* FEATURE: Diffrentiate between group + individual mentions

This commit adds the necessary code for Discorse core to differentiate between group + individual mentions in the notification user panel and notification page.

It changes the group mention icon from `at` to `users` as well as adds context as to which group was mentioned in the topic.
This commit is contained in:
Jordan Vidrine 2020-09-17 10:23:19 -05:00 committed by GitHub
parent a92d88747e
commit 931d8725de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 2 deletions

View File

@ -19,7 +19,7 @@ const REPLACEMENTS = {
"d-unliked": "far-heart",
"d-liked": "heart",
"notification.mentioned": "at",
"notification.group_mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",

View File

@ -67,6 +67,17 @@ export const DefaultNotificationItem = createWidget(
return escapeExpression(badgeName);
}
const groupName = data.group_name;
if (groupName) {
if (this.attrs.fancy_title) {
if (this.attrs.topic_id) {
return `<span class="mention-group notify">@${groupName}</span><span data-topic-id="${this.attrs.topic_id}"> ${this.attrs.fancy_title}</span>`;
}
return `<span class="mention-group notify">@${groupName}</span> ${this.attrs.fancy_title}`;
}
}
if (this.attrs.fancy_title) {
if (this.attrs.topic_id) {
return `<span data-topic-id="${this.attrs.topic_id}">${this.attrs.fancy_title}</span>`;
@ -81,7 +92,7 @@ export const DefaultNotificationItem = createWidget(
text(notificationName, data) {
const username = formatUsername(data.display_username);
const description = this.description(data);
const description = this.description(data, notificationName);
return I18n.t(`notifications.${notificationName}`, {
description,

View File

@ -2,6 +2,15 @@
// To style group content differently, use the existing classes with a .group parent class.
// For example: .group .user-secondary-navigation
span.mention-group {
color: var(--primary-high-or-secondary-low);
padding: 2px 4px;
background: rgba(var(--primary-rgb), 0.12);
border-radius: 8px;
font-weight: 600;
font-size: $font-down-1;
}
.group-details-container {
background: var(--primary-very-low);
padding: 20px;