diff --git a/app/assets/javascripts/admin/templates/group.hbs b/app/assets/javascripts/admin/templates/group.hbs index dc0638ed50..03be28e034 100644 --- a/app/assets/javascripts/admin/templates/group.hbs +++ b/app/assets/javascripts/admin/templates/group.hbs @@ -122,7 +122,7 @@
- {{notification-options i18nPrefix='groups.notifications' value=model.default_notification_level}} + {{notifications-button i18nPrefix='groups.notifications' value=model.default_notification_level}}
diff --git a/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 b/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 index efe049463e..588f440225 100644 --- a/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 +++ b/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(), diff --git a/app/assets/javascripts/discourse/components/category-notification-options.js.es6 b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 similarity index 83% rename from app/assets/javascripts/discourse/components/category-notification-options.js.es6 rename to app/assets/javascripts/discourse/components/category-notifications-button.js.es6 index 132b119e0f..528eeab0dc 100644 --- a/app/assets/javascripts/discourse/components/category-notification-options.js.es6 +++ b/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"), diff --git a/app/assets/javascripts/discourse/components/group-notification-options.js.es6 b/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 similarity index 86% rename from app/assets/javascripts/discourse/components/group-notification-options.js.es6 rename to app/assets/javascripts/discourse/components/group-notifications-button.js.es6 index cf5283394e..89b521894c 100644 --- a/app/assets/javascripts/discourse/components/group-notification-options.js.es6 +++ b/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"), diff --git a/app/assets/javascripts/discourse/components/notification-options.js.es6 b/app/assets/javascripts/discourse/components/notifications-button.js.es6 similarity index 94% rename from app/assets/javascripts/discourse/components/notification-options.js.es6 rename to app/assets/javascripts/discourse/components/notifications-button.js.es6 index 48035b51fd..33f848d8d4 100644 --- a/app/assets/javascripts/discourse/components/notification-options.js.es6 +++ b/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); diff --git a/app/assets/javascripts/discourse/components/tag-notification-options.js.es6 b/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 similarity index 90% rename from app/assets/javascripts/discourse/components/tag-notification-options.js.es6 rename to app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 index d249a21771..f0dd3a627e 100644 --- a/app/assets/javascripts/discourse/components/tag-notification-options.js.es6 +++ b/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", diff --git a/app/assets/javascripts/discourse/components/topic-notification-options-button.js.es6 b/app/assets/javascripts/discourse/components/topic-notification-options-button.js.es6 deleted file mode 100644 index 415541598c..0000000000 --- a/app/assets/javascripts/discourse/components/topic-notification-options-button.js.es6 +++ /dev/null @@ -1,9 +0,0 @@ -export default Ember.Component.extend({ - layoutName: "components/topic-notification-options-button", - - classNames: ["topic-notification-options-button"], - - showFullTitle: true, - - appendReason: true, -}); diff --git a/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 new file mode 100644 index 0000000000..c174495ba7 --- /dev/null +++ b/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, +}); diff --git a/app/assets/javascripts/discourse/components/topic-notification-options.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 similarity index 81% rename from app/assets/javascripts/discourse/components/topic-notification-options.js.es6 rename to app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 index 7e7b9df1b7..2fff3be82b 100644 --- a/app/assets/javascripts/discourse/components/topic-notification-options.js.es6 +++ b/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") diff --git a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6 b/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6 index afaba557a5..6ae50d0475 100644 --- a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6 +++ b/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) { diff --git a/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs index 0a79b6f2e1..a4dcf9987a 100644 --- a/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs +++ b/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs @@ -77,7 +77,7 @@ {{pinned-button topic=topic}} -{{topic-notification-options-button topic=topic}} +{{topic-notifications-button topic=topic}} {{plugin-outlet name="after-topic-footer-buttons" args=(hash topic=topic) diff --git a/app/assets/javascripts/discourse/templates/components/topic-notification-options-button.hbs b/app/assets/javascripts/discourse/templates/components/topic-notifications-button.hbs similarity index 59% rename from app/assets/javascripts/discourse/templates/components/topic-notification-options-button.hbs rename to app/assets/javascripts/discourse/templates/components/topic-notifications-button.hbs index bf56ba9a3d..17d9953055 100644 --- a/app/assets/javascripts/discourse/templates/components/topic-notification-options-button.hbs +++ b/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}}

diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs index 3b835ebd3f..8f1ab92d9b 100644 --- a/app/assets/javascripts/discourse/templates/navigation/category.hbs +++ b/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 diff --git a/app/assets/javascripts/discourse/templates/tags/show.hbs b/app/assets/javascripts/discourse/templates/tags/show.hbs index ac02368c7f..4ef67d0f26 100644 --- a/app/assets/javascripts/discourse/templates/tags/show.hbs +++ b/app/assets/javascripts/discourse/templates/tags/show.hbs @@ -6,8 +6,8 @@

{{#if tagNotification}} {{#unless additionalTags}} - {{tag-notification-options action="changeTagNotification" - value=tagNotification.notification_level}} + {{tag-notifications-button action="changeTagNotification" + notificationLevel=tagNotification.notification_level}} {{/unless}} {{/if}} diff --git a/app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs b/app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs index bc88159428..54947fbdaa 100644 --- a/app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs +++ b/app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs @@ -8,6 +8,6 @@ {{i18n "topic.unsubscribe.change_notification_state"}}

- {{topic-notification-options-button topic=model}} + {{topic-notifications-button topic=model}}
diff --git a/app/assets/javascripts/discourse/templates/user/messages.hbs b/app/assets/javascripts/discourse/templates/user/messages.hbs index 743963b18c..3e19ee722a 100644 --- a/app/assets/javascripts/discourse/templates/user/messages.hbs +++ b/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}} diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 index 278a316a09..2fb698a38c 100644 --- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 +++ b/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, diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index c5b1b5750c..f9f84603c9 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/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; + } } } diff --git a/app/assets/stylesheets/common/base/notification-options.scss b/app/assets/stylesheets/common/base/notifications-button.scss similarity index 100% rename from app/assets/stylesheets/common/base/notification-options.scss rename to app/assets/stylesheets/common/base/notifications-button.scss diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index c4d1a7a0e3..f4050b46a6 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/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; diff --git a/app/assets/stylesheets/common/components/categories-admin-actions.scss b/app/assets/stylesheets/common/components/categories-admin-actions.scss deleted file mode 100644 index 1578b5dd27..0000000000 --- a/app/assets/stylesheets/common/components/categories-admin-actions.scss +++ /dev/null @@ -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%)); - } -} diff --git a/app/assets/stylesheets/common/components/categories-admin-dropdown.scss b/app/assets/stylesheets/common/components/categories-admin-dropdown.scss new file mode 100644 index 0000000000..043f7eac54 --- /dev/null +++ b/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%)); + } + } +} diff --git a/app/assets/stylesheets/common/components/category-notification-options.scss b/app/assets/stylesheets/common/components/category-notification-options.scss deleted file mode 100644 index daae99c5aa..0000000000 --- a/app/assets/stylesheets/common/components/category-notification-options.scss +++ /dev/null @@ -1,3 +0,0 @@ -.category-notification-options.category-notification-options.is-hidden { - display: none; -} diff --git a/app/assets/stylesheets/common/components/category-notifications-button.scss b/app/assets/stylesheets/common/components/category-notifications-button.scss new file mode 100644 index 0000000000..61a0bd3ef6 --- /dev/null +++ b/app/assets/stylesheets/common/components/category-notifications-button.scss @@ -0,0 +1,3 @@ +.category-notification-button.category-notification-button.is-hidden { + display: none; +} diff --git a/app/assets/stylesheets/common/components/notification-options.scss b/app/assets/stylesheets/common/components/notifications-button.scss similarity index 69% rename from app/assets/stylesheets/common/components/notification-options.scss rename to app/assets/stylesheets/common/components/notifications-button.scss index 639a8a79eb..df613a7a04 100644 --- a/app/assets/stylesheets/common/components/notification-options.scss +++ b/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; diff --git a/app/assets/stylesheets/common/components/topic-notification-options-button.scss b/app/assets/stylesheets/common/components/topic-notifications-button.scss similarity index 64% rename from app/assets/stylesheets/common/components/topic-notification-options-button.scss rename to app/assets/stylesheets/common/components/topic-notifications-button.scss index e1a3b31797..c264fe0013 100644 --- a/app/assets/stylesheets/common/components/topic-notification-options-button.scss +++ b/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; } } diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index b0526c878a..cc7bc92f3b 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/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; } diff --git a/test/javascripts/acceptance/topic-notification-options-button-test.js.es6 b/test/javascripts/acceptance/topic-notifications-button-test.js.es6 similarity index 93% rename from test/javascripts/acceptance/topic-notification-options-button-test.js.es6 rename to test/javascripts/acceptance/topic-notifications-button-test.js.es6 index ed1a13f1bc..83e07f56f3 100644 --- a/test/javascripts/acceptance/topic-notification-options-button-test.js.es6 +++ b/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' // ); });