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

adds tag classes where there is already category-* class

app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6

@@ -13,20 +13,24 @@ export default Ember.Component.extend({
       return;
     }
     const slug = this.get("category.fullSlug");
+    const tags = this.get("tags");
+
     this._removeClass();
-    if (slug) {
-      $("body").addClass(`category-${slug}`);
-    }
+
+    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")
+  @observes("category.fullSlug", "tags")
   refreshClass() {
     Ember.run.scheduleOnce("afterRender", this, this._updateClass);
   },
 
   _removeClass() {
     $("body").removeClass((_, css) =>
-      (css.match(/\bcategory-\S+/g) || []).join(" ")
+      (css.match(/\b(?:category|tag)-\S+/g) || []).join(" ")
     );
   },
 

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,

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();

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}}

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>