New look for notifications

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']
     });
   }
 }

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())
     ]));
   }
 

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();

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 {