From 1f1d3909e5e2ae1b47957cf32c1a8c27f5600621 Mon Sep 17 00:00:00 2001
From: Maja Komel <maja.komel@gmail.com>
Date: Thu, 21 Mar 2019 17:49:50 +0100
Subject: [PATCH] UX: add more tag classes to topic view (#7228)

adds tag classes where there is already category-* class
---
 ...lass.js.es6 => add-category-tag-classes.js.es6} | 14 +++++++++-----
 .../discourse/components/discourse-topic.js.es6    |  3 ++-
 .../javascripts/discourse/models/topic.js.es6      |  5 +++++
 .../discourse/templates/navigation/category.hbs    |  2 +-
 .../javascripts/discourse/templates/topic.hbs      |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)
 rename app/assets/javascripts/discourse/components/{add-category-class.js.es6 => add-category-tag-classes.js.es6} (65%)

diff --git a/app/assets/javascripts/discourse/components/add-category-class.js.es6 b/app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6
similarity index 65%
rename from app/assets/javascripts/discourse/components/add-category-class.js.es6
rename to app/assets/javascripts/discourse/components/add-category-tag-classes.js.es6
index 6fbb9c824db..2339835f482 100644
--- a/app/assets/javascripts/discourse/components/add-category-class.js.es6
+++ b/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(" ")
     );
   },
 
diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
index ff7c5ea6875..7c6917f4014 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 70ae169286e..00ec3934e65 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 6a43bf28982..f45a2e50147 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 15a2a334ebf..75212e13a78 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>