From 1f716f5514ccbfa566513bd276856b31d864ffad Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 26 Feb 2015 11:32:50 -0500 Subject: [PATCH] Convert Notification button to a component --- .../category-notifications-button.js.es6 | 4 +-- .../dropdown-button.js.es6 | 25 ++++++++---------- .../notifications-button.js.es6 | 26 +++++++++---------- .../pinned-button.js.es6 | 24 ++++++++--------- .../topic-notifications-button.js.es6 | 5 ++-- .../category_notification_dropdown.hbs | 17 ------------ .../templates/navigation/category.hbs | 2 +- .../discourse/views/container.js.es6 | 21 +++------------ .../views/topic-footer-buttons.js.es6 | 15 ++++++----- app/assets/javascripts/main_include.js | 6 ++--- 10 files changed, 54 insertions(+), 91 deletions(-) rename app/assets/javascripts/discourse/{views => components}/category-notifications-button.js.es6 (82%) rename app/assets/javascripts/discourse/{views => components}/dropdown-button.js.es6 (67%) rename app/assets/javascripts/discourse/{views => components}/notifications-button.js.es6 (79%) rename app/assets/javascripts/discourse/{views => components}/pinned-button.js.es6 (65%) rename app/assets/javascripts/discourse/{views => components}/topic-notifications-button.js.es6 (80%) delete mode 100644 app/assets/javascripts/discourse/templates/category_notification_dropdown.hbs diff --git a/app/assets/javascripts/discourse/views/category-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 similarity index 82% rename from app/assets/javascripts/discourse/views/category-notifications-button.js.es6 rename to app/assets/javascripts/discourse/components/category-notifications-button.js.es6 index b1f9b779854..965e57ba278 100644 --- a/app/assets/javascripts/discourse/views/category-notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/category-notifications-button.js.es6 @@ -1,4 +1,4 @@ -import NotificationsButton from 'discourse/views/notifications-button'; +import NotificationsButton from 'discourse/components/notifications-button'; export default NotificationsButton.extend({ classNames: ['notification-options', 'category-notification-menu'], @@ -10,7 +10,7 @@ export default NotificationsButton.extend({ i18nPrefix: 'category.notifications', i18nPostfix: '', - clicked: function(id) { + clicked(id) { this.get('category').setNotification(id); } }); diff --git a/app/assets/javascripts/discourse/views/dropdown-button.js.es6 b/app/assets/javascripts/discourse/components/dropdown-button.js.es6 similarity index 67% rename from app/assets/javascripts/discourse/views/dropdown-button.js.es6 rename to app/assets/javascripts/discourse/components/dropdown-button.js.es6 index e656d6424f6..3747452e35d 100644 --- a/app/assets/javascripts/discourse/views/dropdown-button.js.es6 +++ b/app/assets/javascripts/discourse/components/dropdown-button.js.es6 @@ -1,13 +1,13 @@ import StringBuffer from 'discourse/mixins/string-buffer'; -export default Discourse.View.extend(StringBuffer, { +export default Ember.Component.extend(StringBuffer, { classNameBindings: [':btn-group', 'hidden'], rerenderTriggers: ['text', 'longDescription'], _bindClick: function() { // If there's a click handler, call it if (this.clicked) { - var self = this; + const self = this; this.$().on('click.dropdown-button', 'ul li', function(e) { e.preventDefault(); if ($(e.currentTarget).data('id') !== self.get('activeItem')) { @@ -23,7 +23,7 @@ export default Discourse.View.extend(StringBuffer, { this.$().off('click.dropdown-button', 'ul li'); }.on('willDestroyElement'), - renderString: function(buffer) { + renderString(buffer) { buffer.push("

" + this.get('title') + "

"); buffer.push(""); buffer.push(""); - var desc = this.get('longDescription'); + const desc = this.get('longDescription'); if (desc) { buffer.push("

"); buffer.push(desc); diff --git a/app/assets/javascripts/discourse/views/notifications-button.js.es6 b/app/assets/javascripts/discourse/components/notifications-button.js.es6 similarity index 79% rename from app/assets/javascripts/discourse/views/notifications-button.js.es6 rename to app/assets/javascripts/discourse/components/notifications-button.js.es6 index 73ee182752b..f92bc231281 100644 --- a/app/assets/javascripts/discourse/views/notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/notifications-button.js.es6 @@ -1,6 +1,6 @@ -import DropdownButtonView from 'discourse/views/dropdown-button'; +import DropdownButton from 'discourse/components/dropdown-button'; -export default DropdownButtonView.extend({ +export default DropdownButton.extend({ classNames: ['notification-options'], title: '', buttonIncludesText: true, @@ -21,10 +21,10 @@ export default DropdownButtonView.extend({ }.property(), dropDownContent: function() { - var contents = [], - prefix = this.get('i18nPrefix'), - postfix = this.get('i18nPostfix'), - levels = this.get('notificationLevels'); + const contents = [], + prefix = this.get('i18nPrefix'), + postfix = this.get('i18nPostfix'), + levels = this.get('notificationLevels'); _.each(this.get('options'), function(pair) { if (postfix === '_pm' && pair[1] === 'regular') { return; } @@ -40,12 +40,12 @@ export default DropdownButtonView.extend({ }.property(), text: function() { - var self = this, - prefix = this.get('i18nPrefix'), - postfix = this.get('i18nPostfix'), - levels = this.get('notificationLevels'); + const self = this, + prefix = this.get('i18nPrefix'), + postfix = this.get('i18nPostfix'), + levels = this.get('notificationLevels'); - var key = (function() { + const key = (function() { switch (this.get('notificationLevel')) { case levels.WATCHING: return 'watching'; case levels.TRACKING: return 'tracking'; @@ -54,7 +54,7 @@ export default DropdownButtonView.extend({ } }).call(this); - var icon = (function() { + const icon = (function() { switch (key) { case 'watching': return ' '; case 'tracking': return ' '; @@ -65,7 +65,7 @@ export default DropdownButtonView.extend({ return icon + ( this.get('buttonIncludesText') ? I18n.t(prefix + '.' + key + postfix + ".title") : '') + ""; }.property('notificationLevel'), - clicked: function(/* id */) { + clicked(/* id */) { // sub-class needs to implement this } diff --git a/app/assets/javascripts/discourse/views/pinned-button.js.es6 b/app/assets/javascripts/discourse/components/pinned-button.js.es6 similarity index 65% rename from app/assets/javascripts/discourse/views/pinned-button.js.es6 rename to app/assets/javascripts/discourse/components/pinned-button.js.es6 index d3cb74e4062..e08586bc525 100644 --- a/app/assets/javascripts/discourse/views/pinned-button.js.es6 +++ b/app/assets/javascripts/discourse/components/pinned-button.js.es6 @@ -1,22 +1,20 @@ -import DropdownButtonView from 'discourse/views/dropdown-button'; +import DropdownButton from 'discourse/components/dropdown-button'; -export default DropdownButtonView.extend({ +export default DropdownButton.extend({ descriptionKey: 'help', classNames: ['pinned-options'], title: '', longDescription: function(){ - var topic = this.get('topic'); - var globally = topic.get('pinned_globally') ? '_globally' : ''; - - var key = 'topic_statuses.' + (topic.get('pinned') ? 'pinned' + globally : 'unpinned') + '.help'; + const topic = this.get('topic'); + const globally = topic.get('pinned_globally') ? '_globally' : ''; + const key = 'topic_statuses.' + (topic.get('pinned') ? 'pinned' + globally : 'unpinned') + '.help'; return I18n.t(key); }.property('topic.pinned'), - topic: Em.computed.alias('controller.model'), target: Em.computed.alias('topic'), hidden: function(){ - var topic = this.get('topic'); + const topic = this.get('topic'); return topic.get('deleted') || (!topic.get('pinned') && !topic.get('unpinned')); }.property('topic.pinned', 'topic.deleted', 'topic.unpinned'), @@ -25,7 +23,7 @@ export default DropdownButtonView.extend({ }.property('topic.pinned'), dropDownContent: function() { - var globally = this.get('topic.pinned_globally') ? '_globally' : ''; + const globally = this.get('topic.pinned_globally') ? '_globally' : ''; return [ {id: 'pinned', title: I18n.t('topic_statuses.pinned' + globally + '.title'), @@ -39,15 +37,15 @@ export default DropdownButtonView.extend({ }.property(), text: function() { - var globally = this.get('topic.pinned_globally') ? '_globally' : ''; - var state = this.get('topic.pinned') ? 'pinned' + globally : 'unpinned'; + const globally = this.get('topic.pinned_globally') ? '_globally' : ''; + const state = this.get('topic.pinned') ? 'pinned' + globally : 'unpinned'; return ' ' + I18n.t('topic_statuses.' + state + '.title') + ""; }.property('topic.pinned', 'topic.unpinned'), - clicked: function(id) { - var topic = this.get('topic'); + clicked(id) { + const topic = this.get('topic'); if(id==='unpinned'){ topic.clearPin(); } else { diff --git a/app/assets/javascripts/discourse/views/topic-notifications-button.js.es6 b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 similarity index 80% rename from app/assets/javascripts/discourse/views/topic-notifications-button.js.es6 rename to app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 index a58ae80dcc6..12f6f40600b 100644 --- a/app/assets/javascripts/discourse/views/topic-notifications-button.js.es6 +++ b/app/assets/javascripts/discourse/components/topic-notifications-button.js.es6 @@ -1,8 +1,7 @@ -import NotificationsButton from 'discourse/views/notifications-button'; +import NotificationsButton from 'discourse/components/notifications-button'; export default NotificationsButton.extend({ longDescriptionBinding: 'topic.details.notificationReasonText', - topic: Em.computed.alias('controller.model'), target: Em.computed.alias('topic'), hidden: Em.computed.alias('topic.deleted'), notificationLevels: Discourse.Topic.NotificationLevel, @@ -14,7 +13,7 @@ export default NotificationsButton.extend({ return this.get('isPrivateMessage') ? '_pm' : ''; }.property('isPrivateMessage'), - clicked: function(id) { + clicked(id) { this.get('topic.details').updateNotifications(id); } }); diff --git a/app/assets/javascripts/discourse/templates/category_notification_dropdown.hbs b/app/assets/javascripts/discourse/templates/category_notification_dropdown.hbs deleted file mode 100644 index a8610862d29..00000000000 --- a/app/assets/javascripts/discourse/templates/category_notification_dropdown.hbs +++ /dev/null @@ -1,17 +0,0 @@ -

- - - - -
diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs index 5e511700e2a..a7272acf3f2 100644 --- a/app/assets/javascripts/discourse/templates/navigation/category.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/category.hbs @@ -11,7 +11,7 @@ {{#if canChangeCategoryNotificationLevel}} - {{view 'category-notifications-button' category=category}} + {{category-notifications-button category=category}} {{/if}} {{#if canCreateTopic}} diff --git a/app/assets/javascripts/discourse/views/container.js.es6 b/app/assets/javascripts/discourse/views/container.js.es6 index f538c902100..f8cbc3bd60f 100644 --- a/app/assets/javascripts/discourse/views/container.js.es6 +++ b/app/assets/javascripts/discourse/views/container.js.es6 @@ -1,26 +1,11 @@ export default Ember.ContainerView.extend(Discourse.Presence, { - /** - Attaches a view and wires up the container properly - - @method attachViewWithArgs - @param {Object} viewArgs The arguments to pass when creating the view - @param {Class} viewClass The view class we want to create - **/ - attachViewWithArgs: function(viewArgs, viewClass) { + attachViewWithArgs(viewArgs, viewClass) { if (!viewClass) { viewClass = Ember.View.extend(); } - var view = this.createChildView(viewClass, viewArgs); - this.pushObject(view); + this.pushObject(this.createChildView(viewClass, viewArgs)); }, - /** - Attaches a view with no arguments and wires up the container properly - - @method attachViewClass - @param {Class} viewClass The view class we want to add - **/ - attachViewClass: function(viewClass) { + attachViewClass(viewClass) { this.attachViewWithArgs(null, viewClass); } - }); diff --git a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 index f013611dc74..1598eb1ae96 100644 --- a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 +++ b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 @@ -5,23 +5,24 @@ import BookmarkButton from 'discourse/views/bookmark-button'; import ShareButton from 'discourse/views/share-button'; import InviteReplyButton from 'discourse/views/invite-reply-button'; import ReplyButton from 'discourse/views/reply-button'; -import PinnedButton from 'discourse/views/pinned-button'; -import TopicNotificationsButton from 'discourse/views/topic-notifications-button'; +import PinnedButton from 'discourse/components/pinned-button'; +import TopicNotificationsButton from 'discourse/components/topic-notifications-button'; import DiscourseContainerView from 'discourse/views/container'; export default DiscourseContainerView.extend({ elementId: 'topic-footer-buttons', topicBinding: 'controller.content', - init: function() { + init() { this._super(); this.createButtons(); }, // Add the buttons below a topic - createButtons: function() { - var topic = this.get('topic'); + createButtons() { + const topic = this.get('topic'); if (Discourse.User.current()) { + const viewArgs = {topic}; if (Discourse.User.currentProp("staff")) { this.attachViewClass(TopicAdminMenuButton); } @@ -39,8 +40,8 @@ export default DiscourseContainerView.extend({ if (this.get('topic.details.can_create_post')) { this.attachViewClass(ReplyButton); } - this.attachViewClass(PinnedButton); - this.attachViewClass(TopicNotificationsButton); + this.attachViewWithArgs(viewArgs, PinnedButton); + this.attachViewWithArgs(viewArgs, TopicNotificationsButton); this.trigger('additionalButtons', this); } else { diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js index 15f6bd8f454..f66d48e66ed 100644 --- a/app/assets/javascripts/main_include.js +++ b/app/assets/javascripts/main_include.js @@ -42,9 +42,9 @@ //= require ./discourse/views/flag //= require ./discourse/views/combo-box //= require ./discourse/views/button -//= require ./discourse/views/dropdown-button -//= require ./discourse/views/notifications-button -//= require ./discourse/views/topic-notifications-button +//= require ./discourse/components/dropdown-button +//= require ./discourse/components/notifications-button +//= require ./discourse/components/topic-notifications-button //= require ./discourse/views/pagedown-preview //= require ./discourse/views/composer //= require ./discourse/routes/discourse_route