From 2d47f144f52cc186c1f3a557cc33dd3d18ed47f2 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 31 May 2016 15:57:13 -0400
Subject: [PATCH] Deduplicate some code for the notifications drop down

---
 .../topic-notifications-button.js.es6         | 21 ++++++++--------
 .../widgets/topic-notifications-button.js.es6 | 25 ++++++++++++++++---
 app/assets/javascripts/main_include.js        |  1 -
 .../stylesheets/desktop/topic-post.scss       |  3 +++
 app/assets/stylesheets/desktop/topic.scss     |  1 +
 5 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
index 92fa95d5cc3..df4553a4735 100644
--- a/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6
@@ -1,16 +1,15 @@
-import NotificationsButton from 'discourse/components/notifications-button';
+import MountWidget from 'discourse/components/mount-widget';
+import { observes } from 'ember-addons/ember-computed-decorators';
 
-export default NotificationsButton.extend({
-  longDescription: Em.computed.alias('topic.details.notificationReasonText'),
-  hidden: Em.computed.alias('topic.deleted'),
-  notificationLevel: Em.computed.alias('topic.details.notification_level'),
-  i18nPrefix: 'topic.notifications',
+export default MountWidget.extend({
+  widget: 'topic-notifications-button',
 
-  i18nPostfix: function() {
-    return this.get('topic.isPrivateMessage') ? '_pm' : '';
-  }.property('topic.isPrivateMessage'),
+  buildArgs() {
+    return { topic: this.get('topic'), appendReason: true, showFullTitle: true };
+  },
 
-  clicked(id) {
-    this.get('topic.details').updateNotifications(id);
+  @observes('topic.details.notification_level')
+  _triggerRerender() {
+    this.queueRerender();
   }
 });
diff --git a/app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6 b/app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6
index ab70d1a9d71..3f9188d5040 100644
--- a/app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6
@@ -39,20 +39,37 @@ export default createWidget('topic-notifications-button', {
 
   buttonFor(level) {
     const details = buttonDetails(level);
-    return this.attach('button', {
-      className: `btn no-text`,
+
+    const button = {
+      className: `btn`,
+      label: null,
       icon: details.icon,
       action: 'toggleDropdown',
       iconClass: details.key
-    });
+    };
+
+    if (this.attrs.showFullTitle) {
+      button.label = `topic.notifications.${details.key}.title`;
+    } else {
+      button.className = 'btn no-text notifications-dropdown';
+    }
+
+    return this.attach('button', button);
   },
 
   html(attrs, state) {
-    const result = [ this.buttonFor(attrs.topic.get('details.notification_level')) ];
+    const details = attrs.topic.get('details');
+    const result = [ this.buttonFor(details.get('notification_level')) ];
+
     if (state.expanded) {
       result.push(h('ul.dropdown-menu', all.map(l => this.attach('notification-option', l))));
     }
 
+    if (attrs.appendReason) {
+      result.push(h('p', details.get('notificationReasonText')));
+    }
+
+
     return result;
   },
 
diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js
index 1bb15c7a124..a8a6d22a532 100644
--- a/app/assets/javascripts/main_include.js
+++ b/app/assets/javascripts/main_include.js
@@ -67,7 +67,6 @@
 //= require ./discourse/views/button
 //= require ./discourse/components/dropdown-button
 //= require ./discourse/components/notifications-button
-//= require ./discourse/components/topic-notifications-button
 //= require ./discourse/lib/link-mentions
 //= require ./discourse/components/site-header
 //= require ./discourse/lib/utilities
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 674426a81b7..f0caf1cf59d 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -436,6 +436,9 @@ a.star {
     margin-right: 10px;
     .fa-bookmark.bookmarked { color: $tertiary; }
   }
+  .notification-options p {
+    display: inline-block;
+  }
 }
 
 #suggested-topics {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 685240c0bf5..f51abd1c36c 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -240,3 +240,4 @@ and (max-width : 485px) {
     max-width: 100%;
   }
 }
+