Disable 'Mark all as read' for notifications when everything is read

- This action needn't be performed when all notifications are read,
  hence disabling it is a good practice
- Added a link-disabled-color
- Used css pointer-events to disable clicking on the link

Preventing default on click for the mark_all_read_link

- avoiding the use of pointer-events
- setting up disabled only for mark_all_read_link

Moved disabling of the link to a global handler

- Added disabled class to the button in /notifications when all are read
- Styled the disabled button
- Adding disabled class after completion of ajaxRequest

app/assets/javascripts/app/app.js

@@ -40,6 +40,7 @@ var app = {
     this.setupHeader();
     this.setupBackboneLinks();
     this.setupGlobalViews();
+    this.setupDisabledLinks();
   },
 
   hasPreload : function(prop) {
@@ -107,7 +108,13 @@ var app = {
   instrument : function(type, name, object, callback) {
     if(!window.mixpanel) { return }
     window.mixpanel[type](name, object, callback)
-  }
+  },
+
+  setupDisabledLinks: function() {
+    $("a.disabled").click(function(event) {
+      event.preventDefault();
+    });
+  },
 };
 
 $(function() {

app/assets/javascripts/widgets/notifications.js

@@ -22,7 +22,7 @@
           .next(".hidden")
           .removeClass("hidden");
       });
-      self.notificationMenu.find('a#mark_all_read_link').click(function() {
+      self.notificationMenu.find('a#mark_all_read_link').click(function(event) {
         $.ajax({
           url: "/notifications/read_all",
           type: "GET",
@@ -39,6 +39,7 @@
             self.resetCount();
           }
         });
+        $(event.target).addClass("disabled");
         return false;
       });
     });

app/assets/stylesheets/application.css.sass

@@ -52,6 +52,13 @@ a
     :color $blue
     :text
       :decoration underline
+  &.disabled
+    :color $link-disabled-grey
+    :cursor default
+  &.disabled.button:hover
+    :color $link-disabled-grey
+    :cursor default
+    :background #f7f7f7
 
 p
   :word-wrap break-word

app/assets/stylesheets/colors.css.scss

@@ -7,6 +7,7 @@ $border-grey: #DDDDDD;
 $background-grey: #EEEEEE;
 $header-grey: #939393;
 $link-grey: #777777;
+$link-disabled-grey: #999999;
 $text-grey: #999999;
 
 $white: white;

app/assets/stylesheets/header.css.scss

@@ -131,6 +131,10 @@ body > header {
       }
 
       a { color: $blue; }
+      a.disabled {
+        color: $link-disabled-grey;
+        cursor: default;
+      }
 
       .header {
         padding: 10px;

app/assets/templates/header_tpl.jst.hbs

@@ -45,7 +45,7 @@
         <div class="header">
           <div class="right">
 
-            <a href="#" id="mark_all_read_link">
+            <a href="#" id="mark_all_read_link" class="{{#unless current_user.notifications_count}}disabled{{/unless}}">
               {{t "header.mark_all_as_read"}}
             </a>
             |

app/views/notifications/index.html.haml

@@ -5,7 +5,7 @@
         = @unread_notification_count
       = t('.notifications')
   .span-8.last
-    = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => 'button'
+    = link_to t('.mark_all_as_read'), notifications_read_all_path, :class => "button #{'disabled' unless @unread_notification_count > 0}"
   .span-24.last
     .stream.notifications
       - @group_days.each do |day, notes|