implemented UI for filtered down by category view

app/assets/javascripts/discourse/controllers/list_controller.js

@@ -22,7 +22,7 @@ Discourse.ListController = Discourse.Controller.extend({
         category: category
       });
     }).filter(function(i) {
-      return i !== null && !(category && i.get("name") === "categories");
+      return i !== null && !(category && i.get("name").indexOf("categor") === 0);
     });
   }.property("category"),
 
@@ -134,7 +134,11 @@ Discourse.ListController = Discourse.Controller.extend({
     } else {
       return false;
     }
-  }.property('category')
+  }.property('category'),
+
+  categories: function() {
+    return Discourse.Category.list();
+  }.property()
 
 });
 

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

@@ -34,6 +34,13 @@ Discourse.Category = Discourse.Model.extend({
     return Discourse.getURL("/category/") + (this.get('slug'));
   }.property('name'),
 
+  unreadUrl: function() {
+    return this.get('url') + '/unread';
+  }.property('url'),
+
+  newUrl: function() {
+    return this.get('url') + '/new';
+  }.property('url'),
 
   style: function() {
     return "background-color: #" + (this.get('category.color')) + "; color: #" + (this.get('category.text_color')) + ";";

app/assets/javascripts/discourse/models/nav_item.js

@@ -31,11 +31,21 @@ Discourse.NavItem = Discourse.Model.extend({
 
   // href from this item
   href: function() {
+    return Discourse.getURL("/") + this.get('filterMode');
+  }.property('filterMode'),
+
+  // href from this item
+  filterMode: function() {
     var name = this.get('name');
     if( name.split('/')[0] === 'category' ) {
-      return Discourse.getURL("/") + 'category/' + this.get('categorySlug');
+      return 'category/' + this.get('categorySlug');
     } else {
-      return Discourse.getURL("/") + name.replace(' ', '-');
+      var mode = "";
+      var category = this.get("category");
+      if(category){
+        mode += "category/" + category.get("slug") + "/";
+      }
+      return mode + name.replace(' ', '-');
     }
   }.property('name'),
 

app/assets/javascripts/discourse/models/topic_list.js

@@ -146,7 +146,6 @@ Discourse.TopicList.reopenClass({
       return Ember.RSVP.resolve(list);
     }
     session.setProperties({topicList: null, topicListScrollPos: null});
-
     return Discourse.TopicList.find(filter, menuItem.get('excludeCategory'));
   }
 });

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

@@ -22,11 +22,14 @@ Discourse.ListCategoryRoute = Discourse.FilteredListRoute.extend({
     }
 
     var listController = this.controllerFor('list'),
-        urlId = Discourse.Category.slugFor(category),
+        categorySlug = Discourse.Category.slugFor(category),
         self = this;
 
-    listController.set('filterMode', "category/" + urlId);
+    var filter = this.filter || "latest";
-    listController.load("category/" + urlId).then(function(topicList) {
+    var url = "category/" + categorySlug + "/" + filter;
+
+    listController.set('filterMode', url);
+    listController.load(url).then(function(topicList) {
       listController.setProperties({
         canCreateTopic: topicList.get('can_create_topic'),
         category: category

app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars

@@ -1,7 +1,7 @@
 {{#if category}}
   {{categoryLink category}}
 {{else}}
-  <a href="/">{{title}}</a>
+  <a href="/"><i class='icon icon-home'></i></a>
 {{/if}}
 
 {{#if categories}}

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

@@ -1,5 +1,10 @@
-<div id='list-controls'>
+<div class='list-controls'>
   <div class="container">
+
+    {{#if category}}
+      {{discourse-breadcrumbs category=category categories=categories}}
+    {{/if}}
+
     <ul class="nav nav-pills" id='category-filter'>
       {{each availableNavItems itemViewClass="Discourse.NavItemView"}}
     </ul>

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

@@ -41,9 +41,11 @@
   {{/if}}
 </td>
 
+{{#unless controller.category}}
 <td class='category'>
   {{categoryLink category}}
 </td>
+{{/unless}}
 
 <td class='posters'>
   {{#each posters}}

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

@@ -10,10 +10,6 @@
         </button>
       {{/if}}
 
-      {{#if category}}
-        {{discourse-breadcrumbs title=Discourse.SiteSettings.title category=category categories=categories}}
-      {{/if}}
-
       <table id='topic-list'>
         <thead>
         <tr>
@@ -23,7 +19,9 @@
           <th class='main-link'>
             {{i18n topic.title}}
           </th>
+          {{#unless category}}
           <th class='category'>{{i18n category_title}}</th>
+          {{/unless}}
           <th class='posters'>{{i18n top_contributors}}</th>
           <th class='num posts'>{{i18n posts}}</th>
           <th class='num likes'>{{i18n likes}}</th>

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

@@ -22,10 +22,10 @@
           {{/if}}
           {{categoryLink this allowUncategorized=true}}
           {{#if unreadTopics}}
-            <a href={{unbound url}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
+            <a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
           {{/if}}
           {{#if newTopics}}
-            <a href={{unbound url}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
+            <a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
           {{/if}}
           <div class='featured-users'>
             {{#each featured_users}}

app/assets/javascripts/discourse/views/nav_item_view.js

@@ -14,7 +14,7 @@ Discourse.NavItemView = Discourse.View.extend({
   hidden: Em.computed.not('content.visible'),
   count: Ember.computed.alias('content.count'),
   shouldRerender: Discourse.View.renderIfChanged('count'),
-  active: Discourse.computed.propertyEqual('contentNameSlug', 'controller.filterMode'),
+  active: Discourse.computed.propertyEqual('content.filterMode', 'controller.filterMode'),
 
   title: function() {
     var categoryName, extra, name;
@@ -27,13 +27,6 @@ Discourse.NavItemView = Discourse.View.extend({
     return I18n.t("filters." + name + ".help", extra);
   }.property("content.filter"),
 
-  contentNameSlug: function() {
-    return this.get("content.name").toLowerCase().replace(' ','-');
-  }.property('content.name'),
-
-  // active: function() {
-  //   return (this.get("contentNameSlug") === this.get("controller.filterMode"));
-  // }.property("contentNameSlug", "controller.filterMode"),
 
   name: function() {
     var categoryName, extra, name;

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

@@ -8,7 +8,7 @@
 // List controls
 // --------------------------------------------------
 
-#list-controls {
+.list-controls {
   .nav {
     float: left;
     margin-bottom: 15px;
@@ -349,8 +349,7 @@
 // Misc. stuff
 // --------------------------------------------------
 
-#main {
+.list-controls {
-  #list-controls {
   .badge-category {
     display: inline-block;
     background-color: yellow;
@@ -358,8 +357,8 @@
     float: left;
   }
   clear: both;
-  }
+}
-  #list-area {
+#list-area {
   margin-bottom: 300px;
 
 
@@ -378,8 +377,8 @@
     font-size: 13px;
     cursor: default;
   }
-  }
+}
-  #topic-list {
+#topic-list {
   .alert {
     margin-bottom: 0;
     font-size: 14px;
@@ -387,8 +386,8 @@
   .spinner {
     margin-top: 40px;
   }
-  }
+}
-  span.posted {
+span.posted {
   display: inline-block;
   text-indent: -9999em;
   width: 15px;
@@ -396,5 +395,4 @@
   background: {
     image: image-url("posted.png");
   };
-  }
 }

app/assets/stylesheets/desktop/topic.scss

@@ -199,17 +199,20 @@ i {background: #e4f2f8;
 }
 
 ol.category-breadcrumb {
+  display: block;
+  float: left;
   list-style: none;
-  margin: 0 0 10px 0;
+  margin: 0 10px 0 0;
   padding: 0;
 
   li {
     float: left;
     margin-right: 5px;
     border: 1px solid transparent;
+    line-height: 31px;
 
     &.no-category {
-      font-size: 13px;
+      font-size: 22px;
 
       a {
         margin-right: 3px;
@@ -243,7 +246,9 @@ ol.category-breadcrumb {
     .badge-category {
       margin: 0;
       display: inline-block;
-      padding: 1px 6px 2px 6px;
+      font-size: 14px;
+      padding: 0px 10px;
+      float: none;
     }
 
     button {
@@ -286,6 +291,12 @@ ol.category-breadcrumb {
     padding: 8px 5px 0 7px;
     z-index: 100;
 
+    .badge-category {
+      font-size: 13px;
+      line-height: 26px;
+      padding: 0px 8px;
+    }
+
     div {
       margin-bottom: 10px;
     }

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

@@ -8,7 +8,7 @@
 // List controls
 // --------------------------------------------------
 
-#list-controls {
+.list-controls {
   margin: 5px;
   .nav {
     float: left;
@@ -239,8 +239,7 @@
 // Misc. stuff
 // --------------------------------------------------
 
-#main {
+.list-controls {
-  #list-controls {
   .badge-category {
     display: inline-block;
     background-color: yellow;
@@ -248,8 +247,8 @@
     float: left;
   }
   clear: both;
-  }
+}
-  #list-area {
+#list-area {
   margin-bottom: 300px;
   .empty-topic-list {
     padding: 10px;
@@ -262,8 +261,8 @@
     font-size: 13px;
     cursor: default;
   }
-  }
+}
-  #topic-list {
+#topic-list {
   .alert {
     margin-bottom: 0;
     font-size: 14px;
@@ -271,8 +270,8 @@
   .spinner {
     margin-top: 40px;
   }
-  }
+}
-  span.posted {
+span.posted {
   display: inline-block;
   text-indent: -9999em;
   width: 15px;
@@ -280,7 +279,6 @@
   background: {
     image: image-url("posted.png");
   };
-  }
 }
 
 
@@ -364,3 +362,23 @@ clear: both;
   opacity: 1;
 }
 
+
+ol.category-breadcrumb {
+  display: block;
+  margin-top: 5px;
+  float: left;
+  list-style: none;
+  .icon-home {
+    font-size: 20px;
+  }
+  .badge-category {
+    margin: 3px 8px 0;
+  }
+  button {
+    padding: 5px 10px;
+    font-size: 16px;
+  }
+  li {
+    float: left;
+  }
+}