UX: add more tag classes to topic view (#7228)

UX: add more tag classes to topic view (#7228)

adds tag classes where there is already category-* class

diff --git a/app/assets/javascripts/discourse/components/add-category-class.js.es6 b/app/assets/javascripts/discourse/components/add-category-class.js.es6
deleted file mode 100644
index 6fbb9c8..0000000
--- a/app/assets/javascripts/discourse/components/add-category-class.js.es6
+++ /dev/null
@@ -1,37 +0,0 @@
-import { observes } from "ember-addons/ember-computed-decorators";
-
-export default Ember.Component.extend({
-  _slug: null,
-
-  didInsertElement() {
-    this._super(...arguments);
-    this.refreshClass();
-  },
-
-  _updateClass() {
-    if (this.isDestroying || this.isDestroyed) {
-      return;
-    }
-    const slug = this.get("category.fullSlug");
-    this._removeClass();
-    if (slug) {
-      $("body").addClass(`category-${slug}`);
-    }
-  },
-
-  @observes("category.fullSlug")
-  refreshClass() {
-    Ember.run.scheduleOnce("afterRender", this, this._updateClass);
-  },
-
-  _removeClass() {
-    $("body").removeClass((_, css) =>
-      (css.match(/\bcategory-\S+/g) || []).join(" ")
-    );
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-    this._removeClass();
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6 b/app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6
new file mode 100644
index 0000000..2339835
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6
@@ -0,0 +1,41 @@
+import { observes } from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  _slug: null,
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.refreshClass();
+  },
+
+  _updateClass() {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    const slug = this.get("category.fullSlug");
+    const tags = this.get("tags");
+
+    this._removeClass();
+
+    let classes = [];
+    if (slug) classes.push(`category-${slug}`);
+    if (tags) tags.forEach(t => classes.push(`tag-${t}`));
+    if (classes.length > 0) $("body").addClass(classes.join(" "));
+  },
+
+  @observes("category.fullSlug", "tags")
+  refreshClass() {
+    Ember.run.scheduleOnce("afterRender", this, this._updateClass);
+  },
+
+  _removeClass() {
+    $("body").removeClass((_, css) =>
+      (css.match(/\b(?:category|tag)-\S+/g) || []).join(" ")
+    );
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this._removeClass();
+  }
+});
diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
index ff7c5ea..7c6917f 100644
--- a/app/assets/javascripts/discourse/components/discourse-topic.js.es6
+++ b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
@@ -24,7 +24,8 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
     "topic.is_warning",
     "topic.category.read_restricted:read_restricted",
     "topic.deleted:deleted-topic",
-    "topic.categoryClass"
+    "topic.categoryClass",
+    "topic.tagClasses"
   ],
   menuVisible: true,
   SHORT_POST: 1200,
diff --git a/app/assets/javascripts/discourse/models/topic.js.es6 b/app/assets/javascripts/discourse/models/topic.js.es6
index 70ae169..00ec393 100644
--- a/app/assets/javascripts/discourse/models/topic.js.es6
+++ b/app/assets/javascripts/discourse/models/topic.js.es6
@@ -225,6 +225,11 @@ const Topic = RestModel.extend({
 
   categoryClass: fmt("category.fullSlug", "category-%@"),
 
+  @computed("tags")
+  tagClasses(tags) {
+    return tags.map(t => `tag-${t}`).join(" ");
+  },
+
   @computed("url")
   shareUrl(url) {
     const user = Discourse.User.current();
diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs
index 6a43bf2..f45a2e5 100644
--- a/app/assets/javascripts/discourse/templates/navigation/category.hbs
+++ b/app/assets/javascripts/discourse/templates/navigation/category.hbs
@@ -1,5 +1,5 @@
 {{#d-section class="navigation-container"}}
-  {{add-category-class category=category}}
+  {{add-category-tag-classes category=category}}
 
   <section class='category-heading'>
     {{#if category.uploaded_logo.url}}
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 15a2a33..75212e1 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -1,6 +1,6 @@
 {{#discourse-topic multiSelect=multiSelect enteredAt=enteredAt topic=model hasScrolled=hasScrolled}}
   {{#if model}}
-    {{add-category-class category=model.category}}
+    {{add-category-tag-classes category=model.category tags=model.tags}}
     <div class="container">
       {{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
     </div>

GitHub sha: 1f1d3909

1 Like