FIX: keeps as much as possible the same api for select-box components

app/assets/javascripts/admin/templates/group.hbs

@@ -122,7 +122,7 @@
 
   <div>
     <label>{{i18n 'groups.notification_level'}}</label>
-    {{notification-options i18nPrefix='groups.notifications' value=model.default_notification_level}}
+    {{notifications-button i18nPrefix='groups.notifications' value=model.default_notification_level}}
     <div class='clearfix'></div>
   </div>
 

app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6

@@ -4,7 +4,7 @@ import computed from "ember-addons/ember-computed-decorators";
 import { observes } from "ember-addons/ember-computed-decorators";
 
 export default DropdownSelectBoxComponent.extend({
-  classNames: ["categories-admin-actions"],
+  classNames: ["categories-admin-dropdown"],
 
   icon: `${iconHTML('bars')}${iconHTML('caret-down')}`.htmlSafe(),
 

app/assets/javascripts/discourse/components/category-notifications-button.js.es6

@@ -1,10 +1,10 @@
-import NotificationOptionsComponent from "discourse/components/notification-options";
-import { observes } from "ember-addons/ember-computed-decorators";
+import NotificationOptionsComponent from "discourse/components/notifications-button";
+import { on, observes } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default NotificationOptionsComponent.extend({
-  classNames: ["category-notification-options"],
+  classNames: ["category-notifications-button"],
 
   classNameBindings: ["hidden:is-hidden"],
   hidden: Ember.computed.or("category.deleted", "site.isMobileDevice"),

app/assets/javascripts/discourse/components/group-notifications-button.js.es6

@@ -1,8 +1,8 @@
-import NotificationOptionsComponent from "discourse/components/notification-options";
+import NotificationOptionsComponent from "discourse/components/notifications-button";
 import { observes } from "ember-addons/ember-computed-decorators";
 
 export default NotificationOptionsComponent.extend({
-  classNames: ["group-notification-options"],
+  classNames: ["group-notifications-button"],
 
   value: Em.computed.alias("group.group_user.notification_level"),
 

app/assets/javascripts/discourse/components/notifications-button.js.es6

@@ -5,7 +5,7 @@ import { buttonDetails } from "discourse/lib/notification-levels";
 import { allLevels } from "discourse/lib/notification-levels";
 
 export default DropdownSelectBoxComponent.extend({
-  classNames: ["notification-options"],
+  classNames: ["notifications-button"],
 
   i18nPrefix: "",
   i18nPostfix: "",
@@ -14,6 +14,8 @@ export default DropdownSelectBoxComponent.extend({
   fullWidthOnMobile: true,
   content: allLevels,
 
+  value: Em.computed.alias("notificationLevel"),
+
   @computed("value")
   icon(value) {
     const details = buttonDetails(value);

app/assets/javascripts/discourse/components/tag-notifications-button.js.es6

@@ -1,10 +1,10 @@
-import NotificationOptionsComponent from "discourse/components/notification-options";
+import NotificationOptionsComponent from "discourse/components/notifications-button";
 import { observes } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default NotificationOptionsComponent.extend({
-  classNames: ["tag-notification-options"],
+  classNames: ["tag-notifications-button"],
 
   i18nPrefix: "tagging.notifications",
 

app/assets/javascripts/discourse/components/topic-notification-options-button.js.es6

@@ -1,9 +0,0 @@
-export default Ember.Component.extend({
-  layoutName: "components/topic-notification-options-button",
-
-  classNames: ["topic-notification-options-button"],
-
-  showFullTitle: true,
-
-  appendReason: true,
-});

app/assets/javascripts/discourse/components/topic-notifications-button.js.es6

@@ -0,0 +1,9 @@
+export default Ember.Component.extend({
+  layoutName: "components/topic-notifications-button",
+
+  classNames: ["topic-notifications-button"],
+
+  showFullTitle: true,
+
+  appendReason: true,
+});

app/assets/javascripts/discourse/components/topic-notifications-options.js.es6

@@ -1,10 +1,10 @@
-import NotificationOptionsComponent from "discourse/components/notification-options";
+import NotificationOptionsComponent from "discourse/components/notifications-button";
 import { observes, on } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 import { topicLevels, buttonDetails } from "discourse/lib/notification-levels";
 
 export default NotificationOptionsComponent.extend({
-  classNames: ["topic-notification-options"],
+  classNames: ["topic-notifications-options"],
 
   content: topicLevels,
   i18nPrefix: "topic.notifications",
@@ -16,7 +16,7 @@ export default NotificationOptionsComponent.extend({
 
   @on("didInsertElement")
   _bindGlobalLevelChanged() {
-    this.appEvents.on("topic-notifications-options:changed", (msg) => {
+    this.appEvents.on("topic-notifications-button:changed", (msg) => {
       if (msg.type === "notification") {
         if (this.get("topic.details.notification_level") !== msg.id) {
           this.get("topic.details").updateNotifications(msg.id);
@@ -27,12 +27,12 @@ export default NotificationOptionsComponent.extend({
 
   @on("willDestroyElement")
   _unbindGlobalLevelChanged() {
-    this.appEvents.off("topic-notifications-options:changed");
+    this.appEvents.off("topic-notifications-button:changed");
   },
 
   @observes("value")
   _notificationLevelChanged() {
-    this.appEvents.trigger("topic-notifications-options:changed", {type: "notification", id: this.get("value")});
+    this.appEvents.trigger("topic-notifications-button:changed", {type: "notification", id: this.get("value")});
   },
 
   @observes("topic.details.notification_level")

app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6

@@ -198,19 +198,19 @@ export default {
   },
 
   setTrackingToMuted(event) {
-    this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 0, event});
+    this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 0, event});
   },
 
   setTrackingToRegular(event) {
-    this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 1, event});
+    this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 1, event});
   },
 
   setTrackingToTracking(event) {
-    this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 2, event});
+    this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 2, event});
   },
 
   setTrackingToWatching(event) {
-    this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 3, event});
+    this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 3, event});
   },
 
   sendToTopicListItemView(action) {

app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs

@@ -77,7 +77,7 @@
   {{pinned-button topic=topic}}
 </div>
 
-{{topic-notification-options-button topic=topic}}
+{{topic-notifications-button topic=topic}}
 
 {{plugin-outlet name="after-topic-footer-buttons"
                 args=(hash topic=topic)

app/assets/javascripts/discourse/templates/components/topic-notifications-button.hbs

@@ -1,4 +1,4 @@
-{{topic-notification-options topic=topic showFullTitle=showFullTitle}}
+{{topic-notifications-options topic=topic showFullTitle=showFullTitle}}
 
 {{#if appendReason}}
   <p class="reason">

app/assets/javascripts/discourse/templates/navigation/category.hbs

@@ -18,7 +18,7 @@
     {{navigation-bar navItems=navItems filterMode=filterMode category=category}}
 
     {{#if currentUser}}
-      {{category-notification-options category=category}}
+      {{category-notifications-button category=category}}
     {{/if}}
 
     {{create-topic-button

app/assets/javascripts/discourse/templates/tags/show.hbs

@@ -6,8 +6,8 @@
   <div class="container">
     {{#if tagNotification}}
       {{#unless additionalTags}}
-        {{tag-notification-options action="changeTagNotification"
-                                   value=tagNotification.notification_level}}
+        {{tag-notifications-button action="changeTagNotification"
+                                   notificationLevel=tagNotification.notification_level}}
       {{/unless}}
     {{/if}}
 

app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs

@@ -8,6 +8,6 @@
       {{i18n "topic.unsubscribe.change_notification_state"}}
     </p>
 
-    {{topic-notification-options-button topic=model}}
+    {{topic-notifications-button topic=model}}
   </div>
 </div>

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -73,7 +73,7 @@
     {{/if}}
 
     {{#if isGroup}}
-      {{group-notification-options group=group user=model}}
+      {{group-notifications-button group=group user=model}}
     {{/if}}
 </div>
 

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -315,7 +315,7 @@ createWidget('timeline-footer-controls', {
 
     if (currentUser) {
       controls.push(new ComponentConnector(this,
-        'topic-notification-options-button',
+        'topic-notifications-button',
         {
           topic,
           appendReason: false,

app/assets/stylesheets/common/base/_topic-list.scss

@@ -16,10 +16,12 @@
   }
 
   .select-box {
-    float: right;
-    margin-top: 0;
-    margin-left: 5px;
-    position: relative;
+    align-self: center;
+
+    &.categories-admin-dropdown, &.category-notifications-button, &.tag-notifications-button {
+      float: right;
+      margin-left: 8px;
+    }
   }
 }
 

app/assets/stylesheets/common/base/topic.scss

@@ -123,7 +123,7 @@
 }
 
 .topic-unsubscribe {
-  .notification-options {
+  .notifications-button {
     display: inline-block;
     float: none;
     line-height: 2em;

app/assets/stylesheets/common/components/categories-admin-actions.scss

@@ -1,9 +0,0 @@
-.categories-admin-actions.categories-admin-actions.categories-admin-actions {
-  .select-box-body {
-    min-width: auto;
-  }
-
-  .select-box-row .icons .d-icon {
-    color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
-  }
-}

app/assets/stylesheets/common/components/categories-admin-dropdown.scss

@@ -0,0 +1,13 @@
+.categories-admin-dropdown.categories-admin-dropdown.categories-admin-dropdown {
+  .select-box-body {
+    min-width: auto;
+  }
+
+  .select-box-row .icons {
+    align-self: flex-start;
+
+    .d-icon {
+      color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
+    }
+  }
+}

app/assets/stylesheets/common/components/category-notification-options.scss

@@ -1,3 +0,0 @@
-.category-notification-options.category-notification-options.is-hidden {
-  display: none;
-}

app/assets/stylesheets/common/components/category-notifications-button.scss

@@ -0,0 +1,3 @@
+.category-notification-button.category-notification-button.is-hidden {
+  display: none;
+}

app/assets/stylesheets/common/components/notifications-button.scss

@@ -1,4 +1,4 @@
-.notification-options.notification-options.notification-options {
+.notifications-button.notifications-button.notifications-button {
   .select-box-body {
     min-width: 550px;
     max-width: 550px;

app/assets/stylesheets/common/components/topic-notifications-button.scss

@@ -1,5 +1,5 @@
 #topic-footer-buttons {
-  .topic-notification-options-button {
+  .topic-notifications-button {
     min-width: auto;
     margin: 10px 0 15px 0;
 
@@ -14,17 +14,17 @@
   }
 }
 
-.topic-notification-options-button .topic-notification-options {
+.topic-notifications-button .topic-notifications-options {
   min-width: auto;
 }
 
-.topic-notification-options-button {
+.topic-notifications-button {
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   margin: 0;
 
-  .topic-notification-options, .reason {
+  .topic-notifications-options, .reason {
     display: inline-flex;
   }
 }

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

@@ -451,16 +451,6 @@ a.star {
   }
 }
 
-.topic-notifications-container {
-  .btn {
-    @include topic-footer-button;
-  }
-  .notification-options p {
-    @include topic-footer-buttons-text;
-    display: inline-block;
-  }
-}
-
 #topic-footer-button {
   width: 757px;
 }

test/javascripts/acceptance/topic-notifications-button-test.js.es6

@@ -19,7 +19,7 @@ acceptance("Topic Notifications button", {
 QUnit.test("Updating topic notification level", assert => {
   visit("/t/internationalization-localization/280");
 
-  const notificationOptions = "#topic-footer-buttons .topic-notification-options";
+  const notificationOptions = "#topic-footer-buttons .topic-notifications-options";
 
   andThen(() => {
     assert.ok(
@@ -40,7 +40,7 @@ QUnit.test("Updating topic notification level", assert => {
     // TODO: tgxworld I can't figure out why the topic timeline doesn't show when
     // running the tests in phantomjs
     // ok(
-    //   exists(".timeline-footer-controls .notification-options .watching"),
+    //   exists(".timeline-footer-controls .notifications-button .watching"),
     //   'it should display the right notification level in topic timeline'
     // );
   });