set visual indicator for active notification level

app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js

@@ -11,12 +11,13 @@ Discourse.DropdownButtonView = Discourse.View.extend({
   shouldRerender: Discourse.View.renderIfChanged('text', 'longDescription'),
 
   didInsertElement: function() {
+    var self = this;
     // If there's a click handler, call it
-    if (this.clicked) {
-      var dropDownButtonView = this;
-      this.$('ul li').on('click.dropdown-button', function(e) {
+    if (self.clicked) {
+      self.$('ul li').on('click.dropdown-button', function(e) {
         e.preventDefault();
-        dropDownButtonView.clicked($(e.currentTarget).data('id'));
+        if ($(e.currentTarget).data('id') !== self.get('activeItem'))
+          self.clicked($(e.currentTarget).data('id'));
         return false;
       });
     }
@@ -27,26 +28,31 @@ Discourse.DropdownButtonView = Discourse.View.extend({
   },
 
   render: function(buffer) {
-    buffer.push("<h4 class='title'>" + this.get('title') + "</h4>");
+    var self = this;
+    buffer.push("<h4 class='title'>" + self.get('title') + "</h4>");
     buffer.push("<button class='btn standard dropdown-toggle' data-toggle='dropdown'>");
-    buffer.push(this.get('text'));
+    buffer.push(self.get('text'));
     buffer.push("</button>");
     buffer.push("<ul class='dropdown-menu'>");
 
-    _.each(this.get('dropDownContent'), function(row) {
+    _.each(self.get('dropDownContent'), function(row) {
       var id = row[0],
           textKey = row[1],
+          iconClass = row[2],
           title = I18n.t(textKey + ".title"),
-          description = I18n.t(textKey + ".description");
+          description = I18n.t(textKey + ".description"),
+          className = (self.get('activeItem') === id? 'disabled': '');
 
-      buffer.push("<li data-id=\"" + id + "\"><a href='#'>");
-      buffer.push("<span class='title'>" + title + "</span>");
-      buffer.push("<span>" + description + "</span>");
+      buffer.push("<li data-id=\"" + id + "\" class=\"" + className + "\"><a href='#'>");
+      buffer.push("<span class='icon " + iconClass + "'></span>");
+      buffer.push("<div><span class='title'>" + title + "</span>");
+      buffer.push("<span>" + description + "</span></div>");
       buffer.push("</a></li>");
     });
+
     buffer.push("</ul>");
 
-    var desc = this.get('longDescription');
+    var desc = self.get('longDescription');
     if (desc) {
       buffer.push("<p>");
       buffer.push(desc);

app/assets/javascripts/discourse/views/buttons/notifications_button.js

@@ -13,6 +13,7 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
   topic: Em.computed.alias('controller.model'),
   hidden: Em.computed.alias('topic.deleted'),
   isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'),
+  activeItem: Em.computed.alias('topic.details.notification_level'),
 
   dropDownContent: function() {
     var contents = [], postfix = '';
@@ -20,17 +21,18 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
     if (this.get('isPrivateMessage')) { postfix = '_pm'; }
 
     _.each([
-      ['WATCHING', 'watching'],
-      ['TRACKING', 'tracking'],
-      ['REGULAR', 'regular'],
-      ['MUTED', 'muted']
+      ['WATCHING', 'watching', 'fa fa-circle heatmap-high'],
+      ['TRACKING', 'tracking', 'fa fa-circle heatmap-low'],
+      ['REGULAR', 'regular', ''],
+      ['MUTED', 'muted', 'fa fa-times-circle']
     ], function(pair) {
 
       if (postfix === '_pm' && pair[1] === 'regular') { return; }
 
       contents.push([
           Discourse.Topic.NotificationLevel[pair[0]],
-          'topic.notifications.' + pair[1] + postfix
+          'topic.notifications.' + pair[1] + postfix,
+          pair[2]
         ]);
     });
 

app/assets/stylesheets/desktop/topic-post.scss

@@ -539,7 +539,7 @@ iframe {
 
 }
 
-.open>.dropdown-menu {
+.open >.dropdown-menu {
   display: block;
 }
 
@@ -862,6 +862,10 @@ blockquote { /* solo quotes */
   font-weight: normal;
   line-height: 18px;
   color: $primary_text_color;
+
+  & > div {
+    margin-left: 26px;
+  }
 }
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
@@ -870,15 +874,32 @@ blockquote { /* solo quotes */
   text-decoration: none;
   background-color: $emphasis_text_color;
 }
+
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+  text-decoration: none;
+  color: $primary_text_color;
+  background-color: $moderator_background_color;
+  cursor: default;
+}
+
+.dropdown-menu .icon {
+  margin-top: 3px;
+  float: left;
+  font-size: 18px;
+}
+
 .open > .dropdown-menu {
   display: block;
-clear: both;
+  clear: both;
 }
+
 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
 }
+
 .fade.in {
   opacity: 1;
 }