UX: Display message when user has no notifications instead of a blank page.

app/assets/javascripts/discourse/controllers/user-notifications.js.es6

@@ -1,4 +1,4 @@
-import { observes } from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.ArrayController.extend({
   needs: ['application'],
@@ -8,6 +8,11 @@ export default Ember.ArrayController.extend({
     this.set("controllers.application.showFooter", !this.get("model.canLoadMore"));
   },
 
+  @computed('model.content.length')
+  hasNotifications(length) {
+    return length > 0;
+  },
+
   currentPath: Em.computed.alias('controllers.application.currentPath'),
 
   actions: {

app/assets/javascripts/discourse/templates/user/notifications-index.hbs

@@ -8,16 +8,9 @@
   </div>
 {{/if}}
 
-<div class='notification-buttons'>
+{{#if hasNotifications}}
-  <button title="{{i18n 'user.dismiss_notifications_tooltip'}}" id='dismiss-notifications-top' class='btn notifications-read' {{action "resetNew"}}>{{i18n 'user.dismiss_notifications'}}</button>
+  {{user-notifications-large notifications=model}}
-</div>
+  {{conditional-loading-spinner condition=loading}}
-
+{{else}}
-{{user-notifications-large notifications=model}}
+  <div class='alert alert-info'>{{i18n 'notifications.empty'}}</div>
-
+{{/if}}
-{{#conditional-loading-spinner condition=loading}}
-  {{#unless model.canLoadMore}}
-    <div class='notification-buttons'>
-      <button title="{{i18n 'user.dismiss_notifications_tooltip'}}" id='dismiss-notifications' class='btn notifications-read' {{action "resetNew"}}>{{i18n 'user.dismiss_notifications'}}</button>
-    </div>
-  {{/unless}}
-{{/conditional-loading-spinner}}

app/assets/javascripts/discourse/templates/user/notifications.hbs

@@ -1,10 +1,8 @@
 <section class='user-navigation'>
   {{#mobile-nav class='notifications-nav' desktopClass='notification-list action-list nav-stacked' currentPath=currentPath}}
-    {{#if model}}
     <li class='no-glyph'>
       {{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
     </li>
-    {{/if}}
     <li>
       {{#link-to 'userNotifications.responses'}}
         <i class="glyph fa fa-reply"></i>
@@ -18,7 +16,13 @@
     </li>
     <li>{{#link-to 'userNotifications.mentions'}}<i class="glyph fa fa-at"></i>{{i18n 'user_action_groups.7'}}{{/link-to}}</li>
     <li>{{#link-to 'userNotifications.edits'}}<i class="glyph fa fa-pencil"></i>{{i18n 'user_action_groups.11'}}{{/link-to}}</li>
-    {{/mobile-nav}}
+  {{/mobile-nav}}
+
+  {{#if model}}
+    <div class='notification-buttons'>
+      <button title="{{i18n 'user.dismiss_notifications_tooltip'}}" id='dismiss-notifications-top' class='btn notifications-read' {{action "resetNew"}}>{{i18n 'user.dismiss_notifications'}}</button>
+    </div>
+  {{/if}}
 </section>
 
 <section class='user-right'>

app/assets/stylesheets/common/base/user.scss

@@ -59,7 +59,6 @@
 
 .notification-buttons {
   margin: 10px 0;
-  text-align: right;
 }
 
 .user-navigation {

app/assets/stylesheets/desktop/user.scss

@@ -681,9 +681,6 @@
 }
 
 .user-main .nav-stacked {
-  &.notification-list {
-    padding-top: 40px;
-  }
   &.activity-list {
     padding-top: 20px;
   }

app/assets/stylesheets/mobile/user.scss

@@ -134,6 +134,7 @@
 .user-navigation {
   width: 100%;
   margin-top: 20px;
+  min-height: 20px;
 
   h3 {
     color: $primary;

config/locales/client.en.yml

@@ -1092,6 +1092,7 @@ en:
     notifications:
       title: "notifications of @name mentions, replies to your posts and topics, messages, etc"
       none: "Unable to load notifications at this time."
+      empty: "No notifications found."
       more: "view older notifications"
       total_flagged: "total flagged posts"
       mentioned: "<i title='mentioned' class='fa fa-at'></i><p><span>{{username}}</span> {{description}}</p>"