Add "no notifications" to dropdown & notifications index page

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

app/assets/stylesheets/notifications.scss

@@ -33,6 +33,10 @@
     &:hover {
       background-color: $color-mystic;
     }
+
+    &.no-notifications {
+      padding-left: 15px;
+    }
   }
 
   .unseen {

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;

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>

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">

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.