Working drop downs for category changing

app/assets/javascripts/discourse/components/breadcrumbs_component.js

@@ -1,5 +1,19 @@
 Discourse.DiscourseBreadcrumbsComponent = Ember.Component.extend({
   classNames: ['category-breadcrumb'],
   tagName: 'ol',
-  parentCategory: Em.computed.alias('category.parentCategory')
+  parentCategory: Em.computed.alias('category.parentCategory'),
+
+  parentCategories: Em.computed.filter('categories', function(c) {
+    return !c.get('parentCategory');
+  }),
+
+  targetCategory: function() {
+    // Note we can't use Em.computed.or here because it returns a boolean not the object
+    return this.get('parentCategory') || this.get('category');
+  }.property('parentCategory', 'category'),
+
+  childCategories: Em.computed.filter('categories', function(c) {
+    return c.get('parentCategory') === this.get('targetCategory');
+  })
+
 });

app/assets/javascripts/discourse/components/categorydrop_component.js

@@ -0,0 +1,44 @@
+Discourse.DiscourseCategorydropComponent = Ember.Component.extend({
+
+  classNameBindings: ['category::no-category', 'categories:has-drop'],
+  tagName: 'li',
+
+  iconClass: function() {
+    if (this.get('expanded')) { return "icon icon-caret-down"; }
+    return "icon icon-caret-right";
+  }.property('expanded'),
+
+  actions: {
+    expand: function() {
+      if (this.get('expanded')) {
+        this.close();
+        return;
+      }
+
+      if (this.get('categories')) {
+        this.set('expanded', true);
+      }
+
+      var self = this,
+          $dropdown = this.$()[0];
+
+      $('html').on('click.category-drop', function(e) {
+        var closest = $(e.target).closest($dropdown);
+        return (closest.length && closest[0] === $dropdown) ? true : self.close();
+      });
+    }
+  },
+
+  close: function() {
+    $('html').off('click.category-drop');
+    this.set('expanded', false);
+  },
+
+  didInsertElement: function() {
+  },
+
+  willDestroyElement: function() {
+    $('html').off('click.category-drop');
+  }
+
+});

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

@@ -1,18 +1,9 @@
-<li>
-  <a href="/">{{title}}</a>
-  <i class='icon icon-caret-right first-caret'></i>
-</li>
+{{discourse-categorydrop title=title categories=parentCategories}}
+
+{{discourse-categorydrop category=targetCategory categories=childCategories}}
 
 {{#if parentCategory}}
-  <li>
-    {{discourse-categorydrop category=parentCategory categories=categories}}
-  </li>
-{{/if}}
-
-{{#if category}}
-  <li>
   {{discourse-categorydrop category=category}}
-  </li>
 {{/if}}
 
 <div class='clear'></div>

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

@@ -1,4 +1,15 @@
+{{#if category}}
   {{categoryLink category}}
-{{#if categories}}
-  <button {{action expand}}><i class='icon icon-caret-right'></i></button>
+{{else}}
+  <a href="/">{{title}}</a>
+{{/if}}
+
+{{#if categories}}
+  <button {{action expand}}><i {{bindAttr class='iconClass'}}></i></button>
+
+  <section {{bindAttr class="expanded::hidden :category-menu"}} class='chooser'>
+    {{#each categories}}
+      <div class='cat'>{{categoryLink this}}</div>
+    {{/each}}
+  </section>
 {{/if}}

app/assets/stylesheets/desktop/topic.scss

@@ -203,25 +203,62 @@ ol.category-breadcrumb {
   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;
+
+    &.no-category {
+      font-size: 13px;
+
+      a {
+        margin-right: 3px;
+        margin-left: 4px;
+
+        &:hover {
+          color: black;
+        }
+      }
+
+      button {
+        padding-left: 6px;
+        &:hover {
+          background-color: #eee;
+        }
+      }
+
+      &.has-drop:hover {
+        background-color: #f9f9f9;
+        button {
+          border-left: 1px solid #bbb;
+        }
+      }
+
+      .category-menu {
+        margin-left: -1px;
+        padding: 8px 5px 0 3px;
+      }
+    }
+
+    .badge-category {
+      margin: 0;
+      display: inline-block;
+      padding: 1px 6px 2px 6px;
+    }
 
     button {
       background: none;
       border: 1px solid transparent;
-      padding: 0px 4px;
+      padding: 0 4px 0 2px;
       margin: 0;
+      height: 22px;
       color: #666;
+      line-height: 13px;
+      text-align: center;
+
+      i.icon-caret-down {
+        margin-left: -2px;
+      }
     }
 
     &.has-drop:hover {
@@ -238,5 +275,19 @@ ol.category-breadcrumb {
     clear: both;
   }
 
+  .category-menu {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: absolute;
+    border: 1px solid #ccc;
+    background-color: white;
+    width: 200px;
+    height: 200px;
+    padding: 8px 5px 0 7px;
+    z-index: 100;
 
+    div {
+      margin-bottom: 10px;
+    }
+  }
 }