From d96da61b1b52208f822222a45846c80610a34182 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Thu, 14 May 2015 22:40:32 +0930 Subject: [PATCH] New look for notifications --- .../notification-discussion-renamed.js | 11 +--- js/forum/src/components/notification.js | 15 ++--- js/forum/src/components/user-notifications.js | 36 ++++++++++-- less/forum/notifications.less | 58 +++++++++++++------ 4 files changed, 78 insertions(+), 42 deletions(-) diff --git a/js/forum/src/components/notification-discussion-renamed.js b/js/forum/src/components/notification-discussion-renamed.js index bbc2b3a78..02bec5566 100644 --- a/js/forum/src/components/notification-discussion-renamed.js +++ b/js/forum/src/components/notification-discussion-renamed.js @@ -4,18 +4,11 @@ import username from 'flarum/helpers/username'; export default class NotificationDiscussionRenamed extends Notification { view() { var notification = this.props.notification; - var discussion = notification.subject(); return super.view({ - href: app.route('discussion.near', { - id: discussion.id(), - slug: discussion.slug(), - near: notification.content().number - }), - config: m.route, - title: notification.content().oldTitle, + href: app.route.discussion(notification.subject(), notification.content().postNumber), icon: 'pencil', - content: ['Renamed by ', username(notification.sender())] + content: [username(notification.sender()), ' renamed'] }); } } diff --git a/js/forum/src/components/notification.js b/js/forum/src/components/notification.js index ac2cf0791..c6c495b79 100644 --- a/js/forum/src/components/notification.js +++ b/js/forum/src/components/notification.js @@ -9,16 +9,13 @@ export default class Notification extends Component { var notification = this.props.notification; return m('div.notification.notification-'+dasherize(notification.contentType()), { - classNames: !notification.isRead() ? 'unread' : '', + className: !notification.isRead() ? 'unread' : '', onclick: this.read.bind(this) - }, m('a', {href: args.href, config: args.config}, [ - avatar(notification.sender()), - m('h3.notification-title', args.title), - m('div.notification-info', [ - icon(args.icon), ' ', - args.content, ' ', - humanTime(notification.time()) - ]) + }, m('a', {href: args.href, config: args.config || m.route}, [ + avatar(notification.sender()), ' ', + icon(args.icon+' icon'), ' ', + m('span.content', args.content), ' ', + humanTime(notification.time()) ])); } diff --git a/js/forum/src/components/user-notifications.js b/js/forum/src/components/user-notifications.js index fd75d2dcc..102bea186 100644 --- a/js/forum/src/components/user-notifications.js +++ b/js/forum/src/components/user-notifications.js @@ -7,6 +7,7 @@ import ActionButton from 'flarum/components/action-button'; import ItemList from 'flarum/utils/item-list'; import Separator from 'flarum/components/separator'; import LoadingIndicator from 'flarum/components/loading-indicator'; +import Discussion from 'flarum/models/discussion'; export default class UserNotifications extends Component { constructor(props) { @@ -18,6 +19,21 @@ export default class UserNotifications extends Component { view() { var user = this.props.user; + var groups = []; + if (app.cache.notifications) { + var groupsObject = {}; + app.cache.notifications.forEach(notification => { + var subject = notification.subject(); + var discussion = subject instanceof Discussion ? subject : (subject.discussion && subject.discussion()); + var key = discussion ? discussion.id() : 0; + groupsObject[key] = groupsObject[key] || {discussion: discussion, notifications: []}; + groupsObject[key].notifications.push(notification); + }); + for (var i in groupsObject) { + groups.push(groupsObject[i]); + } + } + return DropdownButton.component({ className: 'notifications', buttonClass: 'btn btn-default btn-rounded btn-naked btn-icon'+(user.unreadNotificationsCount() ? ' unread' : ''), @@ -37,19 +53,27 @@ export default class UserNotifications extends Component { }), m('h4', 'Notifications') ]), - m('ul.notifications-list', app.cache.notifications - ? app.cache.notifications.map(notification => { - var NotificationComponent = app.notificationComponentRegistry[notification.contentType()]; - return NotificationComponent ? m('li', NotificationComponent.component({notification})) : ''; + m('div.notifications-content', groups.length + ? groups.map(group => { + 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']), + m('ul.notifications-list', group.notifications.map(notification => { + var NotificationComponent = app.notificationComponentRegistry[notification.contentType()]; + return NotificationComponent ? m('li', NotificationComponent.component({notification})) : ''; + })) + ]) }) - : (!this.loading() ? m('li.no-notifications', 'No Notifications') : '')), + : (!this.loading() ? m('div.no-notifications', 'No Notifications') : '')), this.loading() ? LoadingIndicator.component() : '' ] }); } load() { - if (!app.cache.notifications) { + if (!app.cache.notifications || this.props.user.unreadNotificationsCount()) { var component = this; this.loading(true); m.redraw(); diff --git a/less/forum/notifications.less b/less/forum/notifications.less index ea8552020..57d8bedb2 100644 --- a/less/forum/notifications.less +++ b/less/forum/notifications.less @@ -44,6 +44,7 @@ text-transform: uppercase; font-weight: bold; margin: 0; + color: @fl-body-muted-color; } & .btn { float: right; @@ -51,12 +52,10 @@ margin-right: -5px; } } -.notifications-list { - list-style: none; - margin: 0; - padding: 0; +.notifications-content { max-height: 600px; overflow: auto; + padding-bottom: 10px; } .no-notifications { color: @fl-body-muted-color; @@ -64,10 +63,32 @@ padding: 50px 0; font-size: 16px; } +.notification-group { + border-top: 1px solid @fl-body-secondary-color; + margin-top: -1px; + + &:not(:last-child) { + margin-bottom: 20px; + } +} +.notification-group-header { + font-weight: bold; + color: @fl-body-heading-color !important; + padding: 8px 15px; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.notifications-list { + list-style: none; + margin: 0; + padding: 0; +} .notification { & > a { display: block; - padding: 15px 15px 15px 75px; + padding: 8px 15px 8px 75px; color: @fl-body-muted-color; overflow: hidden; @@ -80,26 +101,27 @@ } } & .avatar { + .avatar-size(24px); float: left; - margin-left: -60px; + margin: -2px 0 -2px -60px; } -} -.notification-title { - color: @fl-body-heading-color; - font-size: 13px; - font-weight: bold; - margin: 0 0 6px; - line-height: 1.5em; -} -.notification-info { - font-size: 12px; - - & .fa { + & .icon { + float: left; + margin-left: -23px; font-size: 14px; + margin-top: 2px; } & .username { font-weight: bold; } + & .content { + margin-right: 5px; + } + & time { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } } @media @phone { .notification {