UX: add CSS classes on body tag based on topic statuses. (#12729)

UX: add CSS classes on body tag based on topic statuses. (#12729)

This commit will add CSS classes like unlisted, pinned, and unpinned on the body tag.

  • DEV: we no longer using the categoryClass & tagClasses methods.
  • Update app/assets/javascripts/discourse/app/components/add-topic-status-classes.js

Co-authored-by: Joffrey JAFFEUX j.jaffeux@gmail.com

diff --git a/app/assets/javascripts/discourse/app/components/add-topic-status-classes.js b/app/assets/javascripts/discourse/app/components/add-topic-status-classes.js
new file mode 100644
index 0000000..e445eae
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/add-topic-status-classes.js
@@ -0,0 +1,50 @@
+import Component from "@ember/component";
+import { scheduleOnce } from "@ember/runloop";
+
+export default Component.extend({
+  tagName: "",
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.refreshClass();
+  },
+
+  _updateClass() {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    const body = document.getElementsByTagName("body")[0];
+
+    this._removeClass();
+
+    if (this.topic.invisible) {
+      body.classList.add("topic-status-unlisted");
+    }
+    if (this.topic.pinned) {
+      body.classList.add("topic-status-pinned");
+    }
+    if (this.topic.unpinned) {
+      body.classList.add("topic-status-unpinned");
+    }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.refreshClass();
+  },
+
+  refreshClass() {
+    scheduleOnce("afterRender", this, this._updateClass);
+  },
+
+  _removeClass() {
+    const regx = new RegExp(/\btopic-status-\S+/, "g");
+    const body = document.getElementsByTagName("body")[0];
+    body.className = body.className.replace(regx, "");
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this._removeClass();
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/components/discourse-topic.js b/app/assets/javascripts/discourse/app/components/discourse-topic.js
index de5d692..784c8fd 100644
--- a/app/assets/javascripts/discourse/app/components/discourse-topic.js
+++ b/app/assets/javascripts/discourse/app/components/discourse-topic.js
@@ -23,8 +23,6 @@ export default Component.extend(
       "topic.is_warning",
       "topic.category.read_restricted:read_restricted",
       "topic.deleted:deleted-topic",
-      "topic.categoryClass",
-      "topic.tagClasses",
     ],
     menuVisible: true,
     SHORT_POST: 1200,
diff --git a/app/assets/javascripts/discourse/app/models/topic.js b/app/assets/javascripts/discourse/app/models/topic.js
index 6dc8a68..37be807 100644
--- a/app/assets/javascripts/discourse/app/models/topic.js
+++ b/app/assets/javascripts/discourse/app/models/topic.js
@@ -218,13 +218,6 @@ const Topic = RestModel.extend({
     return Category.findById(categoryId);
   },
 
-  categoryClass: fmt("category.fullSlug", "category-%@"),
-
-  @discourseComputed("tags")
-  tagClasses(tags) {
-    return tags && tags.map((t) => `tag-${t}`).join(" ");
-  },
-
   @discourseComputed("url")
   shareUrl(url) {
     const user = User.current();
diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index 325044c..f6fda7e 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -1,6 +1,7 @@
 {{#discourse-topic multiSelect=multiSelect enteredAt=enteredAt topic=model hasScrolled=hasScrolled}}
   {{#if model}}
     {{add-category-tag-classes category=model.category tags=model.tags}}
+    {{add-topic-status-classes topic=model}}
     <div class="container">
       {{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
     </div>

GitHub sha: 167bbb25

This commit appears in #12729 which was approved by jjaffeux. It was merged by vinothkannans.