Replaces all notification-options like dropdowns with select-box

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

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

app/assets/javascripts/application.js

@@ -66,7 +66,6 @@
 //= require ./discourse/controllers/navigation/default
 //= require ./discourse/components/edit-category-panel
 //= require ./discourse/components/dropdown-button
-//= require ./discourse/components/notifications-button
 //= require ./discourse/lib/link-mentions
 //= require ./discourse/components/site-header
 //= require ./discourse/components/d-editor

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

@@ -0,0 +1,62 @@
+import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import computed from "ember-addons/ember-computed-decorators";
+import { observes } from "ember-addons/ember-computed-decorators";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: ["categories-admin-actions"],
+
+  icon: `${iconHTML('bars')}${iconHTML('caret-down')}`.htmlSafe(),
+
+  generatedHeadertext: null,
+
+  @computed
+  content() {
+    const items = [
+      {
+        id: "create",
+        text: I18n.t("category.create"),
+        description: I18n.t("category.create_long"),
+        icon: "plus"
+      }
+    ];
+
+    const includeReorder = this.get("siteSettings.fixed_category_positions");
+    if (includeReorder) {
+      items.push({
+        id: "reorder",
+        text: I18n.t("categories.reorder.title"),
+        description: I18n.t("categories.reorder.title_long"),
+        icon: "random"
+      });
+    }
+
+    return items;
+  },
+
+  actionNames: {
+    create: "createCategory",
+    reorder: "reorderCategories"
+  },
+
+  @observes("value")
+  _didSelectRow() {
+    this.sendAction(`actionNames.${this.get("value")}`);
+    this.set("value", null);
+  },
+
+  @computed
+  templateForRow: function() {
+    return (rowComponent) => {
+      const content = rowComponent.get("content");
+
+      return `
+        <div class="icons">${iconHTML(content.icon)}</div>
+        <div class="texts">
+          <span class="title">${Handlebars.escapeExpression(content.text)}</span>
+          <span class="desc">${Handlebars.escapeExpression(content.description)}</span>
+        </div>
+      `;
+    };
+  }
+});

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

@@ -1,39 +0,0 @@
-import { iconHTML } from 'discourse-common/lib/icon-library';
-import DropdownButton from 'discourse/components/dropdown-button';
-import computed from "ember-addons/ember-computed-decorators";
-
-export default DropdownButton.extend({
-  buttonExtraClasses: 'no-text',
-  title: '',
-  text: iconHTML('bars') + ' ' + iconHTML('caret-down'),
-  classNames: ['category-notification-menu', 'category-admin-menu'],
-
-  @computed()
-  dropDownContent() {
-    const includeReorder = this.get('siteSettings.fixed_category_positions');
-    const items = [
-      { id: 'create',
-        title: I18n.t('category.create'),
-        description: I18n.t('category.create_long'),
-        icon: 'plus' }
-    ];
-    if (includeReorder) {
-      items.push({
-        id: 'reorder',
-        title: I18n.t('categories.reorder.title'),
-        description: I18n.t('categories.reorder.title_long'),
-        icon: 'random'
-      });
-    }
-    return items;
-  },
-
-  actionNames: {
-    create: 'createCategory',
-    reorder: 'reorderCategories'
-  },
-
-  clicked(id) {
-    this.sendAction('actionNames.' + id);
-  }
-});

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

@@ -0,0 +1,21 @@
+import NotificationOptionsComponent from "discourse/components/notification-options";
+import { observes } from "ember-addons/ember-computed-decorators";
+import { iconHTML } from "discourse-common/lib/icon-library";
+
+export default NotificationOptionsComponent.extend({
+  classNames: ["category-notification-options"],
+
+  classNameBindings: ["hidden:is-hidden"],
+  hidden: Ember.computed.or("category.deleted", "site.isMobileDevice"),
+
+  i18nPrefix: "category.notifications",
+
+  value: Em.computed.alias("category.notification_level"),
+
+  generatedHeadertext: iconHTML("caret-down").htmlSafe(),
+
+  @observes("value")
+  _notificationLevelChanged() {
+    this.get("category").setNotification(this.get("value"));
+  },
+});

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

@@ -1,13 +0,0 @@
-import NotificationsButton from 'discourse/components/notifications-button';
-
-export default NotificationsButton.extend({
-  classNames: ['notification-options', 'category-notification-menu'],
-  buttonIncludesText: false,
-  hidden: Em.computed.alias('category.deleted'),
-  notificationLevel: Em.computed.alias('category.notification_level'),
-  i18nPrefix: 'category.notifications',
-
-  clicked(id) {
-    this.get('category').setNotification(id);
-  }
-});

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

@@ -0,0 +1,15 @@
+import NotificationOptionsComponent from "discourse/components/notification-options";
+import { observes } from "ember-addons/ember-computed-decorators";
+
+export default NotificationOptionsComponent.extend({
+  classNames: ["group-notification-options"],
+
+  value: Em.computed.alias("group.group_user.notification_level"),
+
+  i18nPrefix: "groups.notifications",
+
+  @observes("value")
+  _notificationLevelChanged() {
+    this.get("group").setNotification(this.get("value"), this.get("user.id"));
+  }
+});

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

@@ -1,11 +0,0 @@
-import NotificationsButton from 'discourse/components/notifications-button';
-
-export default NotificationsButton.extend({
-  classNames: ['notification-options', 'group-notification-menu'],
-  notificationLevel: Em.computed.alias('group.group_user.notification_level'),
-  i18nPrefix: 'groups.notifications',
-
-  clicked(id) {
-    this.get('group').setNotification(id, this.get('user.id'));
-  }
-});

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

@@ -0,0 +1,53 @@
+import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import computed from "ember-addons/ember-computed-decorators";
+import { buttonDetails } from "discourse/lib/notification-levels";
+import { allLevels } from "discourse/lib/notification-levels";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: ["notification-options"],
+
+  i18nPrefix: "",
+  i18nPostfix: "",
+  textKey: "key",
+  showFullTitle: true,
+  fullWidthOnMobile: true,
+  content: allLevels,
+
+  @computed("value")
+  icon(value) {
+    const details = buttonDetails(value);
+    return iconHTML(details.icon, {class: details.key}).htmlSafe();
+  },
+
+  @computed("value", "showFullTitle")
+  generatedHeadertext(value, showFullTitle) {
+    if (showFullTitle) {
+      const details = buttonDetails(value);
+      return I18n.t(`${this.get("i18nPrefix")}.${details.key}.title`);
+    } else {
+      return null;
+    }
+  },
+
+  @computed
+  templateForRow: function() {
+    return (rowComponent) => {
+      const content = rowComponent.get("content");
+      const start = `${this.get("i18nPrefix")}.${content.key}${this.get("i18nPostfix")}`;
+      const title = I18n.t(`${start}.title`);
+      const description = I18n.t(`${start}.description`);
+
+      return `
+        <div class="icons">
+          <span class="selection-indicator"></span>
+          ${iconHTML(content.icon, { class: content.key.dasherize() })}
+        </div>
+        <div class="texts">
+          <span class="title">${Handlebars.escapeExpression(title)}</span>
+          <span class="desc">${Handlebars.escapeExpression(description)}</span>
+        </div>
+      `;
+    };
+  }
+});

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

@@ -1,50 +0,0 @@
-import DropdownButton from 'discourse/components/dropdown-button';
-import { allLevels, buttonDetails } from 'discourse/lib/notification-levels';
-import { iconHTML } from 'discourse-common/lib/icon-library';
-import computed from 'ember-addons/ember-computed-decorators';
-
-export default DropdownButton.extend({
-  classNames: ['notification-options'],
-  title: '',
-  buttonIncludesText: true,
-  activeItem: Em.computed.alias('notificationLevel'),
-  i18nPrefix: '',
-  i18nPostfix: '',
-
-  @computed
-  dropDownContent() {
-    const prefix = this.get('i18nPrefix');
-    const postfix = this.get('i18nPostfix');
-
-    return allLevels.map(l => {
-      const start = `${prefix}.${l.key}${postfix}`;
-      return {
-        id: l.id,
-        title: I18n.t(`${start}.title`),
-        description: I18n.t(`${start}.description`),
-        icon: l.icon,
-        iconClass: l.key.dasherize(),
-      };
-    });
-  },
-
-  @computed('notificationLevel')
-  text(notificationLevel) {
-    const details = buttonDetails(notificationLevel);
-    const { key } = details;
-    const icon = iconHTML(details.icon, { class: key.dasherize() });
-
-    if (this.get('buttonIncludesText')) {
-      const prefix = this.get('i18nPrefix');
-      const postfix = this.get('i18nPostfix');
-      const text = I18n.t(`${prefix}.${key}${postfix}.title`);
-      return `${icon}&nbsp;${text}<span class='caret'></span>`;
-    } else {
-      return `${icon}&nbsp;<span class='caret'></span>`;
-    }
-  },
-
-  clicked(id) {
-    this.set("notificationLevel", id);
-  }
-});

app/assets/javascripts/discourse/components/select-box.js.es6

@@ -57,19 +57,22 @@ export default Ember.Component.extend({
     };
   },
 
+  @computed
   titleForRow: function() {
     return (rowComponent) => {
       return rowComponent.get(`content.${this.get("textKey")}`);
     };
-  }.property(),
+  },
 
+  @computed
   shouldHighlightRow: function() {
     return (rowComponent) => {
       const id = this._castInteger(rowComponent.get(`content.${this.get("idKey")}`));
       return id === this.get("value");
     };
-  }.property(),
+  },
 
+  @computed
   templateForRow: function() {
     return (rowComponent) => {
       let template = "";
@@ -83,7 +86,7 @@ export default Ember.Component.extend({
 
       return template;
     };
-  }.property(),
+  },
 
   applyDirection() {
     this.$().removeClass("is-above is-below is-left-aligned is-right-aligned");

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

@@ -0,0 +1,22 @@
+import NotificationOptionsComponent from "discourse/components/notification-options";
+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"],
+
+  i18nPrefix: "tagging.notifications",
+
+  @observes("value")
+  _notificationLevelChanged() {
+    this.sendAction("action", this.get("value"));
+  },
+
+  @computed("value")
+  icon() {
+    return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
+  },
+
+  generatedHeadertext: null
+});

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

@@ -1,11 +0,0 @@
-import NotificationsButton from 'discourse/components/notifications-button';
-
-export default NotificationsButton.extend({
-  classNames: ['notification-options', 'tag-notification-menu'],
-  buttonIncludesText: false,
-  i18nPrefix: 'tagging.notifications',
-
-  clicked(id) {
-    this.sendAction('action', id);
-  }
-});

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

@@ -0,0 +1,9 @@
+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-notification-options.js.es6

@@ -0,0 +1,52 @@
+import NotificationOptionsComponent from "discourse/components/notification-options";
+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"],
+
+  content: topicLevels,
+  i18nPrefix: "topic.notifications",
+
+  @on("init")
+  _setInitialNotificationLevel() {
+    this.set("value", this.get("topic.details.notification_level"));
+  },
+
+  @on("didInsertElement")
+  _bindGlobalLevelChanged() {
+    this.appEvents.on("topic-notifications-options:changed", (msg) => {
+      if (msg.type === "notification") {
+        if (this.get("topic.details.notification_level") !== msg.id) {
+          this.get("topic.details").updateNotifications(msg.id);
+        }
+      }
+    });
+  },
+
+  @on("willDestroyElement")
+  _unbindGlobalLevelChanged() {
+    this.appEvents.off("topic-notifications-options:changed");
+  },
+
+  @observes("value")
+  _notificationLevelChanged() {
+    this.appEvents.trigger("topic-notifications-options:changed", {type: "notification", id: this.get("value")});
+  },
+
+  @observes("topic.details.notification_level")
+  _content() {
+    this.set("value", this.get("topic.details.notification_level"));
+  },
+
+  @computed("topic.details.notification_level", "showFullTitle")
+  generatedHeadertext(notificationLevel, showFullTitle) {
+    if (showFullTitle) {
+      const details = buttonDetails(notificationLevel);
+      return I18n.t(`topic.notifications.${details.key}.title`);
+    } else {
+      return null;
+    }
+  }
+});

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

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

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

@@ -1,85 +0,0 @@
-import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
-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';
-import { iconHTML } from 'discourse-common/lib/icon-library';
-
-export default DropdownSelectBoxComponent.extend({
-  classNames: ["topic-notifications"],
-
-  content: topicLevels,
-
-  i18nPrefix: 'topic.notifications',
-  i18nPostfix: '',
-
-  textKey: "key",
-  showFullTitle: true,
-  fullWidthOnMobile: true,
-
-  @on("init")
-  _setInitialNotificationLevel() {
-    this.set("value", this.get("topic.details.notification_level"));
-  },
-
-  @on("didInsertElement")
-  _bindGlobalLevelChanged() {
-    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);
-        }
-      }
-    });
-  },
-
-  @on("willDestroyElement")
-  _unbindGlobalLevelChanged() {
-    this.appEvents.off("topic-notifications-button:changed");
-  },
-
-  @observes("value")
-  _notificationLevelChanged() {
-    this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: this.get("value")});
-  },
-
-  @computed("topic.details.notification_level")
-  icon(notificationLevel) {
-    const details = buttonDetails(notificationLevel);
-    return iconHTML(details.icon, {class: details.key}).htmlSafe();
-  },
-
-  @observes("topic.details.notification_level")
-  _content() {
-    this.set("value", this.get("topic.details.notification_level"));
-  },
-
-  @computed("topic.details.notification_level", "showFullTitle")
-  generatedHeadertext(notificationLevel, showFullTitle) {
-    if (showFullTitle) {
-      const details = buttonDetails(notificationLevel);
-      return I18n.t(`topic.notifications.${details.key}.title`);
-    } else {
-      return null;
-    }
-  },
-
-  templateForRow: function() {
-    return (rowComponent) => {
-      const content = rowComponent.get("content");
-      const start = `${this.get('i18nPrefix')}.${content.key}${this.get('i18nPostfix')}`;
-      const title = I18n.t(`${start}.title`);
-      const description = I18n.t(`${start}.description`);
-
-      return `
-        <div class="icons">
-          <span class="selection-indicator"></span>
-          ${iconHTML(content.icon, { class: content.key })}
-        </div>
-        <div class="texts">
-          <span class="title">${title}</span>
-          <span class="desc">${description}</span>
-        </div>
-      `;
-    };
-  }.property()
-});

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

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

app/assets/javascripts/discourse/templates/components/dropdown-select-box/dropdown-header.hbs

@@ -1,5 +1,11 @@
-<button class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}" aria-label="{{text}}" title="{{text}}">
+<button
+  class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}"
+  aria-label="{{text}}"
+  type="button"
+  title="{{text}}">
+
   {{icon}}
+
   {{#if text}}
     <span class="d-button-label">{{text}}</span>
   {{/if}}

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

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

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

@@ -1,4 +1,4 @@
-{{topic-notifications topic=topic showFullTitle=showFullTitle}}
+{{topic-notification-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-notifications-button category=category}}
+      {{category-notification-options category=category}}
     {{/if}}
 
     {{create-topic-button
@@ -33,4 +33,3 @@
     {{plugin-outlet name="category-navigation" args=(hash category=category)}}
   </div>
 {{/d-section}}
-

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

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

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

@@ -73,7 +73,7 @@
     {{/if}}
 
     {{#if isGroup}}
-      {{group-notifications-button group=group user=model}}
+      {{group-notification-options 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-notifications-button',
+        'topic-notification-options-button',
         {
           topic,
           appendReason: false,

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

@@ -14,6 +14,13 @@
       font: 1.071em/0.9 "FontAwesome";
     }
   }
+
+  .select-box {
+    float: right;
+    margin-top: 0;
+    margin-left: 5px;
+    position: relative;
+  }
 }
 
 html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
@@ -370,4 +377,3 @@ div.education {
   @extend .list-cell;
   border-bottom: 2px solid $primary-low;
 }
-

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

@@ -187,18 +187,6 @@ header .discourse-tag {color: $tag-color }
   margin-right: 8px;
 }
 
-.notification-options.tag-notification-menu {
-  float: right;
-  margin-bottom: 10px;
-}
-
-.tag-notification-menu .dropdown-menu {
-  right: 0;
-  top: 30px;
-  bottom: auto;
-  left: auto;
-}
-
 .tag-sort-options {
   margin-bottom: 20px;
   a {

app/assets/stylesheets/common/components/badges.scss

@@ -153,20 +153,11 @@
 
 
 .list-controls {
-.category-breadcrumb {
+  .category-breadcrumb {
-  a.badge-category, .dropdown-header {
+    a.badge-category, .dropdown-header {
       display: inline-block;
       padding: 5px 8px;
       line-height: 20px;
-    &.category-dropdown-button {
-      margin-left: -4px;
-      padding: 5px;
-      width: 13px;
-
-      .d-icon-caret-right {
-        margin-left: 2px;
-        }
-      }
     }
 
     li.bar>.dropdown-header:not(.home):first-child {
@@ -190,8 +181,6 @@
         margin: 0 2px;
       }
     }
-
-
   }
 
   .category-dropdown-menu {

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

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

app/assets/stylesheets/common/components/category-select-box.scss

@@ -1,4 +1,4 @@
-.category-select-box {
+.category-select-box.category-select-box {
   .select-box-row {
     display: -webkit-box;
     display: -ms-flexbox;

app/assets/stylesheets/common/components/dropdown-select-box.scss

@@ -1,16 +1,71 @@
 .dropdown-select-box.dropdown-select-box {
+  display: inline-flex;
+  height: 30px;
+  min-width: auto;
+
   &.is-expanded {
     z-index: 9999;
+
+    .collection,
+    .select-box-collection,
+    .select-box-body {
+      border-radius: 0;
+    }
   }
 
   .select-box-body {
     border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+    background-clip: padding-box;
+    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+    width: max-content;
+    max-width: 300px;
   }
 
   .select-box-row {
     margin: 0;
     padding: 5px 10px;
 
+    .icons {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      align-self: center;
+      margin-right: 10px;
+
+      .d-icon {
+        font-size: 1.286em;
+        align-self: center;
+        margin-right: 0;
+        opacity: 1;
+        color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+      }
+    }
+
+    .texts {
+      line-height: 18px;
+      flex: 1;
+      align-items: flex-start;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+
+      .title {
+        flex: 1;
+        font-weight: bold;
+        display: block;
+        font-size: 1em;
+        color: $primary;
+      }
+
+      .desc {
+        flex: 1;
+        font-size: 0.857em;
+        font-weight: normal;
+        color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));;
+        white-space: normal;
+      }
+    }
+
     &.is-highlighted {
       background: none;
     }
@@ -20,20 +75,29 @@
     }
   }
 
+  .select-box-collection {
+    padding: 0;
+  }
+
   .dropdown-header {
     padding: 0;
     border: 0;
     outline: 0;
     justify-content: flex-start;
-    width: min-content;
+    width: max-content;
     background: none;
 
+    .d-icon + .d-icon {
+      margin-left: 5px;
+    }
+
     .btn {
       align-items: center;
       justify-content: space-between;
       flex-direction: row;
       display: inline-flex;
       height: 100%;
+      margin: 0;
     }
   }
 }

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

@@ -0,0 +1,26 @@
+.notification-options.notification-options {
+  .select-box-body {
+    min-width: 550px;
+    max-width: 550px;
+  }
+
+  .select-box-row {
+    &.is-highlighted .icons .selection-indicator {
+      visibility: visible;
+    }
+
+    .icons {
+      align-self: flex-start;
+
+      .selection-indicator {
+        width: 6px;
+        height: 6px;
+        background: $tertiary;
+        visibility: hidden;
+        border-radius: 12px;
+        align-self: center;
+        margin-right: 5px;
+      }
+    }
+  }
+}

app/assets/stylesheets/common/components/topic-notification-options-button.scss

@@ -0,0 +1,29 @@
+#topic-footer-buttons {
+  .topic-notification-options-button {
+    min-width: auto;
+
+    .btn {
+      margin: 0;
+    }
+
+    .reason {
+      line-height: 16px;
+      margin: 0 0 0 5px;
+    }
+  }
+}
+
+.topic-notification-options-button .topic-notification-options {
+  min-width: auto;
+}
+
+.topic-notification-options-button {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 5px 0;
+
+  .topic-notification-options, .reason {
+    display: inline-flex;
+  }
+}

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

@@ -1,98 +0,0 @@
-#topic-footer-buttons .topic-notifications {
-  min-width: auto;
-  .btn {
-    margin: 0;
-  }
-}
-
-#topic-footer-buttons p.reason {
-  line-height: 16px;
-  margin: 0 0 0 5px;
-}
-
-.topic-notifications-button {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 5px 0;
-
-  .topic-notifications, .reason {
-    display: inline-flex;
-  }
-}
-
-.topic-notifications.topic-notifications {
-  display: inline-flex;
-  height: 30px;
-
-  &.is-expanded .collection, &.is-expanded .select-box-collection, &.is-expanded .select-box-body {
-    border-radius: 0;
-  }
-
-  .select-box-collection {
-    padding: 0;
-  }
-
-  .select-box-body {
-    background-clip: padding-box;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-    width: 550px;
-  }
-
-  .select-box-row {
-    &.is-highlighted .icons .selection-indicator {
-      visibility: visible;
-    }
-
-    .icons {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      align-self: flex-start;
-      margin-right: 10px;
-
-      .selection-indicator {
-        width: 6px;
-        height: 6px;
-        background: $tertiary;
-        visibility: hidden;
-        border-radius: 12px;
-        align-self: center;
-        margin-right: 5px;
-      }
-
-      .d-icon {
-        font-size: 1.286em;
-        align-self: flex-start;
-        margin-right: 0;
-        opacity: 1;
-      }
-    }
-
-    .texts {
-      line-height: 18px;
-      flex: 1;
-      align-items: flex-start;
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-
-      .title {
-        flex: 1;
-        font-weight: bold;
-        display: block;
-        font-size: 1em;
-        color: $primary;
-      }
-
-      .desc {
-        flex: 1;
-        font-size: 0.857em;
-        font-weight: normal;
-        color: #919191;
-        white-space: normal;
-      }
-    }
-  }
-}

app/assets/stylesheets/common/topic-timeline.scss

@@ -197,10 +197,6 @@
       button:last-child {
         margin-right: 0;
       }
-
-      .topic-notifications {
-        min-width: auto;
-      }
     }
 
     .start-date {

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

@@ -278,7 +278,7 @@ button.dismiss-read {
   margin-left: 10px;
 }
 
-.category-notification-menu, .tags-admin-menu {
+.tags-admin-menu {
   .dropdown-menu {
     right: 0;
     top: 30px;

app/assets/stylesheets/desktop/user.scss

@@ -8,11 +8,6 @@
       margin-top: 10px;
     }
   }
-
-  .group-notification-menu {
-    float: right;
-    margin-bottom: 5px;
-  }
 }
 
 .profile-image {
@@ -263,13 +258,6 @@
     }
   }
 
-  .group-notification-menu .dropdown-menu {
-    top: 30px;
-    bottom: auto;
-    left: auto;
-    right: 10px;
-  }
-
   .viewing-self & .about.collapsed-info {
     .secondary, .staff-counters {
       display: inherit;

app/assets/stylesheets/mobile/topic-list.scss

@@ -314,12 +314,6 @@ tr.category-topic-link {
 // Misc. stuff
 // --------------------------------------------------
 
-.list-controls {
-  .category-dropdown-button {
-    padding: 4px 10px 4px 8px;
-  }
-}
-
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
@@ -407,7 +401,7 @@ ol.category-breadcrumb {
   .btn-default.pull-right { margin-right: 10px; }
 }
 
-.category-notification-menu, .tags-admin-menu {
+.tags-admin-menu {
   display: none;
 }
 

test/javascripts/acceptance/topic-notification-options-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-notifications";
+  const notificationOptions = "#topic-footer-buttons .topic-notification-options";
 
   andThen(() => {
     assert.ok(