From 2b651b20cf5f549e44fbff8ba3acbec5a4b64d48 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Thu, 7 Jul 2016 18:25:48 +0800
Subject: [PATCH] UX: Display message when user has no notifications instead of
 a blank page.

---
 .../controllers/user-notifications.js.es6     |  7 ++++++-
 .../templates/user/notifications-index.hbs    | 19 ++++++-------------
 .../templates/user/notifications.hbs          | 10 +++++++---
 app/assets/stylesheets/common/base/user.scss  |  1 -
 app/assets/stylesheets/desktop/user.scss      |  3 ---
 app/assets/stylesheets/mobile/user.scss       |  1 +
 config/locales/client.en.yml                  |  1 +
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/user-notifications.js.es6 b/app/assets/javascripts/discourse/controllers/user-notifications.js.es6
index 8e860c2de50..50393301817 100644
--- a/app/assets/javascripts/discourse/controllers/user-notifications.js.es6
+++ b/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: {
diff --git a/app/assets/javascripts/discourse/templates/user/notifications-index.hbs b/app/assets/javascripts/discourse/templates/user/notifications-index.hbs
index 0ea5830ad6e..875153c437c 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications-index.hbs
+++ b/app/assets/javascripts/discourse/templates/user/notifications-index.hbs
@@ -8,16 +8,9 @@
   </div>
 {{/if}}
 
-<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>
-
-{{user-notifications-large notifications=model}}
-
-{{#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}}
+{{#if hasNotifications}}
+  {{user-notifications-large notifications=model}}
+  {{conditional-loading-spinner condition=loading}}
+{{else}}
+  <div class='alert alert-info'>{{i18n 'notifications.empty'}}</div>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/user/notifications.hbs b/app/assets/javascripts/discourse/templates/user/notifications.hbs
index 7a9f5420bf2..e85294ea617 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications.hbs
+++ b/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'>
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index c4b6fad8369..ee5a7537ff5 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -59,7 +59,6 @@
 
 .notification-buttons {
   margin: 10px 0;
-  text-align: right;
 }
 
 .user-navigation {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index d3ab73c465a..6a1d0344659 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -681,9 +681,6 @@
 }
 
 .user-main .nav-stacked {
-  &.notification-list {
-    padding-top: 40px;
-  }
   &.activity-list {
     padding-top: 20px;
   }
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index c4e64d64577..304a8bffdc3 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -134,6 +134,7 @@
 .user-navigation {
   width: 100%;
   margin-top: 20px;
+  min-height: 20px;
 
   h3 {
     color: $primary;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 931fbc35a9b..f817e3b7e98 100644
--- a/config/locales/client.en.yml
+++ b/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>"