diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-header.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-header.js index 68622e7560a..d957d83358f 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-header.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-header.js @@ -1,3 +1,3 @@ import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header"; -export default ComboBoxSelectBoxHeaderComponent.extend({}); +export default class ChatChannelChooserHeader extends ComboBoxSelectBoxHeaderComponent {} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-row.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-row.js index 50e8d0b3194..6beaa429994 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-row.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-chooser-row.js @@ -1,5 +1,5 @@ +import { classNames } from "@ember-decorators/component"; import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row"; -export default SelectKitRowComponent.extend({ - classNames: ["chat-channel-chooser-row"], -}); +@classNames("chat-channel-chooser-row") +export default class ChatChannelChooserRow extends SelectKitRowComponent {} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js index 793e08b5554..39dcefe5401 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js @@ -1,32 +1,36 @@ import Component from "@ember/component"; import { action } from "@ember/object"; import { service } from "@ember/service"; +import { classNames } from "@ember-decorators/component"; import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin"; import { clipboardHelpers } from "discourse/lib/utilities"; import UppyUploadMixin from "discourse/mixins/uppy-upload"; import { cloneJSON } from "discourse-common/lib/object"; import discourseComputed, { bind } from "discourse-common/utils/decorators"; -export default Component.extend(UppyUploadMixin, { - classNames: ["chat-composer-uploads"], - mediaOptimizationWorker: service(), - chatStateManager: service(), - id: "chat-composer-uploader", - type: "chat-composer", - existingUploads: null, - uploads: null, - useMultipartUploadsIfAvailable: true, - uploadDropZone: null, +@classNames("chat-composer-uploads") +export default class ChatComposerUploads extends Component.extend( + UppyUploadMixin +) { + @service mediaOptimizationWorker; + @service chatStateManager; + + id = "chat-composer-uploader"; + type = "chat-composer"; + existingUploads = null; + uploads = null; + useMultipartUploadsIfAvailable = true; + uploadDropZone = null; init() { - this._super(...arguments); + super.init(...arguments); this.setProperties({ fileInputSelector: `#${this.fileUploadElementId}`, }); - }, + } didReceiveAttrs() { - this._super(...arguments); + super.didReceiveAttrs(...arguments); if (this.inProgressUploads?.length > 0) { this._uppyInstance?.cancelAll(); } @@ -35,32 +39,32 @@ export default Component.extend(UppyUploadMixin, { "uploads", this.existingUploads ? cloneJSON(this.existingUploads) : [] ); - }, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.composerInputEl?.addEventListener("paste", this._pasteEventListener); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); this.composerInputEl?.removeEventListener( "paste", this._pasteEventListener ); - }, + } uploadDone(upload) { this.uploads.pushObject(upload); this._triggerUploadsChanged(); - }, + } @discourseComputed("uploads.length", "inProgressUploads.length") showUploadsContainer(uploadsCount, inProgressUploadsCount) { return uploadsCount > 0 || inProgressUploadsCount > 0; - }, + } @action cancelUploading(upload) { @@ -68,19 +72,19 @@ export default Component.extend(UppyUploadMixin, { fileId: upload.id, }); this.removeUpload(upload); - }, + } @action removeUpload(upload) { this.uploads.removeObject(upload); this._triggerUploadsChanged(); - }, + } _uploadDropTargetOptions() { return { target: this.uploadDropZone || document.body, }; - }, + } _uppyReady() { if (this.siteSettings.composer_media_optimization_image_enabled) { @@ -102,7 +106,7 @@ export default Component.extend(UppyUploadMixin, { const inProgressUpload = this.inProgressUploads.findBy("id", file.id); inProgressUpload?.set("processing", false); }); - }, + } @bind _pasteEventListener(event) { @@ -122,17 +126,17 @@ export default Component.extend(UppyUploadMixin, { if (event && event.clipboardData && event.clipboardData.files) { this._addFiles([...event.clipboardData.files], { pasted: true }); } - }, + } onProgressUploadsChanged() { this._triggerUploadsChanged(this.uploads, { inProgressUploadsCount: this.inProgressUploads?.length, }); - }, + } _triggerUploadsChanged() { this.onUploadChanged?.(this.uploads, { inProgressUploadsCount: this.inProgressUploads?.length, }); - }, -}); + } +} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js index c69d98551f6..000a68ff37b 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js @@ -3,27 +3,30 @@ import { action } from "@ember/object"; import { cancel, next, throttle } from "@ember/runloop"; import { service } from "@ember/service"; import { htmlSafe } from "@ember/template"; +import { tagName } from "@ember-decorators/component"; +import { observes } from "@ember-decorators/object"; import DiscourseURL from "discourse/lib/url"; import { escapeExpression } from "discourse/lib/utilities"; import getURL from "discourse-common/lib/get-url"; -import { bind, observes } from "discourse-common/utils/decorators"; +import { bind } from "discourse-common/utils/decorators"; -export default Component.extend({ - tagName: "", - chat: service(), - router: service(), - chatDrawerSize: service(), - chatChannelsManager: service(), - chatStateManager: service(), - chatDrawerRouter: service(), - loading: false, - sizeTimer: null, - rafTimer: null, - hasUnreadMessages: false, - drawerStyle: null, +@tagName("") +export default class ChatDrawer extends Component { + @service chat; + @service router; + @service chatDrawerSize; + @service chatChannelsManager; + @service chatStateManager; + @service chatDrawerRouter; + + loading = false; + sizeTimer = null; + rafTimer = null; + hasUnreadMessages = false; + drawerStyle = null; didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); if (!this.chat.userCanChat) { return; @@ -45,10 +48,10 @@ export default Component.extend({ this.appEvents.on("composer:resize-ended", this, "_clearDynamicCheckSize"); this.computeDrawerStyle(); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); if (!this.chat.userCanChat) { return; @@ -81,19 +84,19 @@ export default Component.extend({ if (this.rafTimer) { window.cancelAnimationFrame(this.rafTimer); } - }, + } @observes("chatStateManager.isDrawerActive") _fireHiddenAppEvents() { this.appEvents.trigger("chat:rerender-header"); - }, + } computeDrawerStyle() { const { width, height } = this.chatDrawerSize.size; let style = `width: ${escapeExpression((width || "0").toString())}px;`; style += `height: ${escapeExpression((height || "0").toString())}px;`; this.set("drawerStyle", htmlSafe(style)); - }, + } get drawerActions() { return { @@ -101,7 +104,7 @@ export default Component.extend({ close: this.close, toggleExpand: this.toggleExpand, }; - }, + } @bind _dynamicCheckSize() { @@ -117,7 +120,7 @@ export default Component.extend({ this.rafTimer = null; this._performCheckSize(); }); - }, + } _startDynamicCheckSize() { if (!this.chatStateManager.isDrawerActive) { @@ -127,7 +130,7 @@ export default Component.extend({ document .querySelector(".chat-drawer-outlet-container") .classList.add("clear-transitions"); - }, + } _clearDynamicCheckSize() { if (!this.chatStateManager.isDrawerActive) { @@ -138,12 +141,12 @@ export default Component.extend({ .querySelector(".chat-drawer-outlet-container") .classList.remove("clear-transitions"); this._checkSize(); - }, + } @bind _checkSize() { this.sizeTimer = throttle(this, this._performCheckSize, 150); - }, + } _performCheckSize() { if (this.isDestroying || this.isDestroyed) { @@ -167,14 +170,14 @@ export default Component.extend({ ? minRightMargin : Math.max(minRightMargin, composer.offsetLeft)) + "px" ); - }, + } @action openURL(url = null) { this.chat.activeChannel = null; this.chatDrawerRouter.stateFor(this._routeFromURL(url)); this.chatStateManager.didOpenDrawer(url); - }, + } _routeFromURL(url) { let route = this.router.recognize(getURL(url || "/")); @@ -185,7 +188,7 @@ export default Component.extend({ } return route; - }, + } @action async openInFullPage() { @@ -196,7 +199,7 @@ export default Component.extend({ await new Promise((resolve) => next(resolve)); return DiscourseURL.routeTo(this.chatStateManager.lastKnownChatURL); - }, + } @action toggleExpand() { @@ -206,17 +209,17 @@ export default Component.extend({ "chat:toggle-expand", this.chatStateManager.isDrawerExpanded ); - }, + } @action close() { this.computeDrawerStyle(); this.chatStateManager.didCloseDrawer(); this.chat.activeChannel = null; - }, + } @action didResize(element, { width, height }) { this.chatDrawerSize.size = { width, height }; - }, -}); + } +} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.js b/plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.js index 31450169a0e..233b3bfb652 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-to-topic-selector.js @@ -7,38 +7,37 @@ export const NEW_TOPIC_SELECTION = "new_topic"; export const EXISTING_TOPIC_SELECTION = "existing_topic"; export const NEW_MESSAGE_SELECTION = "new_message"; -export default Component.extend({ - newTopicSelection: NEW_TOPIC_SELECTION, - existingTopicSelection: EXISTING_TOPIC_SELECTION, - newMessageSelection: NEW_MESSAGE_SELECTION, +export default class ChatToTopicSelector extends Component { + newTopicSelection = NEW_TOPIC_SELECTION; + existingTopicSelection = EXISTING_TOPIC_SELECTION; + newMessageSelection = NEW_MESSAGE_SELECTION; + selection = null; - selection: null, - newTopic: equal("selection", NEW_TOPIC_SELECTION), - existingTopic: equal("selection", EXISTING_TOPIC_SELECTION), - newMessage: equal("selection", NEW_MESSAGE_SELECTION), - canAddTags: alias("site.can_create_tag"), - canTagMessages: alias("site.can_tag_pms"), + @equal("selection", NEW_TOPIC_SELECTION) newTopic; + @equal("selection", EXISTING_TOPIC_SELECTION) existingTopic; + @equal("selection", NEW_MESSAGE_SELECTION) newMessage; + @alias("site.can_create_tag") canAddTags; + @alias("site.can_tag_pms") canTagMessages; - topicTitle: null, - categoryId: null, - tags: null, - selectedTopicId: null, - - chatMessageIds: null, - chatChannelId: null, + topicTitle = null; + categoryId = null; + tags = null; + selectedTopicId = null; + chatMessageIds = null; + chatChannelId = null; @discourseComputed() newTopicInstruction() { return htmlSafe(this.instructionLabels[NEW_TOPIC_SELECTION]); - }, + } @discourseComputed() existingTopicInstruction() { return htmlSafe(this.instructionLabels[EXISTING_TOPIC_SELECTION]); - }, + } @discourseComputed() newMessageInstruction() { return htmlSafe(this.instructionLabels[NEW_MESSAGE_SELECTION]); - }, -}); + } +} diff --git a/plugins/chat/assets/javascripts/discourse/components/collapser.js b/plugins/chat/assets/javascripts/discourse/components/collapser.js index db6a355a6a1..2f32be5d677 100644 --- a/plugins/chat/assets/javascripts/discourse/components/collapser.js +++ b/plugins/chat/assets/javascripts/discourse/components/collapser.js @@ -1,22 +1,22 @@ import Component from "@ember/component"; import { action } from "@ember/object"; +import { tagName } from "@ember-decorators/component"; -export default Component.extend({ - tagName: "", - - collapsed: false, - header: null, - onToggle: null, +@tagName("") +export default class Collapser extends Component { + collapsed = false; + header = null; + onToggle = null; @action open() { this.set("collapsed", false); this.onToggle?.(false); - }, + } @action close() { this.set("collapsed", true); this.onToggle?.(true); - }, -}); + } +} diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js index fd41f9138ff..ce2c6ea7e93 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js +++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js @@ -2,37 +2,38 @@ import Component from "@ember/component"; import EmberObject, { action } from "@ember/object"; import { notEmpty } from "@ember/object/computed"; import { schedule } from "@ember/runloop"; +import { observes } from "@ember-decorators/object"; import { propertyNotEqual } from "discourse/lib/computed"; import { applyLocalDates } from "discourse/lib/local-dates"; import { cook } from "discourse/lib/text"; import { INPUT_DELAY } from "discourse-common/config/environment"; -import computed, { - debounce, - observes, -} from "discourse-common/utils/decorators"; +import computed, { debounce } from "discourse-common/utils/decorators"; import I18n from "discourse-i18n"; import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator"; -export default Component.extend({ - timeFormat: "HH:mm:ss", - dateFormat: "YYYY-MM-DD", - dateTimeFormat: "YYYY-MM-DD HH:mm:ss", - date: null, - toDate: null, - time: null, - toTime: null, - format: null, - formats: null, - recurring: null, - advancedMode: false, - timezone: null, - fromSelected: null, - fromFilled: notEmpty("date"), - toSelected: null, - toFilled: notEmpty("toDate"), +export default class LocalDatesCreate extends Component { + timeFormat = "HH:mm:ss"; + dateFormat = "YYYY-MM-DD"; + dateTimeFormat = "YYYY-MM-DD HH:mm:ss"; + date = null; + toDate = null; + time = null; + toTime = null; + format = null; + formats = null; + recurring = null; + advancedMode = false; + timezone = null; + fromSelected = null; + toSelected = null; + + @notEmpty("date") fromFilled; + @notEmpty("toDate") toFilled; + @propertyNotEqual("currentUserTimezone", "options.timezone") + timezoneIsDifferentFromUserTimezone; init() { - this._super(...arguments); + super.init(...arguments); this._picker = null; @@ -44,17 +45,17 @@ export default Component.extend({ timezone: this.currentUserTimezone, date: moment().format(this.dateFormat), }); - }, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.send("focusFrom"); - }, + } @observes("computedConfig.{from,to,options}", "options", "isValid", "isRange") configChanged() { this._renderPreview(); - }, + } @debounce(INPUT_DELAY) async _renderPreview() { @@ -69,12 +70,12 @@ export default Component.extend({ ); }); } - }, + } @computed("date", "toDate", "toTime") isRange(date, toDate, toTime) { return date && (toDate || toTime); - }, + } @computed("computedConfig", "isRange") isValid(config, isRange) { @@ -96,7 +97,7 @@ export default Component.extend({ } return true; - }, + } @computed("date", "time", "isRange", "options.{format,timezone}") fromConfig(date, time, isRange, options = {}) { @@ -125,7 +126,7 @@ export default Component.extend({ format, range: isRange ? "start" : false, }); - }, + } @computed("toDate", "toTime", "isRange", "options.{timezone,format}") toConfig(date, time, isRange, options = {}) { @@ -158,7 +159,7 @@ export default Component.extend({ format, range: isRange ? "end" : false, }); - }, + } @computed("recurring", "timezones", "timezone", "format") options(recurring, timezones, timezone, format) { @@ -168,7 +169,7 @@ export default Component.extend({ timezone, format, }); - }, + } @computed( "fromConfig.{date}", @@ -181,27 +182,22 @@ export default Component.extend({ to: toConfig, options, }); - }, + } @computed currentUserTimezone() { return this.currentUser.user_option.timezone || moment.tz.guess(); - }, + } @computed allTimezones() { return moment.tz.names(); - }, - - timezoneIsDifferentFromUserTimezone: propertyNotEqual( - "currentUserTimezone", - "options.timezone" - ), + } @computed("currentUserTimezone") formattedCurrentUserTimezone(timezone) { return timezone.replace("_", " ").replace("Etc/", "").replace("/", ", "); - }, + } @computed("formats") previewedFormats(formats) { @@ -211,7 +207,7 @@ export default Component.extend({ preview: moment().format(format), }; }); - }, + } @computed recurringOptions() { @@ -251,18 +247,18 @@ export default Component.extend({ id: "1.years", }, ]; - }, + } _generateDateMarkup(fromDateTime, options, isRange, toDateTime) { return generateDateMarkup(fromDateTime, options, isRange, toDateTime); - }, + } @computed("advancedMode") toggleModeBtnLabel(advancedMode) { return advancedMode ? "discourse_local_dates.create.form.simple_mode" : "discourse_local_dates.create.form.advanced_mode"; - }, + } @computed("computedConfig.{from,to,options}", "options", "isValid", "isRange") markup(config, options, isValid, isRange) { @@ -281,12 +277,12 @@ export default Component.extend({ } } return text; - }, + } @computed("fromConfig.dateTime") formattedFrom(dateTime) { return dateTime.format("LLLL"); - }, + } @computed("toConfig.dateTime", "toSelected") formattedTo(dateTime, toSelected) { @@ -295,23 +291,23 @@ export default Component.extend({ : I18n.t("discourse_local_dates.create.form.until"); return dateTime.isValid() ? dateTime.format("LLLL") : emptyText; - }, + } @action updateFormat(format, event) { event?.preventDefault(); this.set("format", format); - }, + } @computed("fromSelected", "toSelected") selectedDate(fromSelected) { return fromSelected ? this.date : this.toDate; - }, + } @computed("fromSelected", "toSelected") selectedTime(fromSelected) { return fromSelected ? this.time : this.toTime; - }, + } @action changeSelectedDate(date) { @@ -320,7 +316,7 @@ export default Component.extend({ } else { this.set("toDate", date); } - }, + } @action changeSelectedTime(time) { @@ -329,7 +325,7 @@ export default Component.extend({ } else { this.set("toTime", time); } - }, + } @action eraseToDateTime() { @@ -338,7 +334,7 @@ export default Component.extend({ toTime: null, }); this.focusFrom(); - }, + } @action focusFrom() { @@ -347,7 +343,7 @@ export default Component.extend({ toSelected: false, minDate: null, }); - }, + } @action focusTo() { @@ -356,12 +352,12 @@ export default Component.extend({ fromSelected: false, minDate: this.get("fromConfig.date"), }); - }, + } @action toggleAdvancedMode() { this.toggleProperty("advancedMode"); - }, + } @action save() { @@ -371,10 +367,10 @@ export default Component.extend({ this.closeModal(); this.model.insertDate(markup); } - }, + } @action cancel() { this.closeModal(); - }, -}); + } +} diff --git a/plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js b/plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js index 3fdd3297109..81ec9c191c7 100644 --- a/plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js +++ b/plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js @@ -1,15 +1,21 @@ import Component from "@ember/component"; import { equal, gt, readOnly, union } from "@ember/object/computed"; import { service } from "@ember/service"; -import discourseComputed, { - observes, - on, -} from "discourse-common/utils/decorators"; +import { tagName } from "@ember-decorators/component"; +import { observes, on } from "@ember-decorators/object"; +import discourseComputed from "discourse-common/utils/decorators"; -export default Component.extend({ - tagName: "", - presence: service(), - composerPresenceManager: service(), +@tagName("") +export default class ComposerPresenceDisplay extends Component { + @service presence; + @service composerPresenceManager; + + @equal("state", "reply") isReply; + @equal("state", "edit") isEdit; + @equal("state", "whisper") isWhisper; + @union("replyChannel.users", "whisperChannel.users") replyingUsers; + @readOnly("editChannel.users") editingUsers; + @gt("presenceUsers.length", 0) shouldDisplay; @discourseComputed( "model.replyingToTopic", @@ -27,32 +33,28 @@ export default Component.extend({ } else if (replyingToTopic) { return "reply"; } - }, - - isReply: equal("state", "reply"), - isEdit: equal("state", "edit"), - isWhisper: equal("state", "whisper"), + } @discourseComputed("model.topic.id", "isReply", "isWhisper") replyChannelName(topicId, isReply, isWhisper) { if (topicId && (isReply || isWhisper)) { return `/discourse-presence/reply/${topicId}`; } - }, + } @discourseComputed("model.topic.id", "isReply", "isWhisper") whisperChannelName(topicId, isReply, isWhisper) { if (topicId && this.currentUser.whisperer && (isReply || isWhisper)) { return `/discourse-presence/whisper/${topicId}`; } - }, + } @discourseComputed("isEdit", "model.post.id") editChannelName(isEdit, postId) { if (isEdit) { return `/discourse-presence/edit/${postId}`; } - }, + } _setupChannel(channelKey, name) { if (this[channelKey]?.name !== name) { @@ -64,23 +66,20 @@ export default Component.extend({ this.set(channelKey, null); } } - }, + } @observes("replyChannelName", "whisperChannelName", "editChannelName") _setupChannels() { this._setupChannel("replyChannel", this.replyChannelName); this._setupChannel("whisperChannel", this.whisperChannelName); this._setupChannel("editChannel", this.editChannelName); - }, + } _cleanupChannels() { this._setupChannel("replyChannel", null); this._setupChannel("whisperChannel", null); this._setupChannel("editChannel", null); - }, - - replyingUsers: union("replyChannel.users", "whisperChannel.users"), - editingUsers: readOnly("editChannel.users"), + } @discourseComputed("isReply", "replyingUsers.[]", "editingUsers.[]") presenceUsers(isReply, replyingUsers, editingUsers) { @@ -88,14 +87,12 @@ export default Component.extend({ return users ?.filter((u) => u.id !== this.currentUser.id) ?.slice(0, this.siteSettings.presence_max_users_shown); - }, - - shouldDisplay: gt("presenceUsers.length", 0), + } @on("didInsertElement") subscribe() { this._setupChannels(); - }, + } @observes("model.reply", "state", "model.post.id", "model.topic.id") _contentChanged() { @@ -104,11 +101,11 @@ export default Component.extend({ } const entity = this.state === "edit" ? this.model?.post : this.model?.topic; this.composerPresenceManager.notifyState(this.state, entity?.id); - }, + } @on("willDestroyElement") closeComposer() { this._cleanupChannels(); this.composerPresenceManager.leave(); - }, -}); + } +} diff --git a/plugins/discourse-presence/assets/javascripts/discourse/components/topic-presence-display.js b/plugins/discourse-presence/assets/javascripts/discourse/components/topic-presence-display.js index a851025de66..4cd60b1674f 100644 --- a/plugins/discourse-presence/assets/javascripts/discourse/components/topic-presence-display.js +++ b/plugins/discourse-presence/assets/javascripts/discourse/components/topic-presence-display.js @@ -1,40 +1,41 @@ import Component from "@ember/component"; import { gt, union } from "@ember/object/computed"; import { service } from "@ember/service"; -import discourseComputed, { on } from "discourse-common/utils/decorators"; +import { on } from "@ember-decorators/object"; +import discourseComputed from "discourse-common/utils/decorators"; -export default Component.extend({ - topic: null, - presence: service(), - replyChannel: null, - whisperChannel: null, +export default class TopicPresenceDisplay extends Component { + @service presence; + + topic = null; + replyChannel = null; + whisperChannel = null; + + @union("replyUsers", "whisperUsers") users; + @gt("users.length", 0) shouldDisplay; @discourseComputed("replyChannel.users.[]") replyUsers(users) { return users?.filter((u) => u.id !== this.currentUser.id); - }, + } @discourseComputed("whisperChannel.users.[]") whisperUsers(users) { return users?.filter((u) => u.id !== this.currentUser.id); - }, - - users: union("replyUsers", "whisperUsers"), + } @discourseComputed("topic.id") replyChannelName(id) { return `/discourse-presence/reply/${id}`; - }, + } @discourseComputed("topic.id") whisperChannelName(id) { return `/discourse-presence/whisper/${id}`; - }, - - shouldDisplay: gt("users.length", 0), + } didReceiveAttrs() { - this._super(...arguments); + super.didReceiveAttrs(...arguments); if (this.replyChannel?.name !== this.replyChannelName) { this.replyChannel?.unsubscribe(); @@ -53,11 +54,11 @@ export default Component.extend({ ); this.whisperChannel.subscribe(); } - }, + } @on("willDestroyElement") _destroyed() { this.replyChannel?.unsubscribe(); this.whisperChannel?.unsubscribe(); - }, -}); + } +} diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js index c666ac0b689..7b933ffed81 100644 --- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js +++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js @@ -1,17 +1,18 @@ import Component from "@ember/component"; +import { classNames, tagName } from "@ember-decorators/component"; import { REPLACEMENTS } from "discourse-common/lib/icon-library"; import discourseLater from "discourse-common/lib/later"; import { afterRender } from "discourse-common/utils/decorators"; -export default Component.extend({ - tagName: "section", - classNames: ["styleguide-icons"], - iconIds: [], +@tagName("section") +@classNames("styleguide-icons") +export default class StyleguideIcons extends Component { + iconIds = []; init() { - this._super(...arguments); + super.init(...arguments); this.setIconIds(); - }, + } @afterRender setIconIds() { @@ -24,5 +25,5 @@ export default Component.extend({ // Let's try again a short time later if there are no svgs loaded yet discourseLater(this, this.setIconIds, 1500); } - }, -}); + } +} diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js index b8e1b95be77..1cc92be9c16 100644 --- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js +++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js @@ -2,11 +2,11 @@ import Component from "@ember/component"; import $ from "jquery"; import { cook } from "discourse/lib/text"; -export default Component.extend({ +export default class StyleguideMarkdown extends Component { didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); const contents = $(this.element).html(); cook(contents).then((cooked) => $(this.element).html(cooked.toString())); - }, -}); + } +} diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js index 3ea7e2272bf..b31ddcbd9ba 100644 --- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js +++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js @@ -1,19 +1,19 @@ import Component from "@ember/component"; +import { classNameBindings, tagName } from "@ember-decorators/component"; import computed from "discourse-common/utils/decorators"; -export default Component.extend({ - tagName: "section", - classNameBindings: [":styleguide-section", "sectionClass"], - +@tagName("section") +@classNameBindings(":styleguide-section", "sectionClass") +export default class StyleguideSection extends Component { didReceiveAttrs() { - this._super(...arguments); + super.didReceiveAttrs(...arguments); window.scrollTo(0, 0); - }, + } @computed("section") sectionClass(section) { if (section) { return `${section.id}-examples`; } - }, -}); + } +}