work in progress, wide categories page

Author: SamSaffron

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

@@ -315,3 +315,21 @@ Handlebars.registerHelper('faqLink', function(property, options) {
     "'>" + I18n.t('faq') + "</a>"
   );
 });
+
+
+Ember.Handlebars.registerHelper('link-to-categories', function(){
+
+   var options = [].slice.call(arguments, -1)[0],
+        params = Discourse.SiteSettings.enable_wide_category_list ? ['list.wideCategories'] : ['list.categories'],
+        hash = options.hash;
+
+    hash.disabledBinding = hash.disabledWhen;
+
+    hash.parameters = {
+      context: this,
+      options: options,
+      params: params
+    };
+
+  return Ember.Handlebars.helpers.view.call(this, Ember.LinkView, options);
+});

app/assets/javascripts/discourse/routes/application_routes.js

@@ -29,11 +29,15 @@ Discourse.Route.buildRoutes(function() {
     });
 
     // the homepage is the first item of the 'top_menu' site setting
-    var settings = Discourse.SiteSettings || PreloadStore.get('siteSettings');
+    var settings = Discourse.SiteSettings;
     var homepage = settings.top_menu.split("|")[0].split(",")[0];
     this.route(homepage, { path: '/' });
 
-    this.route('categories', { path: '/categories' });
+    if(settings.enable_wide_category_list) {
+      this.route('wideCategories', { path: '/categories' });
+    } else {
+      this.route('categories', { path: '/categories' });
+    }
     this.route('category', { path: '/category/:slug/more' });
     this.route('category', { path: '/category/:slug' });
   });

app/assets/javascripts/discourse/routes/list_categories_route.js

@@ -8,6 +8,8 @@
 **/
 Discourse.ListCategoriesRoute = Discourse.Route.extend({
 
+  template: 'listCategories',
+
   redirect: function() { Discourse.redirectIfLoginRequired(this); },
 
   actions: {
@@ -32,7 +34,7 @@ Discourse.ListCategoriesRoute = Discourse.Route.extend({
   },
 
   renderTemplate: function() {
-    this.render('listCategories', { into: 'list', outlet: 'listView' });
+    this.render(this.get('template'), { into: 'list', outlet: 'listView' });
   },
 
   afterModel: function(categoryList) {

app/assets/javascripts/discourse/routes/list_wide_categories_route.js

@@ -0,0 +1,7 @@
+Discourse.ListWideCategoriesRoute = Discourse.ListCategoriesRoute.extend({
+  template: 'listWideCategories'
+});
+
+
+Discourse.ListWideCategoriesController = Discourse.Controller.extend({
+});

app/assets/javascripts/discourse/templates/header.js.handlebars

@@ -139,7 +139,7 @@
       {{#if categories}}
         <ul class="category-links">
           <li class='heading' title="{{i18n filters.categories.help}}">
-            {{#link-to "list.categories"}}{{i18n filters.categories.title}}{{/link-to}}
+            {{#link-to-categories}}{{i18n filters.categories.title}}{{/link-to-categories}}
           </li>
 
           {{#each categories}}

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

@@ -60,7 +60,7 @@
               <a href='#' {{action createTopic}}>{{i18n topic.suggest_create_topic}}</a>
             {{/if}}
           {{else}}
-            {{#link-to 'list.categories'}}{{i18n topic.browse_all_categories}}{{/link-to}} {{i18n or}} {{#link-to 'list.latest'}}{{i18n topic.view_latest_topics}}{{/link-to}}
+            {{#link-to-categories}}{{i18n topic.browse_all_categories}}{{/link-to-categories}} {{i18n or}} {{#link-to 'list.latest'}}{{i18n topic.view_latest_topics}}{{/link-to}}
           {{/if}}
         {{/if}}
       </h3>

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

@@ -0,0 +1,39 @@
+<div class='contents'>
+
+  <table id='topic-list' class='categories'>
+    <thead>
+    <tr>
+      <th class='category'>{{i18n categories.category}}</th>
+      <th class='posters'>{{i18n categories.participants}}</th>
+      <th class='num topics'>{{i18n categories.topics}}</th>
+      <th class='num posts'>{{i18n categories.posts}}</th>
+      <th class='latest'>{{i18n categories.latest}}</th>
+    </tr>
+    </thead>
+    <tbody>
+      {{#each model.categories}}
+      <tr>
+        <td class='category'>{{categoryLink this}}
+          {{#if description_excerpt}}
+            <div class="category-description">
+              {{{description_excerpt}}}
+            </div>
+          {{/if}}
+        </td>
+        <td>{{#each featured_users}}
+            <a href="/users/{{unbound username_lower}}">{{avatar this imageSize="small"}}</a>
+          {{/each}}
+        </td>
+        <td>{{number topics_total}}</td>
+        <td>{{number posts_total}}</td>
+        <td><a href="#">this is a link to a post</a> <span class="age" data-bindattr-177="177" title="October 11, 2013 8:37am"><span class="relative-date" data-time="1381441065000" data-format="tiny">4d</span></span></td>
+      </tr>
+      {{/each}}
+    </tbody>
+
+  </table>
+</div>
+
+<footer id='topic-list-bottom'>
+</footer>
+

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

@@ -191,6 +191,20 @@
   }
 }
 
+
+#topic-list.categories {
+  .category{
+    width: 50%;
+    .category-description {
+      margin-top: 10px;
+    }
+    .badge-category {
+      padding: 6px 10px;
+      font-size: 14px;
+    }
+  }
+}
+
 // Category list
 // --------------------------------------------------
 

app/models/site_setting.rb

@@ -51,6 +51,7 @@ class SiteSetting < ActiveRecord::Base
   client_setting(:min_body_similar_length, 15)
   # cf. https://github.com/discourse/discourse/pull/462#issuecomment-14991562
   client_setting(:category_colors, 'BF1E2E|F1592A|F7941D|9EB83B|3AB54A|12A89D|25AAE2|0E76BD|652D90|92278F|ED207B|8C6238|231F20|808281|B3B5B4|283890')
+  client_setting(:enable_wide_category_list, false)
 
   # auto-replace rules for title
   setting(:title_prettify, true)

app/views/common/_discourse_javascript.html.erb

@@ -21,7 +21,7 @@
   Discourse.BaseUrl = '<%= RailsMultisite::ConnectionManagement.current_hostname  %>';
   Discourse.BaseUri = '<%= Discourse::base_uri "/" %>';
   Discourse.Environment = '<%= Rails.env %>';
-  Discourse.SiteSettings.login_required && !Discourse.User.current();
+  Discourse.SiteSettings = PreloadStore.get('siteSettings');
   Discourse.Router.map(function() {
     Discourse.routeBuilder.call(this);
   });