From f2659a5916bb5cdcb9db6ee0d13622cbb149e77e Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Fri, 15 Nov 2013 15:46:26 -0500 Subject: [PATCH] Moved more into components, including summary stuff. --- .../private_message_map_component.js | 8 ++ .../components/toggle_best_of_component.js | 8 ++ .../components/topic_information_component.js | 45 ++++++++ .../components/topic_participant_component.js | 17 +++ .../discourse/controllers/topic_controller.js | 5 - .../discourse/models/topic_details.js | 8 ++ .../discourse-topic-information.js.handlebars | 68 ++++++++++++ .../discourse-topic-participant.js.handlebars | 4 + .../templates/participant.js.handlebars | 4 - .../templates/topic_map/info.js.handlebars | 105 ------------------ .../discourse/views/participant_view.js | 19 ---- .../views/topic_map/topic_map_view.js | 31 +----- .../stylesheets/desktop/topic-post.scss | 2 +- app/assets/stylesheets/desktop/user.scss | 2 +- app/assets/stylesheets/mobile/topic-post.scss | 2 +- app/assets/stylesheets/mobile/user.scss | 2 +- 16 files changed, 163 insertions(+), 167 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/topic_information_component.js create mode 100644 app/assets/javascripts/discourse/components/topic_participant_component.js create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-topic-information.js.handlebars create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-topic-participant.js.handlebars delete mode 100644 app/assets/javascripts/discourse/templates/participant.js.handlebars delete mode 100644 app/assets/javascripts/discourse/templates/topic_map/info.js.handlebars delete mode 100644 app/assets/javascripts/discourse/views/participant_view.js diff --git a/app/assets/javascripts/discourse/components/private_message_map_component.js b/app/assets/javascripts/discourse/components/private_message_map_component.js index 379bdf489ae..b1e734ee469 100644 --- a/app/assets/javascripts/discourse/components/private_message_map_component.js +++ b/app/assets/javascripts/discourse/components/private_message_map_component.js @@ -1,3 +1,11 @@ +/** + The controls at the top of a private message in the map area. + + @class DiscoursePrivateMessageMapComponent + @extends Ember.Component + @namespace Discourse + @module Discourse +**/ Discourse.DiscoursePrivateMessageMapComponent = Ember.Component.extend({ templateName: 'components/discourse-private-message-map', tagName: 'section', diff --git a/app/assets/javascripts/discourse/components/toggle_best_of_component.js b/app/assets/javascripts/discourse/components/toggle_best_of_component.js index 12b9ec9df43..8c08297be24 100644 --- a/app/assets/javascripts/discourse/components/toggle_best_of_component.js +++ b/app/assets/javascripts/discourse/components/toggle_best_of_component.js @@ -1,3 +1,11 @@ +/** + The controls for toggling the summarized view on/off + + @class DiscourseToggleBestOfComponent + @extends Ember.Component + @namespace Discourse + @module Discourse +**/ Discourse.DiscourseToggleBestOfComponent = Ember.Component.extend({ templateName: 'components/discourse-toggle-best-of', tagName: 'section', diff --git a/app/assets/javascripts/discourse/components/topic_information_component.js b/app/assets/javascripts/discourse/components/topic_information_component.js new file mode 100644 index 00000000000..f02511f0de8 --- /dev/null +++ b/app/assets/javascripts/discourse/components/topic_information_component.js @@ -0,0 +1,45 @@ +/** + The information that sits in the topic map. + + @class DiscourseTopicInformationComponent + @extends Ember.Component + @namespace Discourse + @module Discourse +**/ + +var LINKS_SHOWN = 5; + +Discourse.DiscourseTopicInformationComponent = Ember.Component.extend({ + mapCollapsed: true, + templateName: 'components/discourse-topic-information', + details: Em.computed.alias('topic.details'), + allLinksShown: false, + + toggleMapClass: function() { + return this.get('mapCollapsed') ? 'icon-chevron-down' : 'icon-chevron-up'; + }.property('mapCollapsed'), + + showAllLinksControls: function() { + if (this.get('allLinksShown')) return false; + if ((this.get('details.links.length') || 0) <= LINKS_SHOWN) return false; + return true; + }.property('allLinksShown', 'topic.details.links'), + + infoLinks: function() { + if (Em.isNone('details.links')) return []; + + var allLinks = this.get('details.links'); + if (this.get('allLinksShown')) return allLinks; + return allLinks.slice(0, LINKS_SHOWN); + }.property('details.links', 'allLinksShown'), + + actions: { + toggleMap: function() { + this.toggleProperty('mapCollapsed'); + }, + + showAllLinks: function() { + this.set('allLinksShown', true); + } + } +}); diff --git a/app/assets/javascripts/discourse/components/topic_participant_component.js b/app/assets/javascripts/discourse/components/topic_participant_component.js new file mode 100644 index 00000000000..0a7a72e27c5 --- /dev/null +++ b/app/assets/javascripts/discourse/components/topic_participant_component.js @@ -0,0 +1,17 @@ +Discourse.DiscourseTopicParticipantComponent = Ember.Component.extend({ + + postStream: Em.computed.alias('participant.topic.postStream'), + + toggled: function() { + return this.get('postStream.userFilters').contains(this.get('participant.username')); + }.property('postStream.userFilters.[]'), + + actions: { + toggle: function() { + var postStream = this.get('postStream'); + if (postStream) { + postStream.toggleParticipant(this.get('participant.username')); + } + } + } +}); diff --git a/app/assets/javascripts/discourse/controllers/topic_controller.js b/app/assets/javascripts/discourse/controllers/topic_controller.js index cfb9998b883..168e534ee5f 100644 --- a/app/assets/javascripts/discourse/controllers/topic_controller.js +++ b/app/assets/javascripts/discourse/controllers/topic_controller.js @@ -8,7 +8,6 @@ **/ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.SelectedPostsCount, { multiSelect: false, - summaryCollapsed: true, needs: ['header', 'modal', 'composer', 'quoteButton'], allPostsSelected: false, editingTopic: false, @@ -30,10 +29,6 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected Discourse.URL.routeTo(this.get('lastPostUrl')); }, - toggleSummary: function() { - this.toggleProperty('summaryCollapsed'); - }, - selectAll: function() { var posts = this.get('postStream.posts'); var selectedPosts = this.get('selectedPosts'); diff --git a/app/assets/javascripts/discourse/models/topic_details.js b/app/assets/javascripts/discourse/models/topic_details.js index 6a7ebd7bbf4..ac4356e4ab5 100644 --- a/app/assets/javascripts/discourse/models/topic_details.js +++ b/app/assets/javascripts/discourse/models/topic_details.js @@ -23,6 +23,14 @@ Discourse.TopicDetails = Discourse.Model.extend({ }); } + if (details.participants) { + var topic = this.get('topic'); + details.participants = details.participants.map(function (p) { + p.topic = topic; + return Em.Object.create(p); + }); + } + this.setProperties(details); this.set('loaded', true); }, diff --git a/app/assets/javascripts/discourse/templates/components/discourse-topic-information.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-topic-information.js.handlebars new file mode 100644 index 00000000000..8793df5a6df --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/discourse-topic-information.js.handlebars @@ -0,0 +1,68 @@ + + + + +{{#unless mapCollapsed}} +
+ {{#groupedEach participant in details.participants}}{{discourse-topic-participant participant=participant}}{{/groupedEach}} +
+ + {{#if infoLinks}} +
+ + + {{#if showAllLinksControls}} +
+ {{i18n topic_map.links_shown totalLinks="details.links.length"}} +
+ {{/if}} + +
+ {{/if}} +{{/unless}} diff --git a/app/assets/javascripts/discourse/templates/components/discourse-topic-participant.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-topic-participant.js.handlebars new file mode 100644 index 00000000000..85bac6b05bf --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/discourse-topic-participant.js.handlebars @@ -0,0 +1,4 @@ + + {{unbound participant.post_count}} + {{avatar participant imageSize="medium"}} + \ No newline at end of file diff --git a/app/assets/javascripts/discourse/templates/participant.js.handlebars b/app/assets/javascripts/discourse/templates/participant.js.handlebars deleted file mode 100644 index af510cb3b4f..00000000000 --- a/app/assets/javascripts/discourse/templates/participant.js.handlebars +++ /dev/null @@ -1,4 +0,0 @@ - - {{unbound post_count}} - {{avatar this imageSize="medium"}} - diff --git a/app/assets/javascripts/discourse/templates/topic_map/info.js.handlebars b/app/assets/javascripts/discourse/templates/topic_map/info.js.handlebars deleted file mode 100644 index 14f86b39ec2..00000000000 --- a/app/assets/javascripts/discourse/templates/topic_map/info.js.handlebars +++ /dev/null @@ -1,105 +0,0 @@ - - -{{#if summaryCollapsed}} - -{{else}} - -
- -
- - {{#if details.participants}} -
- {{#groupedEach details.participants}}{{participant participant=this}}{{/groupedEach}} -
- {{/if}} - - {{#if view.parentView.infoLinks}} -
- - - {{#if view.parentView.showAllLinksControls}} -
- {{i18n topic_map.links_shown totalLinks="details.links.length"}} -
- {{/if}} - -
- {{/if}} - - - -{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/views/participant_view.js b/app/assets/javascripts/discourse/views/participant_view.js deleted file mode 100644 index f9251adbef8..00000000000 --- a/app/assets/javascripts/discourse/views/participant_view.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - This view renders a participant in a topic - - @class ParticipantView - @extends Discourse.View - @namespace Discourse - @module Discourse -**/ -Discourse.ParticipantView = Discourse.View.extend({ - templateName: 'participant', - - toggled: function() { - return this.get('controller.postStream.userFilters').contains(this.get('participant.username')); - }.property('controller.postStream.userFilters.[]') - -}); - - -Discourse.View.registerHelper('participant', Discourse.ParticipantView); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js b/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js index 9af1dc323c9..3bda7f1c693 100644 --- a/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js +++ b/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js @@ -6,27 +6,8 @@ @namespace Discourse @module Discourse **/ - -var LINKS_SHOWN = 5; - Discourse.TopicMapView = Discourse.ContainerView.extend({ classNameBindings: ['hidden', ':topic-map'], - allLinksShown: false, - - showAllLinksControls: function() { - if (this.get('allLinksShown')) return false; - if ((this.get('topic.details.links.length') || 0) <= LINKS_SHOWN) return false; - return true; - }.property('allLinksShown', 'topic.details.links'), - - infoLinks: function() { - if (this.blank('topic.details.links')) return []; - - var allLinks = this.get('topic.details.links'); - if (this.get('allLinksShown')) return allLinks; - return allLinks.slice(0, LINKS_SHOWN); - }.property('topic.details.links', 'allLinksShown'), - shouldRerender: Discourse.View.renderIfChanged('topic.posts_count'), hidden: function() { @@ -42,20 +23,10 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({ this._super(); if (this.get('hidden')) return; - this.attachViewWithArgs({ - templateName: 'topic_map/info', - content: this.get('controller') - }, Discourse.GroupedView); - + this.attachViewWithArgs({ topic: this.get('topic') }, Discourse.DiscourseTopicInformationComponent); this.trigger('appendMapInformation', this); }, - actions: { - showAllLinks: function() { - this.set('allLinksShown', true); - }, - }, - appendMapInformation: function(container) { var topic = this.get('topic'); diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 42ce660894f..2dbba78641b 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -267,7 +267,7 @@ a.star { margin-right: 4px; } - .summary { + .map { &.collapsed { } li { diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 2c29326bbd1..92e33b8fb4d 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -64,7 +64,7 @@ margin: 20px 0 10px 0; } - .summary { + .map { height: 50px; } .avatar { diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index cfc6b71b310..858abc01d62 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -186,7 +186,7 @@ a.star { margin-right: 4px; } - .summary { + .map { &.collapsed { } li { diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 3e36e04beb1..2f81674e6d5 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -61,7 +61,7 @@ border-left: 0; border-right: 0; } - .summary { + .map { height: 50px; } .avatar {