From 36d7414491164f76f458d4f7b2317478ddb2906c Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Fri, 2 Jan 2015 11:46:40 +1030 Subject: [PATCH] Working on responsive dropdown menu components. --- .../app/components/discussion-scrollbar.js | 4 +-- .../ember/app/components/dropdown-button.js | 21 ++++++++++++ .../ember/app/components/dropdown-split.js | 24 ++++++++++++++ .../core/ember/app/components/menu-split.js | 15 --------- .../templates/components/dropdown-button.hbs | 8 +++++ .../templates/components/dropdown-split.hbs | 8 +++++ .../app/templates/components/menu-split.hbs | 13 -------- .../core/ember/app/templates/discussion.hbs | 12 +++---- .../ember/app/utils/named-container-view.js | 10 +----- framework/core/ember/app/views/discussion.js | 32 ++++++++++++++----- 10 files changed, 93 insertions(+), 54 deletions(-) create mode 100644 framework/core/ember/app/components/dropdown-button.js create mode 100644 framework/core/ember/app/components/dropdown-split.js delete mode 100644 framework/core/ember/app/components/menu-split.js create mode 100644 framework/core/ember/app/templates/components/dropdown-button.hbs create mode 100644 framework/core/ember/app/templates/components/dropdown-split.hbs delete mode 100644 framework/core/ember/app/templates/components/menu-split.hbs diff --git a/framework/core/ember/app/components/discussion-scrollbar.js b/framework/core/ember/app/components/discussion-scrollbar.js index f5589189c..e4acd0d5f 100644 --- a/framework/core/ember/app/components/discussion-scrollbar.js +++ b/framework/core/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(); }, diff --git a/framework/core/ember/app/components/dropdown-button.js b/framework/core/ember/app/components/dropdown-button.js new file mode 100644 index 000000000..9b6b1a3d1 --- /dev/null +++ b/framework/core/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') +}); diff --git a/framework/core/ember/app/components/dropdown-split.js b/framework/core/ember/app/components/dropdown-split.js new file mode 100644 index 000000000..13b9cf5cc --- /dev/null +++ b/framework/core/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') +}); diff --git a/framework/core/ember/app/components/menu-split.js b/framework/core/ember/app/components/menu-split.js deleted file mode 100644 index cddbcf4dc..000000000 --- a/framework/core/ember/app/components/menu-split.js +++ /dev/null @@ -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'), -}); diff --git a/framework/core/ember/app/templates/components/dropdown-button.hbs b/framework/core/ember/app/templates/components/dropdown-button.hbs new file mode 100644 index 000000000..de9494ba0 --- /dev/null +++ b/framework/core/ember/app/templates/components/dropdown-button.hbs @@ -0,0 +1,8 @@ +{{#if items}} + + {{menu-list items=items class=dropdownMenuClass}} +{{/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 new file mode 100644 index 000000000..32931e96e --- /dev/null +++ b/framework/core/ember/app/templates/components/dropdown-split.hbs @@ -0,0 +1,8 @@ +{{#if items}} + {{view items.firstItem class=mainButtonClass}} + + {{menu-list items=items class=dropdownMenuClass}} +{{/if}} \ No newline at end of file diff --git a/framework/core/ember/app/templates/components/menu-split.hbs b/framework/core/ember/app/templates/components/menu-split.hbs deleted file mode 100644 index 13978bdd6..000000000 --- a/framework/core/ember/app/templates/components/menu-split.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{#if items}} -
-
- {{#each item in visibleItems}} - {{view item class="btn btn-default"}} - {{/each}} - {{#if hiddenItems}} - - {{menu-list items=hiddenItems class="dropdown-menu pull-right"}} - {{/if}} -
-
-{{/if}} diff --git a/framework/core/ember/app/templates/discussion.hbs b/framework/core/ember/app/templates/discussion.hbs index f7ff5348c..232547901 100644 --- a/framework/core/ember/app/templates/discussion.hbs +++ b/framework/core/ember/app/templates/discussion.hbs @@ -2,6 +2,10 @@ {{partial "partials/discussion-header"}} + +
{{#each item in postStream}} @@ -10,10 +14,4 @@ {{/discussion-item}} {{/each}} -
- -{{#if postStream.lastLoaded}} - -{{/if}} + \ No newline at end of file diff --git a/framework/core/ember/app/utils/named-container-view.js b/framework/core/ember/app/utils/named-container-view.js index 539d4d5a2..219ffb922 100644 --- a/framework/core/ember/app/utils/named-container-view.js +++ b/framework/core/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); diff --git a/framework/core/ember/app/views/discussion.js b/framework/core/ember/app/views/discussion.js index 89d280172..2b5a92e30 100644 --- a/framework/core/ember/app/views/discussion.js +++ b/framework/core/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');