diff --git a/app/assets/javascripts/discourse/components/suggested-topics.js.es6 b/app/assets/javascripts/discourse/components/suggested-topics.js.es6
new file mode 100644
index 00000000000..87ffd1865b6
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/suggested-topics.js.es6
@@ -0,0 +1,53 @@
+import computed from 'ember-addons/ember-computed-decorators';
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
+import { iconHTML } from 'discourse-common/lib/icon-library';
+
+export default Ember.Component.extend({
+ elementId: 'suggested-topics',
+
+ @computed('topic')
+ suggestedTitle(topic) {
+ return topic.get('isPrivateMessage') ?
+ `${iconHTML('envelope', { class: 'private-message-glyph' })} ${I18n.t("suggested_topics.pm_title")}` :
+ I18n.t("suggested_topics.title");
+ },
+
+ @computed('topic', 'topicTrackingState.messageCount')
+ browseMoreMessage(topic) {
+ // TODO decide what to show for pms
+ if (topic.get('isPrivateMessage')) { return; }
+
+ const opts = { latestLink: `${I18n.t("topic.view_latest_topics")}` };
+ let category = topic.get('category');
+
+ if (category && Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id")) {
+ category = null;
+ }
+
+ if (category) {
+ opts.catLink = categoryBadgeHTML(category);
+ } else {
+ opts.catLink = "" + I18n.t("topic.browse_all_categories") + "";
+ }
+
+ const unreadTopics = this.topicTrackingState.countUnread();
+ const newTopics = this.topicTrackingState.countNew();
+
+ if (newTopics + unreadTopics > 0) {
+ const hasBoth = unreadTopics > 0 && newTopics > 0;
+
+ return I18n.messageFormat("topic.read_more_MF", {
+ "BOTH": hasBoth,
+ "UNREAD": unreadTopics,
+ "NEW": newTopics,
+ "CATEGORY": category ? true : false,
+ latestLink: opts.latestLink,
+ catLink: opts.catLink
+ });
+ } else if (category) {
+ return I18n.t("topic.read_more_in_category", opts);
+ } else {
+ return I18n.t("topic.read_more", opts);
+ }
+ },
+});
diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index 929a3048f6e..79d10418bbe 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -1,4 +1,3 @@
-import { iconHTML } from 'discourse-common/lib/icon-library';
import BufferedContent from 'discourse/mixins/buffered-content';
import SelectedPostsCount from 'discourse/mixins/selected-posts-count';
import { spinnerHTML } from 'discourse/helpers/loading-spinner';
@@ -8,7 +7,6 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
import computed from 'ember-addons/ember-computed-decorators';
import Composer from 'discourse/models/composer';
import DiscourseURL from 'discourse/lib/url';
-import { categoryBadgeHTML } from 'discourse/helpers/category-link';
import Post from 'discourse/models/post';
import debounce from 'discourse/lib/debounce';
import isElementInViewport from "discourse/lib/is-element-in-viewport";
@@ -66,58 +64,12 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
return this.capabilities.isAndroid && loading;
},
- @computed('model', 'topicTrackingState.messageCount')
- browseMoreMessage(model) {
-
- // TODO decide what to show for pms
- if (model.get('isPrivateMessage')) { return; }
-
- const opts = { latestLink: `${I18n.t("topic.view_latest_topics")}` };
- let category = model.get('category');
-
- if (category && Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id")) {
- category = null;
- }
-
- if (category) {
- opts.catLink = categoryBadgeHTML(category);
- } else {
- opts.catLink = "" + I18n.t("topic.browse_all_categories") + "";
- }
-
- const unreadTopics = this.topicTrackingState.countUnread();
- const newTopics = this.topicTrackingState.countNew();
-
- if (newTopics + unreadTopics > 0) {
- const hasBoth = unreadTopics > 0 && newTopics > 0;
-
- return I18n.messageFormat("topic.read_more_MF", {
- "BOTH": hasBoth,
- "UNREAD": unreadTopics,
- "NEW": newTopics,
- "CATEGORY": category ? true : false,
- latestLink: opts.latestLink,
- catLink: opts.catLink
- });
- } else if (category) {
- return I18n.t("topic.read_more_in_category", opts);
- } else {
- return I18n.t("topic.read_more", opts);
- }
- },
@computed('model')
pmPath(model) {
return this.currentUser && this.currentUser.pmPath(model);
},
- @computed('model')
- suggestedTitle(model) {
- return model.get('isPrivateMessage') ?
- `${iconHTML('envelope', { class: 'private-message-glyph' })} ${I18n.t("suggested_topics.pm_title")}` :
- I18n.t("suggested_topics.title");
- },
-
init() {
this._super();
this.set('selectedPosts', []);
diff --git a/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs b/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs
new file mode 100644
index 00000000000..1365f78d05e
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs
@@ -0,0 +1,12 @@
+{{{suggestedTitle}}}
+
+ {{#if topic.isPrivateMessage}}
+ {{basic-topic-list
+ hideCategory="true"
+ showPosters="true"
+ topics=topic.details.suggested_topics}}
+ {{else}}
+ {{basic-topic-list topics=topic.details.suggested_topics}}
+ {{/if}}
+
+{{{browseMoreMessage}}}
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index db748edd814..bbf86d6bf1b 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -246,21 +246,8 @@
{{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
{{#if model.details.suggested_topics.length}}
-
-
{{{suggestedTitle}}}
-
- {{#if model.isPrivateMessage}}
- {{basic-topic-list hideCategory="true"
- showPosters="true"
- topics=model.details.suggested_topics}}
- {{else}}
- {{basic-topic-list topics=model.details.suggested_topics}}
- {{/if}}
-
-
{{{browseMoreMessage}}}
-