Big component restructure/overhaul

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

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

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

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    items: null, // TaggedArray
+    layoutName: 'components/ui/controls/dropdown-button',
+    classNames: ['dropdown', 'btn-group'],
+    classNameBindings: ['itemCountClass'],
+
+    title: 'Controls',
+    icon: 'ellipsis-v',
+    buttonClass: 'btn-default',
+    menuClass: 'pull-right',
+
+    dropdownMenuClass: function() {
+    	return 'dropdown-menu '+this.get('menuClass');
+    }.property('menuClass'),
+
+    itemCountClass: function() {
+        return 'item-count-'+this.get('items.length');
+    }.property('items.length')    
+});

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

@@ -0,0 +1,33 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    items: [],
+    layoutName: 'components/ui/controls/dropdown-select',
+    classNames: ['dropdown', 'dropdown-select', 'btn-group'],
+    classNameBindings: ['itemCountClass'],
+
+    buttonClass: 'btn-default',
+    menuClass: 'pull-right',
+    icon: 'ellipsis-v',
+
+    mainButtonClass: function() {
+    	return 'btn '+this.get('buttonClass');
+    }.property('buttonClass'),
+
+    dropdownMenuClass: function() {
+    	return 'dropdown-menu '+this.get('menuClass');
+    }.property('menuClass'),
+
+    itemCountClass: function() {
+        return 'item-count-'+this.get('items.length');
+    }.property('items.length'),
+
+    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

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+import DropdownButton from './dropdown-button';
+
+export default DropdownButton.extend({
+    layoutName: 'components/ui/controls/dropdown-split',
+    classNames: ['dropdown', 'dropdown-split', 'btn-group'],
+
+    mainButtonClass: function() {
+    	return 'btn '+this.get('buttonClass');
+    }.property('buttonClass'),
+
+    firstItem: function() {
+        return this.get('items').objectAt(0);
+    }.property('items.[]')
+});

ember/app/components/ui/controls/item-list.js

@@ -0,0 +1,20 @@
+import Ember from 'ember';
+
+import ComponentItem from '../items/component-item';
+
+export default Ember.Component.extend({
+    tagName: 'ul',
+    layoutName: 'components/ui/controls/item-list',
+
+    listItems: function() {
+        if (!this.get('items')) return [];
+        var listItems = [];
+        this.get('items').forEach(function(item) {
+            if (item.tagName != 'li') {
+                item = ComponentItem.extend({component: item});
+            }
+            listItems.push(item);
+        });
+        return listItems;
+    }.property('items.[]')
+});

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

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

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

@@ -0,0 +1,38 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    classNames: ['search-input'],
+    classNameBindings: ['active', 'value:clearable'],
+
+    didInsertElement: function() {
+        var self = this;
+        this.$().find('input').on('keydown', function(e) {
+            if (e.which == 27) {
+                self.clear();
+            }
+        });
+        this.$().find('.clear').on('mousedown', function(e) {
+            e.preventDefault();
+        }).on('click', function(e) {
+            e.preventDefault();
+            self.clear();
+        })
+    },
+
+    clear: function() {
+        this.set('value', '');
+        this.sendAction('action', '');
+        this.$().find('input').focus();
+    },
+
+    willDestroyElement: function() {
+        this.$().find('input').off('keydown');
+        this.$().find('.clear').off('mousedown click');
+    },
+
+    actions: {
+        search: function() {
+            this.sendAction('action', this.get('value'));
+        }
+    }
+});

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

@@ -0,0 +1,7 @@
+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"}}')
+});

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

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    tagName: 'li',
+    layoutName: 'components/ui/items/component-item'
+});

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

@@ -0,0 +1,37 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+	icon: '',
+	title: '',
+	action: null,
+	badge: '',
+
+	tagName: 'li',
+	classNameBindings: ['active'],
+    active: function() {
+        return !! this.get('childViews').anyBy('active');
+    }.property('childViews.@each.active'),
+
+    // init: function() {
+    //     var params = this.params;
+    //     if (params[params.length - 1].queryParams) {
+    //         this.queryParamsObject = {values: params.pop().queryParams};
+    //     }
+
+    //     this._super();
+    // },
+
+	layout: function() {
+        return Ember.Handlebars.compile('{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+' {{title}} <span class="count">{{badge}}</span>{{/link-to}}');
+    }.property('linkTo', 'iconTemplate'),
+
+    iconTemplate: function() {
+        return '{{fa-icon icon}}';
+    }.property(),
+
+    actions: {
+        main: function() {
+            this.get('action')();
+        }
+    }
+});

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

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    tagName: 'li',
+    classNames: ['divider']
+});