From 0bcc62f07f9e6c500ece996a3db6e60640e5a19e Mon Sep 17 00:00:00 2001
From: Srihari Sriraman <srihari@c42.in>
Date: Thu, 29 Aug 2013 11:48:01 +0530
Subject: [PATCH] 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               | 9 ++++++++-
 app/assets/javascripts/widgets/notifications.js | 3 ++-
 app/assets/stylesheets/application.css.sass     | 7 +++++++
 app/assets/stylesheets/colors.css.scss          | 1 +
 app/assets/stylesheets/header.css.scss          | 4 ++++
 app/assets/templates/header_tpl.jst.hbs         | 2 +-
 app/views/notifications/index.html.haml         | 2 +-
 7 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js
index ce0b43118..2c2e219a5 100644
--- a/app/assets/javascripts/app/app.js
+++ b/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() {
diff --git a/app/assets/javascripts/widgets/notifications.js b/app/assets/javascripts/widgets/notifications.js
index 797d94588..0e07bbff0 100644
--- a/app/assets/javascripts/widgets/notifications.js
+++ b/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;
       });
     });
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 9ae450b9a..46fbc2283 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/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
diff --git a/app/assets/stylesheets/colors.css.scss b/app/assets/stylesheets/colors.css.scss
index f1fa155b3..98f6d4fc0 100644
--- a/app/assets/stylesheets/colors.css.scss
+++ b/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;
diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
index 890a57700..f69e1e965 100644
--- a/app/assets/stylesheets/header.css.scss
+++ b/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;
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index 92d3a3575..5439cfab3 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/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>
             |
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index afbacb82c..9bce83da0 100644
--- a/app/views/notifications/index.html.haml
+++ b/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|