Show parent category on category badges

app/assets/javascripts/discourse/helpers/application_helpers.js

@@ -79,6 +79,9 @@ function categoryLinkHTML(category, options) {
     if (options.hash.allowUncategorized) {
       categoryOptions.allowUncategorized = true;
     }
+    if (options.hash.showParent) {
+      categoryOptions.showParent = true;
+    }
     if (options.hash.categories) {
       categoryOptions.categories = Em.Handlebars.get(this, options.hash.categories, options);
     }

app/assets/javascripts/discourse/lib/html.js

@@ -83,7 +83,8 @@ Discourse.HTML = {
     var name = Em.get(category, 'name'),
         description = Em.get(category, 'description'),
         restricted = Em.get(category, 'read_restricted'),
-        html = "<a href=\"" + Discourse.getURL("/category/") + Discourse.Category.slugFor(category) + "\" ";
+        url = Discourse.getURL("/category/") + Discourse.Category.slugFor(category),
+        html = "<a href=\"" + url + "\" ";
 
     html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) + "\" ";
 
@@ -101,6 +102,15 @@ Discourse.HTML = {
       html += ">" + name + "</a>";
     }
 
+    if (opts.showParent && category.get('parent_category_id')) {
+      var parent = Discourse.Category.findById(category.get('parent_category_id'));
+      html = "<a class='badge-category-parent' style=\"" + (Discourse.HTML.categoryStyle(parent)||'') +
+             "\" href=\"" + url + "\"><span class='category-name'>" +
+             (Em.get(parent, 'read_restricted') ? "<i class='fa fa-group'></i> " : "") +
+             Em.get(parent, 'name') + "</span></a>" +
+             html;
+    }
+
     return html;
   }
 

app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars

@@ -42,7 +42,7 @@
 
           {{#unless controller.hideCategory}}
           <td class="category">
-            {{categoryLink topic.category}}
+            {{categoryLink topic.category showParent=true}}
           </td>
           {{/unless}}
 

app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars

@@ -37,7 +37,7 @@
 </td>
 
 {{#unless hideCategory}}
-<td class='category'>{{boundCategoryLink category}}</td>
+<td class='category'>{{boundCategoryLink category showParent=true}}</td>
 {{/unless}}
 
 <td class='posters'>

app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars

@@ -30,7 +30,7 @@
             </div>
             <div class="topic-item-stats clearfix">
               <div class='category'>
-                {{categoryLink category}}
+                {{categoryLink category showParent=true}}
               </div>
               <div class="pull-right">
                 <div class='num posts'>

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars

@@ -28,7 +28,7 @@
 <div class="topic-item-stats clearfix">
   {{#unless controller.hideCategory}}
     <div class='category'>
-      {{categoryLink category}}
+      {{categoryLink category showParent=true}}
     </div>
   {{/unless}}
 

app/assets/stylesheets/common/components/badges.css.scss

@@ -18,18 +18,31 @@
 // Category badge
 // --------------------------------------------------
 
-.badge-category {
-  padding: 6px;
-  color: $tertiary_text_color;
+.badge-category, .badge-category-parent {
   font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   display: inline-block;
   line-height: 1;
+}
+
+.badge-category {
+  padding: 6px;
+  color: $tertiary_text_color;
   &[href] {
   color: $tertiary_text_color;
   }
+}
 
+.badge-category-parent {
+  padding: 6px 2px;
+  width: 2px;
+  .category-name {
+    display: none;
+  }
+  &:before {
+    content: "\a0";
+  }
 }
 
 .d-dropdown .badge-category {

app/assets/stylesheets/mobile/topic-post.scss

@@ -256,7 +256,7 @@ a.star {
     display: none;
     }
 
-   a.badge-category {
+   a.badge-category, a.badge-category-parent {
     font-size: 10px;
     }