Big component restructure/overhaul

ember/app/components/button-item.js

@@ -1,18 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.View.extend({
-	title: '',
-	icon: '',
-	class: '',
-	action: null,
-
-	tagName: 'a',
-	classNames: ['btn'],
-	classNameBindings: ['class', 'disabled'],
-
-	layout: Ember.Handlebars.compile('{{#if view.icon}}{{fa-icon view.icon class="fa-fw"}} {{/if}}<span class="label">{{view.title}}</span>'),
-
-	click: function() {
-		this.action();
-	}
-});

ember/app/components/discussion-post.js

@@ -1,55 +0,0 @@
-import Ember from 'ember';
-
-import Menu from '../utils/menu';
-import MenuItem from '../components/menu-item';
-
-export default Ember.View.extend({
-	tagName: 'article',
-	templateName: 'discussion-post',
-
-	controls: null,
-
-	contentComponent: function() {
-		return 'post-type-'+this.get('post.type');
-	}.property('post.type'),
-
-	classNames: ['post'],
-	classNameBindings: ['post.deleted', 'post.edited'],
-
-	construct: function() {
-		this.set('controls', Menu.create());
-
-		var post = this.get('post');
-
-		if (post.get('deleted')) {
-			this.addControl('restore', 'Restore', 'reply', 'canEdit');
-			this.addControl('delete', 'Delete', 'times', 'canDelete');
-		} else {
-			if (post.get('type') == 'comment') {
-				this.addControl('edit', 'Edit', 'pencil', 'canEdit');
-				this.addControl('hide', 'Delete', 'times', 'canEdit');
-			} else {
-				this.addControl('delete', 'Delete', 'times', 'canDelete');
-			}
-		}
-	}.on('init'),
-
-	didInsertElement: function() {
-		this.$().hide().fadeIn('slow');
-	},
-
-	addControl: function(tag, title, icon, permissionAttribute) {
-		if (permissionAttribute && ! this.get('post').get(permissionAttribute)) {
-			return;
-		}
-
-		var self = this;
-		var action = function(post) {
-			self.get('controller').send(actionName, post);
-		};
-
-		var item = MenuItem.extend({title: title, icon: icon, action: action});
-		this.get('controls').addItem(tag, item);
-	}
-
-});

ember/app/components/discussions/discussion-listing.js

@@ -1,12 +1,12 @@
-
 import Ember from 'ember';
-import Menu from '../utils/menu';
-import MenuItem from '../components/menu-item';
 
-export default Ember.View.extend({
+import TaggedArray from '../../utils/tagged-array';
+import ActionButton from '../ui/controls/action-button';
+
+export default Ember.Component.extend({
 
 	_init: function() {
-		this.set('controls', Menu.create());
+		// this.set('controls', Menu.create());
 	}.on('init'),
 
 	tagName: 'li',
@@ -18,7 +18,7 @@ export default Ember.View.extend({
 		'discussion.following:following',
 		'active'
 	],
-	templateName: 'discussions-result',
+	templateName: 'components/discussions/discussion-listing',
 
 	active: function() {
 		return this.get('childViews').anyBy('active');

ember/app/components/discussions/post.js

@@ -0,0 +1,55 @@
+import Ember from 'ember';
+
+import TaggedArray from '../../utils/tagged-array';
+import ActionButton from '../ui/controls/action-button';
+
+export default Ember.Component.extend({
+	tagName: 'article',
+	templateName: 'components/discussions/post',
+
+	// controls: null,
+
+	contentComponent: function() {
+		return 'discussions/post-'+this.get('post.type');
+	}.property('post.type'),
+
+	classNames: ['post'],
+	classNameBindings: ['post.deleted', 'post.edited'],
+
+	construct: function() {
+		// this.set('controls', Menu.create());
+
+		// var post = this.get('post');
+
+		// if (post.get('deleted')) {
+		// 	this.addControl('restore', 'Restore', 'reply', 'canEdit');
+		// 	this.addControl('delete', 'Delete', 'times', 'canDelete');
+		// } else {
+		// 	if (post.get('type') == 'comment') {
+		// 		this.addControl('edit', 'Edit', 'pencil', 'canEdit');
+		// 		this.addControl('hide', 'Delete', 'times', 'canEdit');
+		// 	} else {
+		// 		this.addControl('delete', 'Delete', 'times', 'canDelete');
+		// 	}
+		// }
+	}.on('init'),
+
+	didInsertElement: function() {
+		this.$().hide().fadeIn('slow');
+	},
+
+	addControl: function(tag, title, icon, permissionAttribute) {
+		if (permissionAttribute && ! this.get('post').get(permissionAttribute)) {
+			return;
+		}
+
+		var self = this;
+		var action = function(post) {
+			self.get('controller').send(actionName, post);
+		};
+
+		var item = MenuItem.extend({title: title, icon: icon, action: action});
+		this.get('controls').addItem(tag, item);
+	}
+
+});

ember/app/components/discussions/stream-item.js

@@ -4,7 +4,7 @@ import Ember from 'ember';
 // single item may represent a single post, or it may represent a gap of many
 // posts which have not been loaded.
 
-export default Ember.View.extend({
+export default Ember.Component.extend({
 	classNames: ['item'],
 	classNameBindings: ['item.gap:gap', 'loading', 'direction'],
 	attributeBindings: [

ember/app/components/discussions/stream-scrollbar.js

@@ -1,8 +1,7 @@
 import Ember from 'ember';
 
-import MenuItem from '../components/menu-item';
-import Scrollbar from '../utils/scrollbar';
-import PostStreamMixin from '../mixins/post-stream';
+import Scrollbar from '../../utils/scrollbar';
+import PostStreamMixin from '../../mixins/post-stream';
 
 export default Ember.View.extend(PostStreamMixin, {
 
@@ -10,7 +9,7 @@ export default Ember.View.extend(PostStreamMixin, {
     @property templateName
     @type String
   */
-  templateName: 'components/discussion-scrollbar',
+  templateName: 'components/discussions/stream-scrollbar',
   classNames: ['scrubber', 'discussion-scrubber'],
 
   // An object which represents/ecapsulates the scrollbar.

ember/app/components/dropdown-button.js

@@ -1,37 +0,0 @@
-import Ember from 'ember';
-
-import MenuItemContainer from '../components/menu-item-container';
-
-export default Ember.Component.extend({
-    items: null, // NamedContainerView/Menu
-    layoutName: 'components/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'),
-
-    containedItems: function() {
-        var contained = [];
-        this.get('items').forEach(function(item) {
-            if (item.tagName != 'li') {
-                contained.push(MenuItemContainer.extend({
-                    item: item
-                }));
-            } else {
-                contained.push(item);
-            }
-        });
-        return contained;
-    }.property('items.[]')
-});

ember/app/components/dropdown-split.js

@@ -1,40 +0,0 @@
-import Ember from 'ember';
-
-import MenuItemContainer from '../components/menu-item-container';
-
-export default Ember.Component.extend({
-    items: null, // NamedContainerView/Menu
-    layoutName: 'components/dropdown-split',
-    classNames: ['dropdown', 'dropdown-split', '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'),
-
-    containedItems: function() {
-        var contained = [];
-        this.get('items').forEach(function(item) {
-            if (item.tagName != 'li') {
-                contained.push(MenuItemContainer.extend({
-                    item: item
-                }));
-            } else {
-                contained.push(item);
-            }
-        });
-        return contained;
-    }.property('items.[]')
-});

ember/app/components/item-collection.js

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

ember/app/components/menu-list.js

@@ -1,6 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    tagName: 'ul',
-    layoutName: 'components/menu-list'
-});

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

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-var MenuItem = Ember.Component.extend({
+export default Ember.Component.extend({
     title: '',
     icon: '',
     className: '',
@@ -8,6 +8,8 @@ var MenuItem = Ember.Component.extend({
     divider: false,
     active: false,
 
+    classNames: ['btn', 'btn-default'],
+
     tagName: 'a',
     attributeBindings: ['href'],
     classNameBindings: ['className'],
@@ -19,14 +21,4 @@ var MenuItem = Ember.Component.extend({
         // this.sendAction('action');
         this.get('action')();
     }
-});
-
-MenuItem.reopenClass({
-    separator: function() {
-        return this.create({
-            divider: true
-        });
-    }
-})
-
-export default MenuItem;
+});

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

@@ -1,10 +1,8 @@
 import Ember from 'ember';
 
-import Menu from '../utils/menu';
-
 export default Ember.Component.extend({
     items: [],
-    layoutName: 'components/dropdown-select',
+    layoutName: 'components/ui/controls/dropdown-select',
     classNames: ['dropdown', 'dropdown-select', 'btn-group'],
     classNameBindings: ['itemCountClass'],
 
@@ -24,7 +22,12 @@ export default Ember.Component.extend({
         return 'item-count-'+this.get('items.length');
     }.property('items.length'),
 
-    currentItem: function() {
+    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

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

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

@@ -1,9 +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

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

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

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