Implement redesign, refactor everything

- Write CSS for everything, update templates.
- Refactor discussion view. Stream is split into two components
(content and scrubber) which have their own responsibilities.
- Extract pane functionality into a mixin.
- Implement global “back button” system. You give a “paneable” target
to the application controller, the back button will modulate its
pane-related properties as necessary, and call an action when the
button is clicked.
- Extract welcome-hero into its own component.
- Lots of other general improvements/refactoring. The code is quite
well-commented so take a look!

ember/app/components/ui/controls/action-button.js

@@ -1,24 +1,28 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-    title: '',
+    label: '',
     icon: '',
     className: '',
     action: null,
     divider: false,
     active: false,
 
-    classNames: ['btn', 'btn-default'],
+    classNames: [],
 
     tagName: 'a',
-    attributeBindings: ['href'],
+    attributeBindings: ['href', 'title'],
     classNameBindings: ['className'],
     href: '#',
-    layout: Ember.Handlebars.compile('{{#if icon}}{{fa-icon icon class="fa-fw"}} {{/if}}<span>{{title}}</span>'),
+    layout: Ember.Handlebars.compile('{{#if icon}}{{fa-icon icon class="fa-fw icon-glyph"}} {{/if}}<span>{{label}}</span>'),
 
     click: function(e) {
         e.preventDefault();
-        // this.sendAction('action');
-        this.get('action')();
+        var action = this.get('action');
+        if (typeof action == 'string') {
+            this.sendAction('action');
+        } else if (typeof action == 'function') {
+            action();
+        }
     }
 });

ember/app/components/ui/controls/dropdown-button.js

@@ -4,12 +4,12 @@ export default Ember.Component.extend({
     items: null, // TaggedArray
     layoutName: 'components/ui/controls/dropdown-button',
     classNames: ['dropdown', 'btn-group'],
-    classNameBindings: ['itemCountClass'],
+    classNameBindings: ['itemCountClass', 'class'],
 
     title: 'Controls',
     icon: 'ellipsis-v',
-    buttonClass: 'btn-default',
-    menuClass: 'pull-right',
+    buttonClass: 'btn btn-default',
+    menuClass: '',
 
     dropdownMenuClass: function() {
     	return 'dropdown-menu '+this.get('menuClass');
@@ -17,5 +17,11 @@ export default Ember.Component.extend({
 
     itemCountClass: function() {
         return 'item-count-'+this.get('items.length');
-    }.property('items.length')    
+    }.property('items.length'),
+
+    actions: {
+        buttonClick: function() {
+            this.sendAction('buttonClick');
+        }
+    }
 });

ember/app/components/ui/controls/dropdown-select.js

@@ -4,10 +4,10 @@ export default Ember.Component.extend({
     items: [],
     layoutName: 'components/ui/controls/dropdown-select',
     classNames: ['dropdown', 'dropdown-select', 'btn-group'],
-    classNameBindings: ['itemCountClass'],
+    classNameBindings: ['itemCountClass', 'class'],
 
-    buttonClass: 'btn-default',
-    menuClass: 'pull-right',
+    buttonClass: 'btn btn-default',
+    menuClass: '',
     icon: 'ellipsis-v',
 
     mainButtonClass: function() {
@@ -25,9 +25,4 @@ export default Ember.Component.extend({
     activeItem: function() {
         return this.get('menu.childViews').findBy('active');
     }.property('menu.childViews.@each.active')
-
-}).reopenClass({
-    createWithItems: function(items) {
-        return this.create({items: items});
-    }
-});
+});

ember/app/components/ui/controls/dropdown-split.js

@@ -5,6 +5,7 @@ import DropdownButton from './dropdown-button';
 export default DropdownButton.extend({
     layoutName: 'components/ui/controls/dropdown-split',
     classNames: ['dropdown', 'dropdown-split', 'btn-group'],
+    menuClass: 'pull-right',
 
     mainButtonClass: function() {
     	return 'btn '+this.get('buttonClass');

ember/app/components/ui/controls/loading-indicator.js

@@ -1,9 +1,10 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-	classNames: ['loading'],
+	classNames: ['loading-indicator'],
 
 	layout: Ember.Handlebars.compile(' '),
+	size: 'small',
 
 	didInsertElement: function() {
 		this.$().spin(this.get('size'));

ember/app/components/ui/controls/search-input.js

@@ -4,6 +4,8 @@ export default Ember.Component.extend({
     classNames: ['search-input'],
     classNameBindings: ['active', 'value:clearable'],
 
+    layoutName: 'components/ui/controls/search-input',
+
     didInsertElement: function() {
         var self = this;
         this.$().find('input').on('keydown', function(e) {
@@ -21,7 +23,7 @@ export default Ember.Component.extend({
 
     clear: function() {
         this.set('value', '');
-        this.sendAction('action', '');
+        this.send('search');
         this.$().find('input').focus();
     },
 
@@ -32,7 +34,7 @@ export default Ember.Component.extend({
 
     actions: {
         search: function() {
-            this.sendAction('action', this.get('value'));
+            this.get('action')(this.get('value'));
         }
     }
 });

ember/app/components/ui/controls/select-input.js

@@ -2,6 +2,8 @@ import Ember from 'ember';
 
 export default Ember.View.extend({
 	tagName: 'span',
-	classNames: ['select'],
-	layout: Ember.Handlebars.compile('{{view "select" content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value}} {{fa-icon "sort"}}')
+	classNames: ['select-input'],
+	optionValuePath: 'content',
+	optionLabelPath: 'content',
+	layout: Ember.Handlebars.compile('{{view "select" content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value class="form-control"}} {{fa-icon "sort"}}')
 });

ember/app/components/ui/items/nav-item.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
 	icon: '',
-	title: '',
+	label: '',
 	action: null,
 	badge: '',
 
@@ -22,7 +22,7 @@ export default Ember.Component.extend({
     // },
 
 	layout: function() {
-        return Ember.Handlebars.compile('{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+' {{title}} <span class="count">{{badge}}</span>{{/link-to}}');
+        return Ember.Handlebars.compile('{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+' {{label}} <span class="count">{{badge}}</span>{{/link-to}}');
     }.property('linkTo', 'iconTemplate'),
 
     iconTemplate: function() {