diff --git a/js/forum/src/components/notification-list.js b/js/forum/src/components/notification-list.js index 12d39810a..0f545e48f 100644 --- a/js/forum/src/components/notification-list.js +++ b/js/forum/src/components/notification-list.js @@ -2,6 +2,7 @@ import Component from 'flarum/component'; import avatar from 'flarum/helpers/avatar'; import icon from 'flarum/helpers/icon'; import username from 'flarum/helpers/username'; +import listItems from 'flarum/helpers/list-items'; import DropdownButton from 'flarum/components/dropdown-button'; import ActionButton from 'flarum/components/action-button'; import ItemList from 'flarum/utils/item-list'; @@ -49,11 +50,18 @@ export default class NotificationList extends Component { ]), m('div.notifications-content', groups.length ? groups.map(group => { + var badges = group.discussion && group.discussion.badges().toArray(); + return m('div.notification-group', [ - group.discussion ? m('a.notification-group-header', { - href: app.route.discussion(group.discussion), - config: m.route - }, group.discussion.title()) : m('div.notification-group-header', app.config['forum_title']), + group.discussion + ? m('a.notification-group-header', { + href: app.route.discussion(group.discussion), + config: m.route + }, + badges && badges.length ? m('ul.badges', listItems(badges)) : '', + group.discussion.title() + ) + : m('div.notification-group-header', app.config['forum_title']), m('ul.notification-group-list', group.notifications.map(notification => { var NotificationComponent = app.notificationComponentRegistry[notification.contentType()]; return NotificationComponent ? m('li', NotificationComponent.component({notification})) : ''; diff --git a/less/forum/notifications.less b/less/forum/notifications.less index b2c5b94ed..4aae9dd80 100644 --- a/less/forum/notifications.less +++ b/less/forum/notifications.less @@ -84,6 +84,18 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + & .badges { + margin-left: -2px; + margin-right: 18px; + vertical-align: 1px; + + & .badge { + margin-right: -13px; + position: relative; + .badge-size(21px); + } + } } .notification-group-list { list-style: none;