FEATURE: box-style rendering of sub-categories

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

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

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

@@ -1,11 +1,10 @@
-const EditCategoryPanel = Ember.Component.extend({
-  classNameBindings: [':modal-tab', 'activeTab::invisible'],
-});
+const EditCategoryPanel = Ember.Component.extend({});
 
 export default EditCategoryPanel;
 
 export function buildCategoryPanel(tab, extras) {
   return EditCategoryPanel.extend({
-    activeTab: Ember.computed.equal('selectedTab', tab)
+    activeTab: Ember.computed.equal('selectedTab', tab),
+    classNameBindings: [':modal-tab', 'activeTab::invisible', `:edit-category-tab-${tab}`]
   }, extras || {});
 }

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

@@ -5,9 +5,27 @@ import computed from "ember-addons/ember-computed-decorators";
 export default buildCategoryPanel('settings', {
   emailInEnabled: setting('email_in'),
   showPositionInput: setting('fixed_category_positions'),
-
+  isParentCategory: Em.computed.empty('category.parent_category_id'),
+  showSubcategoryListStyle: Em.computed.and('category.show_subcategory_list', 'isParentCategory'),
   isDefaultSortOrder: Em.computed.empty('category.sort_order'),
 
+  @computed
+  availableSubcategoryListStyles() {
+    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'}
+    ];
+  },
+
+  @computed
+  availableViews() {
+    return [
+      {name: I18n.t('filters.latest.title'), value: 'latest'},
+      {name: I18n.t('filters.top.title'),    value: 'top'}
+    ];
+  },
+
   @computed
   availableSorts() {
     return ['likes', 'op_likes', 'views', 'posts', 'activity', 'posters', 'category', 'created']
@@ -21,13 +39,5 @@ export default buildCategoryPanel('settings', {
       {name: I18n.t('category.sort_ascending'),  value: 'true'},
       {name: I18n.t('category.sort_descending'), value: 'false'}
     ];
-  },
-
-  @computed
-  availableViews() {
-    return [
-      {name: I18n.t('filters.latest.title'), value: 'latest'},
-      {name: I18n.t('filters.top.title'),    value: 'top'}
-    ];
   }
 });

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

@@ -19,7 +19,22 @@ export default DiscoveryController.extend({
 
   @computed("model.parentCategory")
   categoryPageStyle(parentCategory) {
-    const style = this.siteSettings.desktop_category_page_style;
+    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;
+      }
+    }
+
     const componentName = (parentCategory && style === "categories_and_latest_topics") ?
                           "categories_only" :
                           style;

app/assets/javascripts/discourse/models/category.js.es6

@@ -105,7 +105,8 @@ const Category = RestModel.extend({
         topic_featured_link_allowed: this.get('topic_featured_link_allowed'),
         show_subcategory_list: this.get('show_subcategory_list'),
         num_featured_topics: this.get('num_featured_topics'),
-        default_view: this.get('default_view')
+        default_view: this.get('default_view'),
+        subcategory_list_style: this.get('subcategory_list_style')
       },
       type: id ? 'PUT' : 'POST'
     });

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

@@ -0,0 +1,16 @@
+{{#if categories}}
+  {{#each categories as |c|}}
+    <div class='category-box'>
+      <a href={{c.url}}>
+        {{cdn-img src=c.uploaded_logo.url class="logo"}}
+
+        <div class='details'>
+          <h3>{{c.name}}</h3>
+          <div class='description'>
+            {{c.description}}
+          </div>
+        </div>
+      </a>
+    </div>
+  {{/each}}
+{{/if}}

app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs

@@ -19,14 +19,51 @@
   </label>
 </section>
 
-{{#unless category.parent_category_id}}
-  <section class="field">
+{{#if isParentCategory}}
+  <section class="field show-subcategory-list-field">
     <label>
       {{input type="checkbox" checked=category.show_subcategory_list}}
       {{i18n "category.show_subcategory_list"}}
     </label>
   </section>
-{{/unless}}
+{{/if}}
+
+{{#if showSubcategoryListStyle}}
+  <section class="field subcategory-list-style-field">
+    <label>
+      {{i18n "category.subcategory_list_style"}}
+      {{combo-box valueAttribute="value" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
+    </label>
+  </section>
+{{/if}}
+
+<section class="field default-view-field">
+  <label>
+    {{i18n "category.default_view"}}
+    {{combo-box valueAttribute="value" content=availableViews value=category.default_view}}
+  </label>
+</section>
+
+<section class="field">
+  <label>
+    {{i18n "category.sort_order"}}
+    {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
+    {{#unless isDefaultSortOrder}}
+      {{combo-box valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
+    {{/unless}}
+  </label>
+</section>
+
+<section class="field num-featured-topics-fields">
+  <label>
+    {{#if category.parent_category_id}}
+      {{i18n "category.subcategory_num_featured_topics"}}
+    {{else}}
+      {{i18n "category.num_featured_topics"}}
+    {{/if}}
+    {{text-field value=category.num_featured_topics}}
+  </label>
+</section>
 
 <section class="field">
   <label>
@@ -46,23 +83,6 @@
   </section>
 {{/if}}
 
-<section class="field">
-  <label>
-    {{i18n "category.sort_order"}}
-    {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
-    {{#unless isDefaultSortOrder}}
-      {{combo-box valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
-    {{/unless}}
-  </label>
-</section>
-
-<section class="field default-view-field">
-  <label>
-    {{i18n "category.default_view"}}
-    {{combo-box valueAttribute="value" content=availableViews value=category.default_view}}
-  </label>
-</section>
-
 {{#if emailInEnabled}}
     <section class='field'>
       <label>
@@ -82,17 +102,6 @@
   {{plugin-outlet name="category-email-in" args=(hash category=category)}}
 {{/if}}
 
-<section class="field num-featured-topics-fields">
-  <label>
-    {{#if category.parent_category_id}}
-      {{i18n "category.subcategory_num_featured_topics"}}
-    {{else}}
-      {{i18n "category.num_featured_topics"}}
-    {{/if}}
-    {{text-field value=category.num_featured_topics}}
-  </label>
-</section>
-
 {{#if showPositionInput}}
   <section class='field position-fields'>
     <label>