Merge pull request #4867 from svbergerem/polish-notifications-view

Add separator between days, don't display grey zero

app/assets/javascripts/app/views/notifications_view.js

@@ -68,14 +68,14 @@ app.views.Notifications = Backbone.View.extend({
     type_notes.text( function(i,text) { return parseInt(text) + change });
     header_badge.text( function(i,text) { return parseInt(text) + change });
     if(all_notes.text()>0){
-      all_notes.addClass('badge-important');
+      all_notes.addClass('badge-important').removeClass('badge-default');
     } else {
-      all_notes.removeClass('badge-important');
+      all_notes.removeClass('badge-important').addClass('badge-default');
     }
     if(type_notes.text()>0){
-      type_notes.addClass('badge-important');
+      type_notes.addClass('badge-important').removeClass('badge-default');
     } else {
-      type_notes.removeClass('badge-important');
+      type_notes.removeClass('badge-important').addClass('badge-default');
     }
     if(header_badge.text()>0){
       header_badge.removeClass('hidden');

app/assets/stylesheets/notifications.css.scss

@@ -8,6 +8,7 @@
         color: $text-dark-grey;
         margin-right: 5px;
       }
+      .badge.badge-default { display: none; }
     }
     li.active > a {
       background-color: $background-grey;
@@ -27,11 +28,13 @@
     }
 
     .day_group {
-      margin-bottom: 20px;
+      margin-bottom: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed $border-grey;
+      &:last-child { border-bottom: none; }
       .date {
         text-align: center;
         color: $light-grey;
-        margin-bottom: 5px;
         .day {
           font-size: 40px;
           line-height: 40px;

app/views/notifications/index.html.haml

@@ -6,13 +6,13 @@
       %ul.nav.nav-tabs.nav-stacked
         %li{ :class => ('active' unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type])) }
           %a{ :href => '/notifications' + (params[:show] == 'unread' ? '?show=unread' : '') }
-            %span.pull-right.badge{:class => ('badge-important' if @unread_notification_count > 0)}
+            %span.pull-right.badge{:class => (@unread_notification_count > 0 ? 'badge-important' : 'badge-default')}
               = @unread_notification_count
             = t('.all_notifications')
         - @grouped_unread_notification_counts.each do |key, count|
           %li{ :class => ('active' if params[:type] == key), :data => { :type => key } }
             %a{ :href => '/notifications?type=' + key + (params[:show] == 'unread' ? '&show=unread' : '') }
-              %span.pull-right.badge{ :class => ('badge-important' if count > 0) }
+              %span.pull-right.badge{ :class => (count > 0 ? 'badge-important' :'badge-default') }
                 = count
               - case key
                 - when 'also_commented', 'comment_on_post'