From cc9b11ecc58a5664c04fb321451ab1fd5154302d Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 23 Oct 2013 17:00:02 -0400
Subject: [PATCH] Simple category breadcrumb component

---
 .../components/breadcrumbs_component.js       |  5 ++
 .../controllers/list_topics_controller.js     |  4 ++
 .../discourse/routes/filtered_list_route.js   |  5 +-
 .../discourse-breadcrumbs.js.handlebars       | 18 +++++++
 .../discourse-categorydrop.js.handlebars      |  4 ++
 .../templates/list/topics.js.handlebars       |  4 ++
 app/assets/stylesheets/desktop/topic.scss     | 47 ++++++++++++++++++-
 7 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/breadcrumbs_component.js
 create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-breadcrumbs.js.handlebars
 create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars

diff --git a/app/assets/javascripts/discourse/components/breadcrumbs_component.js b/app/assets/javascripts/discourse/components/breadcrumbs_component.js
new file mode 100644
index 00000000000..b60c811f372
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/breadcrumbs_component.js
@@ -0,0 +1,5 @@
+Discourse.DiscourseBreadcrumbsComponent = Ember.Component.extend({
+  classNames: ['category-breadcrumb'],
+  tagName: 'ol',
+  parentCategory: Em.computed.alias('category.parentCategory')
+});
diff --git a/app/assets/javascripts/discourse/controllers/list_topics_controller.js b/app/assets/javascripts/discourse/controllers/list_topics_controller.js
index ec202ce1122..1f99edac70d 100644
--- a/app/assets/javascripts/discourse/controllers/list_topics_controller.js
+++ b/app/assets/javascripts/discourse/controllers/list_topics_controller.js
@@ -15,6 +15,10 @@ Discourse.ListTopicsController = Discourse.ObjectController.extend({
 
   latest: Ember.computed.equal('filter', 'latest'),
 
+  categories: function() {
+    return Discourse.Category.list();
+  }.property(),
+
   draftLoaded: function() {
     var draft = this.get('content.draft');
     if (draft) {
diff --git a/app/assets/javascripts/discourse/routes/filtered_list_route.js b/app/assets/javascripts/discourse/routes/filtered_list_route.js
index fb6a6f2e159..6012841657b 100644
--- a/app/assets/javascripts/discourse/routes/filtered_list_route.js
+++ b/app/assets/javascripts/discourse/routes/filtered_list_route.js
@@ -27,8 +27,9 @@ Discourse.FilteredListRoute = Discourse.Route.extend({
   },
 
   setupController: function() {
-    var listController = this.controllerFor('list');
-    var listTopicsController = this.controllerFor('listTopics');
+    var listController = this.controllerFor('list'),
+        listTopicsController = this.controllerFor('listTopics');
+
     listController.set('filterMode', this.filter);
 
     var listContent = listTopicsController.get('model');
diff --git a/app/assets/javascripts/discourse/templates/components/discourse-breadcrumbs.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-breadcrumbs.js.handlebars
new file mode 100644
index 00000000000..e076c749ffb
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/discourse-breadcrumbs.js.handlebars
@@ -0,0 +1,18 @@
+<li>
+  <a href="/">{{title}}</a>
+  <i class='icon icon-caret-right first-caret'></i>
+</li>
+
+{{#if parentCategory}}
+  <li>
+    {{discourse-categorydrop category=parentCategory categories=categories}}
+  </li>
+{{/if}}
+
+{{#if category}}
+  <li>
+    {{discourse-categorydrop category=category}}
+  </li>
+{{/if}}
+
+<div class='clear'></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars
new file mode 100644
index 00000000000..35ba8bcf4a8
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars
@@ -0,0 +1,4 @@
+{{categoryLink category}}
+{{#if categories}}
+  <button {{action expand}}><i class='icon icon-caret-right'></i></button>
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/templates/list/topics.js.handlebars b/app/assets/javascripts/discourse/templates/list/topics.js.handlebars
index 6e40c4166b8..c5d8ad3faf8 100644
--- a/app/assets/javascripts/discourse/templates/list/topics.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/list/topics.js.handlebars
@@ -10,6 +10,10 @@
         </button>
       {{/if}}
 
+      {{#if category}}
+        {{discourse-breadcrumbs title=Discourse.SiteSettings.title category=category categories=categories}}
+      {{/if}}
+
       <table id='topic-list'>
         <thead>
         <tr>
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 487604e3b2f..3a3d0b7a08d 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -2,14 +2,14 @@
 .post-info a {color: #aaa;}
 
 .topic-meta-data-inside {
-  float: right; 
+  float: right;
   margin-top: -22px;
   float: right;
   font-size: 12px;
 }
 
 
-.post-actions { 
+.post-actions {
   color: #bbb;
   text-align: right;
   a {color: #bbb;}
@@ -195,3 +195,46 @@ i {background: #e4f2f8;
   font-size: 15px;
   z-index: 495
 }
+
+ol.category-breadcrumb {
+  list-style: none;
+  margin: 0 0 10px 0;
+  padding: 0;
+
+  .first-caret {
+    margin: 0 3px 0 3px;
+    color: #666;
+    font-size: 13px;
+  }
+
+  li {
+    float: left;
+    margin-right: 5px;
+    border: 1px solid transparent;
+    height: 21px;
+    padding-top: 2px;
+
+    button {
+      background: none;
+      border: 1px solid transparent;
+      padding: 0px 4px;
+      margin: 0;
+      color: #666;
+    }
+
+    &.has-drop:hover {
+      background-color: #eee;
+      border: 1px solid #bbb;
+
+      button {
+        color: black;
+      }
+    }
+  }
+
+  .clear {
+    clear: both;
+  }
+
+
+}
\ No newline at end of file