From 98deb5ff418da1fb9b2b5b0fde11e8bee79e77e7 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Thu, 29 May 2014 14:15:56 -0400
Subject: [PATCH] Category notification settings dropdown: use common code with
 topic notification and pin/unpin dropdowns

---
 .../buttons/category_notifications_button.js  | 73 +++----------------
 .../views/buttons/dropdown_button_view.js     | 10 +--
 .../views/buttons/notifications_button.js     | 69 ++++++++++--------
 .../discourse/views/buttons/pinned_button.js  | 11 ++-
 .../buttons/topic_notifications_button.js     | 27 +++++++
 .../views/topic_footer_buttons_view.js        |  2 +-
 app/assets/javascripts/main_include.js        |  1 +
 .../desktop/category-notification.scss        | 39 ----------
 .../stylesheets/desktop/topic-list.scss       |  7 ++
 app/assets/stylesheets/mobile/topic-list.scss |  4 +
 10 files changed, 102 insertions(+), 141 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/views/buttons/topic_notifications_button.js
 delete mode 100644 app/assets/stylesheets/desktop/category-notification.scss

diff --git a/app/assets/javascripts/discourse/views/buttons/category_notifications_button.js b/app/assets/javascripts/discourse/views/buttons/category_notifications_button.js
index 7586ea1c5e7..52954bb5070 100644
--- a/app/assets/javascripts/discourse/views/buttons/category_notifications_button.js
+++ b/app/assets/javascripts/discourse/views/buttons/category_notifications_button.js
@@ -6,68 +6,19 @@
   @namespace Discourse
   @module Discourse
 **/
-Discourse.CategoryNotificationsButton = Discourse.View.extend({
-  classNames: ['notification-options'],
+Discourse.CategoryNotificationsButton = Discourse.NotificationsButton.extend({
+  classNames: ['notification-options', 'category-notification-menu'],
+  buttonIncludesText: false,
+  longDescriptionBinding: null,
   category: Em.computed.alias('controller.model'),
+  target: Em.computed.alias('category'),
   hidden: Em.computed.alias('category.deleted'),
-  templateName: 'category_notification_dropdown',
+  notificationLevels: Discourse.Category.NotificationLevel,
+  notificationLevel: Em.computed.alias('category.notification_level'),
+  i18nPrefix: 'category.notifications',
+  i18nPostfix: '',
 
-  watchingClasses: 'fa fa-exclamation-circle watching',
-  trackingClasses: 'fa fa-circle tracking',
-  mutedClasses: 'fa fa-times-circle muted',
-  regularClasses: 'fa fa-circle-o regular',
-
-
-  
-  init: function() {
-    this.display();
-    this._super();
-  },
-
-  dropDownContent: function() {
-    var contents = [];
-
-    _.each([
-      ['WATCHING', 'watching', this.watchingClasses],
-      ['TRACKING', 'tracking', this.trackingClasses],
-      ['REGULAR', 'regular', ''],
-      ['MUTED', 'muted', this.mutedClasses]
-    ], function(pair) {
-
-      contents.push({
-          id: Discourse.Category.NotificationLevel[pair[0]],
-          title: I18n.t('category.notifications.' + pair[1] + '.title'),
-          description: I18n.t('category.notifications.' + pair[1] + '.description'),
-          styleClasses: pair[2]
-      }
-        
-        );
-    });
-
-    return contents;
-  }.property(),
-
-  // displayed Button
-  display: function() {
-    var icon = "";
-    switch (this.get('category').notification_level) {
-        case Discourse.Category.NotificationLevel.WATCHING:
-          icon = this.watchingClasses;
-          break;
-        case Discourse.Category.NotificationLevel.TRACKING:
-          icon = this.trackingClasses;
-          break;
-        case Discourse.Category.NotificationLevel.MUTED:
-          icon = this.mutedClasses;
-          break;
-        default:
-          icon = this.regularClasses;
-          break;
-    }
-    this.set("icon", icon);
-  },
-
-  changeDisplay: function() {
-    this.display();
-  }.observes('category.notification_level')
+  clicked: function(id) {
+    this.get('category').setNotification(id);
+  }
 });
diff --git a/app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js b/app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js
index 9fcf28cf663..38a382204e8 100644
--- a/app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js
+++ b/app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js
@@ -29,7 +29,6 @@ Discourse.DropdownButtonView = Discourse.View.extend({
 
   render: function(buffer) {
     var self = this;
-    var descriptionKey = self.get('descriptionKey') || 'description';
 
     buffer.push("<h4 class='title'>" + self.get('title') + "</h4>");
     buffer.push("<button class='btn standard dropdown-toggle' data-toggle='dropdown'>");
@@ -38,11 +37,10 @@ Discourse.DropdownButtonView = Discourse.View.extend({
     buffer.push("<ul class='dropdown-menu'>");
 
     _.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 + "." + descriptionKey),
+      var id = row.id,
+          title = row.title,
+          iconClass = row.styleClasses,
+          description = row.description,
           className = (self.get('activeItem') === id? 'disabled': '');
 
       buffer.push("<li data-id=\"" + id + "\" class=\"" + className + "\"><a href='#'>");
diff --git a/app/assets/javascripts/discourse/views/buttons/notifications_button.js b/app/assets/javascripts/discourse/views/buttons/notifications_button.js
index 3bcd2eb0796..4126f6687a3 100644
--- a/app/assets/javascripts/discourse/views/buttons/notifications_button.js
+++ b/app/assets/javascripts/discourse/views/buttons/notifications_button.js
@@ -9,48 +9,53 @@
 Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
   classNames: ['notification-options'],
   title: '',
-  longDescriptionBinding: 'topic.details.notificationReasonText',
-  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'),
-
+  buttonIncludesText: true,
+  activeItem: Em.computed.alias('notificationLevel'),
+  notificationLevels: [],
+  i18nPrefix: '',
+  i18nPostfix: '',
   watchingClasses: 'fa fa-exclamation-circle watching',
   trackingClasses: 'fa fa-circle tracking',
   mutedClasses: 'fa fa-times-circle muted',
+  regularClasses: 'fa fa-circle-o regular',
+
+  options: function() {
+    return [['WATCHING', 'watching', this.watchingClasses],
+            ['TRACKING', 'tracking', this.trackingClasses],
+            ['REGULAR',  'regular',  this.regularClasses],
+            ['MUTED',    'muted',    this.mutedClasses]];
+  }.property(),
 
   dropDownContent: function() {
-    var contents = [], postfix = '';
-
-    if (this.get('isPrivateMessage')) { postfix = '_pm'; }
-
-    _.each([
-      ['WATCHING', 'watching', this.watchingClasses],
-      ['TRACKING', 'tracking', this.trackingClasses],
-      ['REGULAR', 'regular', 'tracking'],
-      ['MUTED', 'muted', this.mutedClasses]
-    ], function(pair) {
+    var contents = [],
+        prefix = this.get('i18nPrefix'),
+        postfix = this.get('i18nPostfix'),
+        levels = this.get('notificationLevels');
 
+    _.each(this.get('options'), function(pair) {
       if (postfix === '_pm' && pair[1] === 'regular') { return; }
-
-      contents.push([
-          Discourse.Topic.NotificationLevel[pair[0]],
-          'topic.notifications.' + pair[1] + postfix,
-          pair[2]
-        ]);
+      contents.push({
+        id: levels[pair[0]],
+        title: I18n.t(prefix + '.' + pair[1] + postfix + '.title'),
+        description: I18n.t(prefix + '.' + pair[1] + postfix + '.description'),
+        styleClasses: pair[2]
+      });
     });
 
     return contents;
   }.property(),
 
   text: function() {
-    var self = this;
+    var self = this,
+        prefix = this.get('i18nPrefix'),
+        postfix = this.get('i18nPostfix'),
+        levels = this.get('notificationLevels');
 
     var key = (function() {
-      switch (this.get('topic.details.notification_level')) {
-        case Discourse.Topic.NotificationLevel.WATCHING: return 'watching';
-        case Discourse.Topic.NotificationLevel.TRACKING: return 'tracking';
-        case Discourse.Topic.NotificationLevel.MUTED: return 'muted';
+      switch (this.get('notificationLevel')) {
+        case levels.WATCHING: return 'watching';
+        case levels.TRACKING: return 'tracking';
+        case levels.MUTED: return 'muted';
         default: return 'regular';
       }
     }).call(this);
@@ -60,14 +65,14 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
         case 'watching': return '<i class="' + self.watchingClasses + '"></i>&nbsp;';
         case 'tracking': return '<i class="' + self.trackingClasses +  '"></i>&nbsp;';
         case 'muted': return '<i class="' + self.mutedClasses + '"></i>&nbsp;';
-        default: return '';
+        default: return '<i class="' + self.regularClasses + '"></i>&nbsp;';
       }
     })();
-    return icon + (I18n.t("topic.notifications." + key + ".title")) + "<span class='caret'></span>";
-  }.property('topic.details.notification_level'),
+    return icon + ( this.get('buttonIncludesText') ? I18n.t(prefix + '.' + key + postfix + ".title") : '') + "<span class='caret'></span>";
+  }.property('notificationLevel'),
 
-  clicked: function(id) {
-    return this.get('topic.details').updateNotifications(id);
+  clicked: function(/* id */) {
+    // sub-class needs to implement this
   }
 
 });
diff --git a/app/assets/javascripts/discourse/views/buttons/pinned_button.js b/app/assets/javascripts/discourse/views/buttons/pinned_button.js
index 8e7bf11f058..bf56d637ac9 100644
--- a/app/assets/javascripts/discourse/views/buttons/pinned_button.js
+++ b/app/assets/javascripts/discourse/views/buttons/pinned_button.js
@@ -19,6 +19,7 @@ Discourse.PinnedButton = Discourse.DropdownButtonView.extend({
   }.property('topic.pinned'),
 
   topic: Em.computed.alias('controller.model'),
+  target: Em.computed.alias('topic'),
 
   hidden: function(){
     var topic = this.get('topic');
@@ -32,8 +33,14 @@ Discourse.PinnedButton = Discourse.DropdownButtonView.extend({
   dropDownContent: function() {
     var globally = this.get('topic.pinned_globally') ? '_globally' : '';
     return [
-      ['pinned', 'topic_statuses.pinned' + globally, 'fa fa-thumb-tack'],
-      ['unpinned', 'topic_statuses.unpinned', 'fa fa-thumb-tack unpinned']
+      {id: 'pinned',
+       title: I18n.t('topic_statuses.pinned' + globally + '.title'),
+       description: I18n.t('topic_statuses.pinned' + globally + '.help'),
+       styleClasses: 'fa fa-thumb-tack' },
+      {id: 'unpinned',
+       title: I18n.t('topic_statuses.unpinned.title'),
+       description: I18n.t('topic_statuses.unpinned.help'),
+       styleClasses: 'fa fa-thumb-tack unpinned' }
     ];
   }.property(),
 
diff --git a/app/assets/javascripts/discourse/views/buttons/topic_notifications_button.js b/app/assets/javascripts/discourse/views/buttons/topic_notifications_button.js
new file mode 100644
index 00000000000..600b2da0f38
--- /dev/null
+++ b/app/assets/javascripts/discourse/views/buttons/topic_notifications_button.js
@@ -0,0 +1,27 @@
+/**
+  A button to display topic notification options.
+
+  @class TopicNotificationsButton
+  @extends Discourse.NotificationsButton
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.TopicNotificationsButton = Discourse.NotificationsButton.extend({
+  longDescriptionBinding: 'topic.details.notificationReasonText',
+  topic: Em.computed.alias('controller.model'),
+  target: Em.computed.alias('topic'),
+  hidden: Em.computed.alias('topic.deleted'),
+  notificationLevels: Discourse.Topic.NotificationLevel,
+  notificationLevel: Em.computed.alias('topic.details.notification_level'),
+  isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'),
+  i18nPrefix: 'topic.notifications',
+
+  i18nPostfix: function() {
+    return this.get('isPrivateMessage') ? '_pm' : '';
+  }.property('isPrivateMessage'),
+
+  clicked: function(id) {
+    this.get('topic.details').updateNotifications(id);
+  }
+});
+
diff --git a/app/assets/javascripts/discourse/views/topic_footer_buttons_view.js b/app/assets/javascripts/discourse/views/topic_footer_buttons_view.js
index 549021207a5..b9d4522ec52 100644
--- a/app/assets/javascripts/discourse/views/topic_footer_buttons_view.js
+++ b/app/assets/javascripts/discourse/views/topic_footer_buttons_view.js
@@ -34,7 +34,7 @@ Discourse.TopicFooterButtonsView = Discourse.ContainerView.extend({
         this.attachViewClass(Discourse.ReplyButton);
       }
       this.attachViewClass(Discourse.PinnedButton);
-      this.attachViewClass(Discourse.NotificationsButton);
+      this.attachViewClass(Discourse.TopicNotificationsButton);
 
       this.trigger('additionalButtons', this);
     } else {
diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js
index 14f912ef239..39ec8b93bea 100644
--- a/app/assets/javascripts/main_include.js
+++ b/app/assets/javascripts/main_include.js
@@ -24,6 +24,7 @@
 //= require ./discourse/views/combobox_view
 //= require ./discourse/views/buttons/button_view
 //= require ./discourse/views/buttons/dropdown_button_view
+//= require ./discourse/views/buttons/notifications_button
 //= require ./discourse/routes/discourse_route
 //= require ./discourse/routes/discourse_restricted_user_route
 
diff --git a/app/assets/stylesheets/desktop/category-notification.scss b/app/assets/stylesheets/desktop/category-notification.scss
deleted file mode 100644
index b7478143d54..00000000000
--- a/app/assets/stylesheets/desktop/category-notification.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "common/foundation/helpers";
-
-.notification-dropdown-menu {
-  position: absolute;
-  z-index: 100;
-  display: none;
-  width: 550px;
-  padding: 4px 0;
-  margin: 32px 560px;
-  list-style: none;
-  background-color: $secondary;
-  border: 1px solid $primary;
-  box-shadow: 0 1px 5px rgba($primary, .4);
-  background-clip: padding-box;
-  span {font-size: 12px;}
-  .title {font-weight: bold; display: block; font-size: 14px;}
-
-  a {
-    display: block;
-    padding: 3px 15px;
-    clear: both;
-    font-weight: normal;
-    line-height: 18px;
-    color: $primary;
-  }
-}
-.notification-dropdown-menu li > a:hover,
-.notification-dropdown-menu .active > a,
-.notification-dropdown-menu .active > a:hover {
-  color: $secondary;
-  text-decoration: none;
-  background-color: scale-color($tertiary, $lightness: 50%);
-}
-.open > .notification-dropdown-menu {
-  display: block;
-  clear: both;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index f7f0d50c60b..03f7eee49c5 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -522,3 +522,10 @@ button.dismiss-read {
   float: right;
   margin-bottom: 5px;
 }
+
+.category-notification-menu .dropdown-menu {
+  right: 0;
+  top: 30px;
+  bottom: auto;
+  left: auto;
+}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 53f89c75246..435c0e79187 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -474,3 +474,7 @@ ol.category-breadcrumb {
     margin: 20px 0 0 0;
   }
 }
+
+.category-notification-menu {
+  display: none;
+}
\ No newline at end of file