Deduplicate some code for the notifications drop down

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();
   }
 });

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;
   },
 

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

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 {

app/assets/stylesheets/desktop/topic.scss

@@ -240,3 +240,4 @@ and (max-width : 485px) {
     max-width: 100%;
   }
 }
+