From 5c80c8a8176aa47bee490de9dd909f7ef6256cb2 Mon Sep 17 00:00:00 2001
From: Luka Murn <luka.murn@biosistemika.com>
Date: Wed, 5 Oct 2016 16:48:40 +0200
Subject: [PATCH] Add "no notifications" to dropdown & notifications index page

---
 app/assets/javascripts/navigation.js        | 8 ++++++++
 app/assets/stylesheets/notifications.scss   | 4 ++++
 app/assets/stylesheets/themes/scinote.scss  | 6 ++++++
 app/views/shared/_navigation.html.erb       | 1 +
 app/views/user_notifications/index.html.erb | 8 +++++++-
 config/locales/en.yml                       | 3 +++
 6 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/navigation.js b/app/assets/javascripts/navigation.js
index 6b8a77129..8c7e77092 100644
--- a/app/assets/javascripts/navigation.js
+++ b/app/assets/javascripts/navigation.js
@@ -15,8 +15,11 @@
 
   function loadDropdownNotifications() {
     var button = $('#notifications-dropdown');
+    var noRecentText =
+      $('.dropdown-notifications .notifications-no-recent');
     button
       .on('click', function() {
+        noRecentText.hide();
         $.ajax({
           url: button.attr('data-href'),
           type: 'GET',
@@ -29,6 +32,11 @@
             $('.notifications-dropdown-header')
               .after(data.html);
             animateSpinner($('.notifications-dropdown-header'), false);
+
+            var ul = $('.dropdown-menu.dropdown-notifications');
+            if (ul.children('.notification').length === 0) {
+              noRecentText.show();
+            }
           }
         });
         $('#count-notifications').hide();
diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
index dc7594de2..39f126e63 100644
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@@ -33,6 +33,10 @@
     &:hover {
       background-color: $color-mystic;
     }
+
+    &.no-notifications {
+      padding-left: 15px;
+    }
   }
 
   .unseen {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index d71437ff3..ce4029f87 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -107,6 +107,12 @@ table {
   width: 450px;
   word-wrap: break-word;
 
+  .notifications-no-recent {
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+
   .notification {
     border-bottom: 1px solid $color-alto;
     padding-bottom: 10px;
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index 187b470b3..519d91220 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -70,6 +70,7 @@
           </a>
           <ul class="dropdown-menu dropdown-notifications">
             <li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= link_to t('nav.user.settings'), preferences_path %></span></li>
+            <li class="notifications-no-recent"><em><%= t('notifications.no_recent') %></em></li>
             <li class="notifications-dropdown-footer"><%= link_to t('notifications.show_all'), notifications_path %></li>
           </ul>
         </li>
diff --git a/app/views/user_notifications/index.html.erb b/app/views/user_notifications/index.html.erb
index 9376295df..0776a8810 100644
--- a/app/views/user_notifications/index.html.erb
+++ b/app/views/user_notifications/index.html.erb
@@ -5,7 +5,13 @@
   </div>
   <div class="notifications-body">
     <ul class="notifications-list">
-      <%= render 'list', notifications: @notifications %>
+      <% if @notifications.count > 0 %>
+        <%= render 'list', notifications: @notifications %>
+      <% else %>
+        <li class="notification no-notifications">
+          <em><%= t('notifications.no_notifications') %></em>
+        </li>
+      <% end %>
     </ul>
   </div>
   <div class="notifications-footer">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 39c7e7fff..41d6a21e2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1517,6 +1517,9 @@ en:
     filter: "Filter"
     show_all: "Show all notifications"
     show_more: "Show more notifications"
+    no_notifications: "No notifications."
+    no_recent: "No recent notifications."
+
   # This section contains general words that can be used in any parts of
   # application.