Working on responsive dropdown menu components.

ember/app/components/discussion-scrollbar.js

@@ -10,7 +10,7 @@ export default Ember.View.extend(PostStreamMixin, {
     @property templateName
     @type String
   */
-  templateName: 'discussion-scrollbar',
+  templateName: 'components/discussion-scrollbar',
   classNames: ['scrubber', 'discussion-scrubber'],
 
   // An object which represents/ecapsulates the scrollbar.
@@ -28,7 +28,7 @@ export default Ember.View.extend(PostStreamMixin, {
 
   windowWasResized: function(event) {
     var view = event.data.view;
-    view.scrollbar.$.height($('#sidebar-content').height() + $('#sidebar-content').offset().top - view.scrollbar.$.offset().top - 80);
+    // view.scrollbar.$.height($('#sidebar-content').height() + $('#sidebar-content').offset().top - view.scrollbar.$.offset().top - 80);
     view.scrollbar.update();
   },
 

ember/app/components/dropdown-button.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+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')
+});

ember/app/components/dropdown-split.js

@@ -0,0 +1,24 @@
+import Ember from 'ember';
+
+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')
+});

ember/app/components/menu-split.js

@@ -1,15 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    items: null, // NamedContainerView/Menu
-    layoutName: 'components/menu-split',
-    show: 1,
-
-    visibleItems: function() {
-        return this.get('items').slice(0, this.get('show'));
-    }.property('items'), 
-
-    hiddenItems: function() {
-        return this.get('items').slice(this.get('show'));
-    }.property('items'), 
-});

ember/app/templates/components/dropdown-button.hbs

@@ -0,0 +1,8 @@
+{{#if items}}
+    <button {{bind-attr class=":dropdown-toggle :btn buttonClass"}}>
+        {{fa-icon icon class="icon-glyph"}}
+    	<span class="label">{{title}}</span>
+        {{fa-icon "caret-down" class="icon-caret"}}
+    </button>
+    {{menu-list items=items class=dropdownMenuClass}}
+{{/if}}

ember/app/templates/components/dropdown-split.hbs

@@ -0,0 +1,8 @@
+{{#if items}}
+    {{view items.firstItem class=mainButtonClass}}
+    <button {{bind-attr class=":dropdown-toggle :btn buttonClass"}}>
+        {{fa-icon "caret-down" class="icon-caret"}}
+        {{fa-icon icon class="icon-glyph"}}
+    </button>
+    {{menu-list items=items class=dropdownMenuClass}}
+{{/if}}

ember/app/templates/components/menu-split.hbs

@@ -1,13 +0,0 @@
-{{#if items}}
-    <div class="dropdown">
-        <div class="btn-group btn-group-suffix">
-            {{#each item in visibleItems}}
-                {{view item class="btn btn-default"}}
-            {{/each}}
-            {{#if hiddenItems}}
-                <button data-toggle="dropdown" class="dropdown-toggle btn btn-default">{{fa-icon "caret-down"}}</button>
-                {{menu-list items=hiddenItems class="dropdown-menu pull-right"}}
-            {{/if}}
-        </div>
-    </div>
-{{/if}}

ember/app/templates/discussion.hbs

@@ -2,6 +2,10 @@
 	{{partial "partials/discussion-header"}}
 </header>
 
+<nav class="discussion-nav">
+	{{view view.sidebar viewName="sidebar"}}
+</nav>
+
 <section class="items posts">
 {{#each item in postStream}}
 
@@ -10,10 +14,4 @@
 	{{/discussion-item}}
 
 {{/each}}
-</section>
-
-{{#if postStream.lastLoaded}}
-	<footer class="page-footer discussion-footer">
-		{{menu-list items=view.footerControls class="list-inline"}}
-	</footer>
-{{/if}}
+</section>

ember/app/utils/named-container-view.js

@@ -48,15 +48,7 @@ export default Ember.ArrayProxy.extend({
 
 	firstItem: function() {
     	return this.objectAt(0);
-    }.property(),
-
-    secondItem: function() {
-        return this.objectAt(1);
-    }.property(),
-
-    remainingItems: function() {
-    	return this.slice(2);
-    }.property(),
+    }.property('content.@each'),
 
     getItem: function(name) {
     	return this.get('namedViews').get(name);

ember/app/views/discussion.js

@@ -1,11 +1,17 @@
 import Ember from 'ember';
 
+import NamedContainerView from '../utils/named-container-view';
 import Menu from '../utils/menu';
 import MenuItem from '../components/menu-item';
+import DropdownSplit from '../components/dropdown-split';
+import DropdownButton from '../components/dropdown-button';
+import DiscussionScrollbar from '../components/discussion-scrollbar';
 import PostStreamMixin from '../mixins/post-stream';
 
 export default Ember.View.extend(Ember.Evented, PostStreamMixin, {
 
+    sidebar: Ember.ContainerView,
+
     // Set up a new menu view that will contain controls to be shown in the
     // footer. The template will only render these controls if the last post is
     // showing.
@@ -23,11 +29,8 @@ export default Ember.View.extend(Ember.Evented, PostStreamMixin, {
 
     didInsertElement: function() {
 
-        this.set('footerControls', Menu.create());
-
-        // We've just inserted the discussion view. Let's start off by
-        // populating the footer controls menu object.
-        this.trigger('populateControls', this.get('footerControls'));
+        // We've just inserted the discussion view.
+        this.trigger('populateSidebar', this.get('sidebar'));
 
         // Whenever the window's scroll position changes, we want to check to
         // see if any terminal 'gaps' are in the viewport and trigger their
@@ -56,13 +59,26 @@ export default Ember.View.extend(Ember.Evented, PostStreamMixin, {
         controller.off('loadedIndex', this, this.loadedIndex);
     },
 
-    // By default, we just populate the footer controls with a 'reply' button.
-    addDefaultControls: function(controls) {
+    setupSidebar: function(sidebar) {
+        this.set('controls', Menu.create());
+        this.trigger('populateControls', this.get('controls'));
+        sidebar.pushObject(DropdownSplit.create({
+            items: this.get('controls'),
+            icon: 'reply',
+            buttonClass: 'btn-primary',
+            menuClass: 'pull-right'
+        }));
+
+        sidebar.pushObject(DropdownButton.create({items: this.get('controls')}));
+
+        sidebar.pushObject(DiscussionScrollbar.create());
+    }.on('populateSidebar'),
+
+    setupControls: function(controls) {
         var view = this;
         var ReplyItem = MenuItem.extend({
             title: 'Reply',
             icon: 'reply',
-            className: 'btn btn-primary',
             classNameBindings: ['className', 'replying:disabled'],
             replying: function() {
                 return this.get('parentController.controllers.composer.showing');