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 caabc304f07..1e5cb057485 100644 --- a/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 +++ b/app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6 @@ -1,7 +1,6 @@ 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-dropdown"], @@ -39,9 +38,12 @@ export default DropdownSelectBoxComponent.extend({ reorder: "reorderCategories" }, - @observes("value") - _didSelectRow() { - this.sendAction(`actionNames.${this.get("value")}`); - this.set("value", null); + actions: { + onSelectRow(content) { + this._super(content); + + this.sendAction(`actionNames.${this.get("value")}`); + this.set("value", null); + } } }); diff --git a/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 index c5f0b51eae4..0595b116fb3 100644 --- a/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 @@ -1,5 +1,4 @@ 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"; @@ -19,8 +18,11 @@ export default NotificationOptionsComponent.extend({ generatedHeadertext: null, - @observes("value") - _notificationLevelChanged() { - this.get("category").setNotification(this.get("value")); - }, + actions: { + onSelectRow(content) { + this._super(content); + + this.get("category").setNotification(this.get("value")); + } + } }); diff --git a/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 index 89b521894c1..3d597f8b56f 100644 --- a/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/group-notifications-button.js.es6 @@ -1,5 +1,4 @@ import NotificationOptionsComponent from "discourse/components/notifications-button"; -import { observes } from "ember-addons/ember-computed-decorators"; export default NotificationOptionsComponent.extend({ classNames: ["group-notifications-button"], @@ -8,8 +7,11 @@ export default NotificationOptionsComponent.extend({ i18nPrefix: "groups.notifications", - @observes("value") - _notificationLevelChanged() { - this.get("group").setNotification(this.get("value"), this.get("user.id")); + actions: { + onSelectRow(content) { + this._super(content); + + this.get("group").setNotification(this.get("value"), this.get("user.id")); + } } }); diff --git a/app/assets/javascripts/discourse/components/pinned-options.js.es6 b/app/assets/javascripts/discourse/components/pinned-options.js.es6 index b9c4dbe7b2b..2daf5bea988 100644 --- a/app/assets/javascripts/discourse/components/pinned-options.js.es6 +++ b/app/assets/javascripts/discourse/components/pinned-options.js.es6 @@ -57,14 +57,17 @@ export default DropdownSelectBoxComponent.extend({ return `${title}${iconHTML("caret-down")}`.htmlSafe(); }, - @observes("value") - _didSelectRow() { - const topic = this.get("topic"); + actions: { + onSelectRow(content) { + this._super(content); - if (this.get("value") === "unpinned") { - topic.clearPin(); - } else { - topic.rePin(); + const topic = this.get("topic"); + + if (this.get("value") === "unpinned") { + topic.clearPin(); + } else { + topic.rePin(); + } } } }); diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6 index 612e21039da..d2e0c25b990 100644 --- a/app/assets/javascripts/discourse/components/select-box.js.es6 +++ b/app/assets/javascripts/discourse/components/select-box.js.es6 @@ -215,10 +215,7 @@ export default Ember.Component.extend({ if (this.get("expanded")) { if ((keyCode === 13 || keyCode === 9) && Ember.isPresent(this.get("highlightedValue"))) { event.preventDefault(); - this.setProperties({ - value: this._castInteger(this.get("highlightedValue")), - expanded: false - }); + this.send("onSelectRow", this.get("highlightedContent")); } if (keyCode === 9) { @@ -301,14 +298,25 @@ export default Ember.Component.extend({ }; }, - @computed("value", "content.[]") - selectedContent(value, content) { + @computed("value", "content.[]", "idKey") + selectedContent(value, content, idKey) { if (Ember.isNone(value)) { return null; } return content.find((c) => { - return this._castInteger(c[this.get("idKey")]) === value; + return this._castInteger(Ember.get(c, idKey)) === value; + }); + }, + + @computed("highlightedValue", "content.[]", "idKey") + highlightedContent(highlightedValue, content, idKey) { + if (Ember.isNone(highlightedValue)) { + return null; + } + + return content.find((c) => { + return this._castInteger(Ember.get(c, idKey)) === highlightedValue; }); }, @@ -366,13 +374,13 @@ export default Ember.Component.extend({ }, onHoverRow(content) { - const id = this._castInteger(content[this.get("idKey")]); + const id = this._castInteger(Ember.get(content, this.get("idKey"))); this.set("highlightedValue", id); }, onSelectRow(content) { this.setProperties({ - value: this._castInteger(content[this.get("idKey")]), + value: this._castInteger(Ember.get(content, this.get("idKey"))), expanded: false }); }, @@ -444,15 +452,15 @@ export default Ember.Component.extend({ if (direction === "down") { if (currentIndex < 0) { - this.set("highlightedValue", this._castInteger(content[0][idKey])); + this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey))); } else if(currentIndex + 1 < content.length) { - this.set("highlightedValue", this._castInteger(content[currentIndex + 1][idKey])); + this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex + 1], idKey))); } } else { if (currentIndex <= 0) { - this.set("highlightedValue", this._castInteger(content[0][idKey])); + this.set("highlightedValue", this._castInteger(Ember.get(content[0], idKey))); } else if(currentIndex - 1 < content.length) { - this.set("highlightedValue", this._castInteger(content[currentIndex - 1][idKey])); + this.set("highlightedValue", this._castInteger(Ember.get(content[currentIndex - 1], idKey))); } } diff --git a/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 index f0dd3a627e7..267c40d3eed 100644 --- a/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/tag-notifications-button.js.es6 @@ -1,5 +1,4 @@ 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"; @@ -8,15 +7,18 @@ export default NotificationOptionsComponent.extend({ i18nPrefix: "tagging.notifications", - @observes("value") - _notificationLevelChanged() { - this.sendAction("action", this.get("value")); - }, - @computed("value") icon() { return `${this._super()}${iconHTML("caret-down")}`.htmlSafe(); }, - generatedHeadertext: null + generatedHeadertext: null, + + actions: { + onSelectRow(content) { + this._super(content); + + this.sendAction("action", this.get("value")); + } + } }); diff --git a/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 index 2fff3be82b6..03b4a175343 100644 --- a/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 +++ b/app/assets/javascripts/discourse/components/topic-notifications-options.js.es6 @@ -1,5 +1,5 @@ import NotificationOptionsComponent from "discourse/components/notifications-button"; -import { observes, on } from "ember-addons/ember-computed-decorators"; +import { on } from "ember-addons/ember-computed-decorators"; import computed from "ember-addons/ember-computed-decorators"; import { topicLevels, buttonDetails } from "discourse/lib/notification-levels"; @@ -7,18 +7,16 @@ export default NotificationOptionsComponent.extend({ classNames: ["topic-notifications-options"], content: topicLevels, + i18nPrefix: "topic.notifications", - @on("init") - _setInitialNotificationLevel() { - this.set("value", this.get("topic.details.notification_level")); - }, + value: Ember.computed.alias("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) { + if (this.get("value") !== msg.id) { this.get("topic.details").updateNotifications(msg.id); } } @@ -30,23 +28,25 @@ export default NotificationOptionsComponent.extend({ this.appEvents.off("topic-notifications-button:changed"); }, - @observes("value") - _notificationLevelChanged() { - this.appEvents.trigger("topic-notifications-button: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) { + @computed("value", "showFullTitle") + generatedHeadertext(value, showFullTitle) { if (showFullTitle) { - const details = buttonDetails(notificationLevel); + const details = buttonDetails(value); return I18n.t(`topic.notifications.${details.key}.title`); } else { return null; } + }, + + actions: { + onSelectRow(content) { + const notificationLevelId = Ember.get(content, this.get("idKey")); + + if (notificationLevelId !== this.get("value")) { + this.get("topic.details").updateNotifications(notificationLevelId); + } + + this._super(content); + } } });