Feature: add boxes with subcategories option for desktop categories page (#6471)

* Feature: add boxes with subcategories option for desktop categories page

* only add subclass div when subclasses exist

app/assets/javascripts/discourse/components/categories-boxes.js.es6

@@ -3,18 +3,26 @@ import DiscourseURL from "discourse/lib/url";
 
 export default Ember.Component.extend({
   tagName: "section",
-  classNameBindings: [":category-boxes", "anyLogos:with-logos:no-logos"],
+  classNameBindings: [
+    ":category-boxes",
+    "anyLogos:with-logos:no-logos",
+    "hasSubcategories:with-subcategories"
+  ],
 
   @computed("categories.[].uploaded_logo.url")
   anyLogos() {
-    return this.get("categories").any(c => {
-      return !Ember.isEmpty(c.get("uploaded_logo.url"));
-    });
     return this.get("categories").any(
       c => !Ember.isEmpty(c.get("uploaded_logo.url"))
     );
   },
 
+  @computed("categories.[].subcategories")
+  hasSubcategories() {
+    return this.get("categories").any(
+      c => !Ember.isEmpty(c.get("subcategories"))
+    );
+  },
+
   click(e) {
     if (!$(e.target).is("a")) {
       const url = $(e.target)

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -17,6 +17,19 @@
       <div class='description'>
         {{{text-overflow class="overflow" text=c.description_excerpt}}}
       </div>
+
+      {{#if c.subcategories}}
+        <div class='subcategories'>
+          {{#each c.subcategories as |sc|}}
+            <a class="subcategory" href={{sc.url}}>
+              <span class="subcategory-image-placeholder">
+                {{cdn-img src=sc.uploaded_logo.url class="logo"}}
+              </span>
+              <span class="subcategory-link">{{sc.name}}</span>
+            </a>
+          {{/each}}
+        </div>
+      {{/if}}
     </div>
   </div>
 {{/each}}

app/assets/stylesheets/common/base/category-list.scss

@@ -112,6 +112,33 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .subcategories {
+    margin-left: 1em;
+    display: flex;
+    flex-flow: wrap;
+    .subcategory {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-right: 1em;
+      margin-bottom: 0.6em;
+      .subcategory-image-placeholder {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        margin-right: 0.6em;
+      }
+      .logo {
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0;
+      }
+    }
+  }
 }
 
 .category-boxes-with-topics {

app/models/category_page_style.rb

@@ -12,6 +12,7 @@ class CategoryPageStyle < EnumSiteSetting
       { name: 'category_page_style.categories_with_featured_topics', value: 'categories_with_featured_topics' },
       { name: 'category_page_style.categories_and_latest_topics', value: 'categories_and_latest_topics' },
       { name: 'category_page_style.categories_and_top_topics', value: 'categories_and_top_topics' },
+      { name: 'category_page_style.categories_boxes', value: 'categories_boxes' },
       { name: 'category_page_style.categories_boxes_with_topics', value: 'categories_boxes_with_topics' },
     ]
   end

config/locales/client.en.yml

@@ -1284,6 +1284,7 @@ en:
       categories_with_featured_topics: "Categories with Featured Topics"
       categories_and_latest_topics: "Categories and Latest Topics"
       categories_and_top_topics: "Categories and Top Topics"
+      categories_boxes: "Boxes with Subcategories"
       categories_boxes_with_topics: "Boxes with Featured Topics"
 
     shortcut_modifier_key: