From 161f37e2107e32c386cb725e87c1af28c6945689 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Sat, 3 Jan 2015 12:26:14 +1030 Subject: [PATCH] Working on interface components. --- .../core/ember/app/components/button-item.js | 2 +- .../app/components/discussions-list-item.js | 18 +++---- .../ember/app/components/dropdown-button.js | 18 ++++++- .../ember/app/components/dropdown-select.js | 30 ++++++++++++ .../ember/app/components/dropdown-split.js | 18 ++++++- .../app/components/menu-item-container.js | 6 +++ .../app/components/menu-item-separator.js | 3 +- .../core/ember/app/components/menu-item.js | 1 + .../core/ember/app/components/menu-list.js | 2 +- .../core/ember/app/components/nav-item.js | 19 ++++--- .../core/ember/app/components/select-input.js | 2 +- .../templates/components/dropdown-button.hbs | 4 +- .../templates/components/dropdown-select.hbs | 7 +++ .../templates/components/dropdown-split.hbs | 4 +- .../components/menu-item-container.hbs | 1 + .../app/templates/components/menu-list.hbs | 2 +- .../core/ember/app/templates/discussions.hbs | 6 +-- framework/core/ember/app/utils/menu.js | 21 +------- .../ember/app/utils/named-container-view.js | 3 +- framework/core/ember/app/views/discussions.js | 49 +++++++++++++++++++ 20 files changed, 161 insertions(+), 55 deletions(-) create mode 100644 framework/core/ember/app/components/dropdown-select.js create mode 100644 framework/core/ember/app/components/menu-item-container.js create mode 100644 framework/core/ember/app/templates/components/dropdown-select.hbs create mode 100644 framework/core/ember/app/templates/components/menu-item-container.hbs diff --git a/framework/core/ember/app/components/button-item.js b/framework/core/ember/app/components/button-item.js index 687ac852f..ed81a892a 100644 --- a/framework/core/ember/app/components/button-item.js +++ b/framework/core/ember/app/components/button-item.js @@ -10,7 +10,7 @@ export default Ember.View.extend({ classNames: ['btn'], classNameBindings: ['class', 'disabled'], - layout: Ember.Handlebars.compile('{{#if view.icon}}{{fa-icon view.icon class="fa-fw"}} {{/if}}{{view.title}}'), + layout: Ember.Handlebars.compile('{{#if view.icon}}{{fa-icon view.icon class="fa-fw"}} {{/if}}{{view.title}}'), click: function() { this.action(); diff --git a/framework/core/ember/app/components/discussions-list-item.js b/framework/core/ember/app/components/discussions-list-item.js index 60c3241bc..f9be29fc2 100755 --- a/framework/core/ember/app/components/discussions-list-item.js +++ b/framework/core/ember/app/components/discussions-list-item.js @@ -131,18 +131,18 @@ export default Ember.View.extend({ var discussion = this.get('discussion'); - var controls = this.get('controls'); + // var controls = this.get('controls'); - controls.addItem('sticky', MenuItem.extend({title: 'Sticky', icon: 'thumb-tack', action: 'sticky'})); - controls.addItem('lock', MenuItem.extend({title: 'Lock', icon: 'lock', action: 'lock'})); + // controls.addItem('sticky', MenuItem.extend({title: 'Sticky', icon: 'thumb-tack', action: 'sticky'})); + // controls.addItem('lock', MenuItem.extend({title: 'Lock', icon: 'lock', action: 'lock'})); - controls.addSeparator(); + // controls.addSeparator(); - controls.addItem('delete', MenuItem.extend({title: 'Delete', icon: 'times', className: 'delete', action: function() { - // this.get('controller').send('delete', discussion); - var discussion = view.$().slideUp().find('.discussion'); - discussion.css('position', 'relative').animate({left: -discussion.width()}); - }})); + // controls.addItem('delete', MenuItem.extend({title: 'Delete', icon: 'times', className: 'delete', action: function() { + // // this.get('controller').send('delete', discussion); + // var discussion = view.$().slideUp().find('.discussion'); + // discussion.css('position', 'relative').animate({left: -discussion.width()}); + // }})); }, actions: { diff --git a/framework/core/ember/app/components/dropdown-button.js b/framework/core/ember/app/components/dropdown-button.js index 9b6b1a3d1..bbbf25034 100644 --- a/framework/core/ember/app/components/dropdown-button.js +++ b/framework/core/ember/app/components/dropdown-button.js @@ -1,5 +1,7 @@ import Ember from 'ember'; +import MenuItemContainer from '../components/menu-item-container'; + export default Ember.Component.extend({ items: null, // NamedContainerView/Menu layoutName: 'components/dropdown-button', @@ -17,5 +19,19 @@ export default Ember.Component.extend({ itemCountClass: function() { return 'item-count-'+this.get('items.length'); - }.property('items') + }.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.[]') }); diff --git a/framework/core/ember/app/components/dropdown-select.js b/framework/core/ember/app/components/dropdown-select.js new file mode 100644 index 000000000..779c54120 --- /dev/null +++ b/framework/core/ember/app/components/dropdown-select.js @@ -0,0 +1,30 @@ +import Ember from 'ember'; + +import Menu from '../utils/menu'; + +export default Ember.Component.extend({ + items: [], + layoutName: 'components/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'), + + currentItem: function() { + return this.get('menu.childViews').findBy('active'); + }.property('menu.childViews.@each.active') +}); diff --git a/framework/core/ember/app/components/dropdown-split.js b/framework/core/ember/app/components/dropdown-split.js index 13b9cf5cc..7465d159d 100644 --- a/framework/core/ember/app/components/dropdown-split.js +++ b/framework/core/ember/app/components/dropdown-split.js @@ -1,5 +1,7 @@ import Ember from 'ember'; +import MenuItemContainer from '../components/menu-item-container'; + export default Ember.Component.extend({ items: null, // NamedContainerView/Menu layoutName: 'components/dropdown-split', @@ -20,5 +22,19 @@ export default Ember.Component.extend({ itemCountClass: function() { return 'item-count-'+this.get('items.length'); - }.property('items') + }.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.[]') }); diff --git a/framework/core/ember/app/components/menu-item-container.js b/framework/core/ember/app/components/menu-item-container.js new file mode 100644 index 000000000..bb7e0d3bd --- /dev/null +++ b/framework/core/ember/app/components/menu-item-container.js @@ -0,0 +1,6 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'li', + layoutName: 'components/menu-item-container' +}); diff --git a/framework/core/ember/app/components/menu-item-separator.js b/framework/core/ember/app/components/menu-item-separator.js index ec7c4932c..4845311e3 100644 --- a/framework/core/ember/app/components/menu-item-separator.js +++ b/framework/core/ember/app/components/menu-item-separator.js @@ -1,5 +1,6 @@ import Ember from 'ember'; export default Ember.Component.extend({ - liClass: 'divider' + liClass: 'divider', + active: false }); diff --git a/framework/core/ember/app/components/menu-item.js b/framework/core/ember/app/components/menu-item.js index b80d608eb..f96caadae 100644 --- a/framework/core/ember/app/components/menu-item.js +++ b/framework/core/ember/app/components/menu-item.js @@ -6,6 +6,7 @@ var MenuItem = Ember.Component.extend({ className: '', action: null, divider: false, + active: false, tagName: 'a', attributeBindings: ['href'], diff --git a/framework/core/ember/app/components/menu-list.js b/framework/core/ember/app/components/menu-list.js index c059697a4..da93e4c22 100644 --- a/framework/core/ember/app/components/menu-list.js +++ b/framework/core/ember/app/components/menu-list.js @@ -2,5 +2,5 @@ import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'ul', - layoutName: 'components/menu-list', + layoutName: 'components/menu-list' }); diff --git a/framework/core/ember/app/components/nav-item.js b/framework/core/ember/app/components/nav-item.js index 6528dffd8..76d585df9 100644 --- a/framework/core/ember/app/components/nav-item.js +++ b/framework/core/ember/app/components/nav-item.js @@ -5,18 +5,24 @@ export default Ember.Component.extend({ title: '', action: null, badge: '', - badgeAction: null, - // active: false, tagName: 'li', classNameBindings: ['active'], active: function() { - return this.get('childViews').anyBy('active'); + 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('{{badge}}\ - {{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+'{{title}}{{/link-to}}'); + return Ember.Handlebars.compile('{{#link-to '+this.get('linkTo')+'}}'+this.get('iconTemplate')+' {{title}} {{badge}}{{/link-to}}'); }.property('linkTo', 'iconTemplate'), iconTemplate: function() { @@ -26,9 +32,6 @@ export default Ember.Component.extend({ actions: { main: function() { this.get('action')(); - }, - badge: function() { - this.get('badgeAction')(); } } }); diff --git a/framework/core/ember/app/components/select-input.js b/framework/core/ember/app/components/select-input.js index d01c5e7ff..2800009a2 100644 --- a/framework/core/ember/app/components/select-input.js +++ b/framework/core/ember/app/components/select-input.js @@ -4,6 +4,6 @@ export default Ember.View.extend({ tagName: 'span', classNames: ['select'], - layout: Ember.Handlebars.compile('{{view Ember.Select content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value}} {{fa-icon "sort"}}') + layout: Ember.Handlebars.compile('{{view "select" content=view.content optionValuePath=view.optionValuePath optionLabelPath=view.optionLabelPath value=view.value}} {{fa-icon "sort"}}') }); diff --git a/framework/core/ember/app/templates/components/dropdown-button.hbs b/framework/core/ember/app/templates/components/dropdown-button.hbs index de9494ba0..166c04c1c 100644 --- a/framework/core/ember/app/templates/components/dropdown-button.hbs +++ b/framework/core/ember/app/templates/components/dropdown-button.hbs @@ -1,8 +1,8 @@ {{#if items}} - - {{menu-list items=items class=dropdownMenuClass}} + {{menu-list items=containedItems class=dropdownMenuClass}} {{/if}} \ No newline at end of file diff --git a/framework/core/ember/app/templates/components/dropdown-select.hbs b/framework/core/ember/app/templates/components/dropdown-select.hbs new file mode 100644 index 000000000..c9edd6eaa --- /dev/null +++ b/framework/core/ember/app/templates/components/dropdown-select.hbs @@ -0,0 +1,7 @@ +{{#if items}} + + {{menu-list items=items class=dropdownMenuClass viewName="menu"}} +{{/if}} \ No newline at end of file diff --git a/framework/core/ember/app/templates/components/dropdown-split.hbs b/framework/core/ember/app/templates/components/dropdown-split.hbs index 32931e96e..3175accb3 100644 --- a/framework/core/ember/app/templates/components/dropdown-split.hbs +++ b/framework/core/ember/app/templates/components/dropdown-split.hbs @@ -1,8 +1,8 @@ {{#if items}} {{view items.firstItem class=mainButtonClass}} - - {{menu-list items=items class=dropdownMenuClass}} + {{menu-list items=containedItems class=dropdownMenuClass}} {{/if}} \ No newline at end of file diff --git a/framework/core/ember/app/templates/components/menu-item-container.hbs b/framework/core/ember/app/templates/components/menu-item-container.hbs new file mode 100644 index 000000000..6c76e440e --- /dev/null +++ b/framework/core/ember/app/templates/components/menu-item-container.hbs @@ -0,0 +1 @@ +{{view item}} \ No newline at end of file diff --git a/framework/core/ember/app/templates/components/menu-list.hbs b/framework/core/ember/app/templates/components/menu-list.hbs index 40dd5f6ea..0eddfdb34 100644 --- a/framework/core/ember/app/templates/components/menu-list.hbs +++ b/framework/core/ember/app/templates/components/menu-list.hbs @@ -1,3 +1,3 @@ {{#each item in items}} -
  • {{view item}}
    • + {{view item}} {{/each}} diff --git a/framework/core/ember/app/templates/discussions.hbs b/framework/core/ember/app/templates/discussions.hbs index cc0ce8883..c18e15832 100644 --- a/framework/core/ember/app/templates/discussions.hbs +++ b/framework/core/ember/app/templates/discussions.hbs @@ -1,11 +1,7 @@
    diff --git a/framework/core/ember/app/utils/menu.js b/framework/core/ember/app/utils/menu.js index ec1b655fb..533eef4da 100644 --- a/framework/core/ember/app/utils/menu.js +++ b/framework/core/ember/app/utils/menu.js @@ -5,29 +5,10 @@ import MenuItemSeparator from '../components/menu-item-separator'; export default NamedContainerView.extend({ - tagName: 'ul', - - active: null, - i: 1, addSeparator: function(index) { var item = MenuItemSeparator; this.addItem('separator'+(this.i++), item, index); - }, - - activeChanged: function() { - var active = this.get('active'); - if (typeof active != 'array') { - active = [active]; - } - - var namedViews = this.get('namedViews'); - var view; - for (var name in namedViews) { - if (namedViews.hasOwnProperty(name) && (view = namedViews.get(name))) { - view.set('active', active.indexOf(name) !== -1); - } - } - }.observes('active') + } }); diff --git a/framework/core/ember/app/utils/named-container-view.js b/framework/core/ember/app/utils/named-container-view.js index 219ffb922..ca1f7b9b3 100644 --- a/framework/core/ember/app/utils/named-container-view.js +++ b/framework/core/ember/app/utils/named-container-view.js @@ -3,11 +3,10 @@ import Ember from 'ember'; export default Ember.ArrayProxy.extend({ content: null, - namedViews: null, init: function() { - this.set('content', Ember.A()); + this.set('content', Ember.A()); // this is an important line. this.set('namedViews', Ember.Object.create()); this._super(); }, diff --git a/framework/core/ember/app/views/discussions.js b/framework/core/ember/app/views/discussions.js index abe05c12d..b16e7ed47 100644 --- a/framework/core/ember/app/views/discussions.js +++ b/framework/core/ember/app/views/discussions.js @@ -1,7 +1,14 @@ import Ember from 'ember'; +import DropdownSelect from '../components/dropdown-select'; +import ButtonItem from '../components/button-item'; +import NavItem from '../components/nav-item'; +import Menu from '../utils/menu'; + export default Ember.View.extend({ + sidebarView: Ember.ContainerView.extend(), + classNameBindings: ['pinned'], pinned: function() { @@ -10,6 +17,8 @@ export default Ember.View.extend({ didInsertElement: function() { + this.trigger('populateSidebar', this.get('sidebar')); + var view = this; this.$().find('.discussions-pane').on('mouseenter', function() { @@ -49,6 +58,46 @@ export default Ember.View.extend({ }); }, + setupSidebar: function(sidebar) { + sidebar.pushObject(ButtonItem.create({ + title: 'Start a Discussion', + icon: 'edit', + class: 'btn-primary' + })); + + var nav = Menu.create(); + this.trigger('populateNav', nav); + sidebar.pushObject(DropdownSelect.create({ + items: nav + })); + }.on('populateSidebar'), + + setupNav: function(nav) { + nav.addItem('all', NavItem.create({ + title: 'All Discussions', + icon: 'comments-o', + linkTo: '"discussions" (query-params filter="")' + })); + + nav.addItem('private', NavItem.create({ + title: 'Private', + icon: 'envelope-o', + linkTo: '"discussions" (query-params filter="private")' + })); + + nav.addItem('following', NavItem.create({ + title: 'Following', + icon: 'star', + linkTo: '"discussions" (query-params filter="following")' + })); + + nav.addItem('categories', NavItem.create({ + title: 'Categories', + icon: 'reorder', + linkTo: '"categories"' + })); + }.on('populateNav'), + willDestroyElement: function() { this.set('controller.test', $(window).scrollTop()); $(window).off('scroll.loadMore');