FEATURE: subcategory list style: boxes with featured topics

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

@@ -0,0 +1,12 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  tagName: "section",
+  classNameBindings: [':category-boxes-with-topics', 'anyLogos:with-logos:no-logos'],
+
+  @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')));
+  }
+});

app/assets/javascripts/discourse/components/edit-category-settings.js.es6

@@ -14,7 +14,8 @@ export default buildCategoryPanel('settings', {
     return [
       {name: I18n.t('category.subcategory_list_styles.rows'), value: 'rows'},
       {name: I18n.t('category.subcategory_list_styles.rows_with_featured_topics'), value: 'rows_with_featured_topics'},
-      {name: I18n.t('category.subcategory_list_styles.boxes'), value: 'boxes'}
+      {name: I18n.t('category.subcategory_list_styles.boxes'), value: 'boxes'},
+      {name: I18n.t('category.subcategory_list_styles.boxes_with_featured_topics'), value: 'boxes_with_featured_topics'}
     ];
   },
 

app/assets/javascripts/discourse/controllers/discovery/categories.js.es6

@@ -1,6 +1,13 @@
 import computed from 'ember-addons/ember-computed-decorators';
 import DiscoveryController from 'discourse/controllers/discovery';
 
+const subcategoryStyleComponentNames = {
+  'rows': 'categories_only',
+  'rows_with_featured_topics': 'categories_with_featured_topics',
+  'boxes': 'categories_boxes',
+  'boxes_with_featured_topics': 'categories_boxes_with_topics'
+};
+
 export default DiscoveryController.extend({
   discovery: Ember.inject.controller(),
 
@@ -22,17 +29,7 @@ export default DiscoveryController.extend({
     let style = this.siteSettings.desktop_category_page_style;
 
     if (parentCategory) {
-      switch(parentCategory.get('subcategory_list_style')) {
-        case 'rows':
-          style = "categories_only";
-          break;
-        case 'rows_with_featured_topics':
-          style = "categories_with_featured_topics";
-          break;
-        case 'boxes':
-          style = "categories_boxes";
-          break;
-      }
+      style = subcategoryStyleComponentNames[parentCategory.get('subcategory_list_style')] || style;
     }
 
     const componentName = (parentCategory && style === "categories_and_latest_topics") ?

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

@@ -0,0 +1,27 @@
+{{#each categories as |c|}}
+  <div class='category-box' style={{border-color c.color}}>
+    <div class='category-box-inner'>
+      <a href={{c.url}}>
+        {{#if c.uploaded_logo.url}}
+          {{cdn-img src=c.uploaded_logo.url class="logo"}}
+        {{/if}}
+
+        <h3>{{c.name}}</h3>
+      </a>
+
+      <div class='featured-topics'>
+        {{#if c.topics}}
+          <ul>
+            {{#each c.topics as |topic|}}
+              <li>
+                <a class='title' href="{{unbound topic.lastUnreadUrl}}">
+                  {{text-overflow class="overflow" text=topic.fancyTitle}}
+                </a>
+              </li>
+            {{/each}}
+          </ul>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+{{/each}}

app/assets/stylesheets/desktop/category-list.scss

@@ -177,7 +177,7 @@
   }
 }
 
-.category-boxes {
+.category-boxes, .category-boxes-with-topics {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -191,21 +191,13 @@
     align-content: flex-start;
 
     box-sizing: border-box;
-    width: 23%;
-    margin: 0 1% 1.5em 1%;
     border: 2px solid blend-primary-secondary(20%);
 
     .mobile-view & {
       width: 100%;
     }
 
-    a {
-      width: 100%;
-      padding: 1em;
-    }
-
     .details {
-      text-align: center;
       h3 {
         font-size: 1.5em;
         margin-bottom: 0.5em;
@@ -228,8 +220,80 @@
     .logo {
       display: none;
     }
+  }
+}
+
+.category-boxes {
+  .category-box {
+    width: 23%;
+    margin: 0 1% 1.5em 1%;
+  }
+  .details {
+    text-align: center;
+  }
+
+  a {
+    width: 100%;
+    padding: 1em;
+  }
+
+  &.no-logos {
     .category-box a {
       padding: 3em 1em;
     }
   }
 }
+
+.category-boxes-with-topics {
+  .category-box {
+    width: 31%;
+    margin: 0 1% 1.5em 1%;
+    padding: 0;
+    border-width: 0 0 0 6px;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
+  }
+  .category-box-inner {
+    width: 100%;
+    padding: 0;
+    border-width: 2px 2px 2px 0;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
+
+    > a[href] {
+      width: 100%;
+      padding: 1em 1em 0 1em;
+      color: $primary;
+    }
+  }
+
+  h3 {
+    font-size: 1.2em;
+    text-align: center;
+  }
+
+  .featured-topics {
+    padding: 0 1em 1em 1em;
+    ul {
+      color: blend-primary-secondary(70%);
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      padding: 0;
+      margin-left: 1.5em;
+      .overflow {
+        max-height: 3em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    li:before {
+      content: '\f0f6';
+      font-family: 'FontAwesome';
+      float: left;
+      margin-left: -1.5em;
+    }
+  }
+}

app/models/category.rb

@@ -509,7 +509,7 @@ SQL
   end
 
   def subcategory_list_includes_topics?
-    subcategory_list_style == 'rows_with_featured_topics'
+    subcategory_list_style.end_with?("with_featured_topics")
   end
 end
 

config/locales/client.en.yml

@@ -2031,6 +2031,7 @@ en:
         rows: "Rows"
         rows_with_featured_topics: "Rows with featured topics"
         boxes: "Boxes"
+        boxes_with_featured_topics: "Boxes with featured topics"
 
     flagging:
       title: 'Thanks for helping to keep our community civil!'

test/javascripts/acceptance/topic-discovery-test.js.es6

@@ -36,4 +36,11 @@ test("Visit Discovery Pages", () => {
     ok(exists(".topic-list"), "The list of topics was rendered");
     ok(exists(".category-boxes"), "The list of subcategories were rendered with box style");
   });
+
+  visit("/c/dev");
+  andThen(() => {
+    ok(exists(".topic-list"), "The list of topics was rendered");
+    ok(exists(".category-boxes-with-topics"), "The list of subcategories were rendered with box-with-featured-topics style");
+    ok(exists(".category-boxes-with-topics .featured-topics"), "The featured topics are there too");
+  });
 });

test/javascripts/fixtures/site-fixtures.js.es6

@@ -146,8 +146,9 @@ export default {
           "notification_level":null,
           "logo_url":null,
           "background_url":null,
-          "show_subcategory_list":false,
-          "default_view":"latest"
+          "show_subcategory_list":true,
+          "default_view":"latest",
+          "subcategory_list_style":"boxes_with_featured_topics"
         },
         {
           "id":6,