diff --git a/app/assets/javascripts/discourse/components/poster-avatar.js.es6 b/app/assets/javascripts/discourse/components/poster-avatar.js.es6 new file mode 100644 index 00000000000..9b55540d072 --- /dev/null +++ b/app/assets/javascripts/discourse/components/poster-avatar.js.es6 @@ -0,0 +1,17 @@ +export default Ember.Component.extend({ + tagName: 'a', + attributeBindings: ['href'], + classNames: ['trigger-expansion'], + href: Em.computed.alias('post.usernameUrl'), + + click: function(e) { + this.appEvents.trigger('poster:expand', $(e.target)); + this.sendAction('action', this.get('post')); + return false; + }, + + render: function(buffer) { + var avatar = Handlebars.helpers.avatar(this.get('post'), {hash: {imageSize: 'large'}}); + buffer.push(avatar); + } +}); diff --git a/app/assets/javascripts/discourse/components/poster-name.js.es6 b/app/assets/javascripts/discourse/components/poster-name.js.es6 index 90d53295504..284376d3ba0 100644 --- a/app/assets/javascripts/discourse/components/poster-name.js.es6 +++ b/app/assets/javascripts/discourse/components/poster-name.js.es6 @@ -1,5 +1,5 @@ var PosterNameComponent = Em.Component.extend({ - classNames: ['names'], + classNames: ['names', 'trigger-expansion'], displayNameOnPosts: Discourse.computed.setting('display_name_on_posts'), // sanitize name for comparison @@ -67,6 +67,7 @@ var PosterNameComponent = Em.Component.extend({ if (!Em.isEmpty(href) && href !== '#') { return true; } else { + this.appEvents.trigger('poster:expand', $target); this.sendAction('expandAction', this.get('post')); } return false; diff --git a/app/assets/javascripts/discourse/controllers/poster-expansion.js.es6 b/app/assets/javascripts/discourse/controllers/poster-expansion.js.es6 index ae4092dae0b..a0ec468b1ae 100644 --- a/app/assets/javascripts/discourse/controllers/poster-expansion.js.es6 +++ b/app/assets/javascripts/discourse/controllers/poster-expansion.js.es6 @@ -1,11 +1,3 @@ -/** - A controller for expanding information about a poster. - - @class PosterExpansion - @extends Discourse.ObjectController - @namespace Discourse - @module Discourse -**/ export default Discourse.ObjectController.extend({ needs: ['topic'], visible: false, diff --git a/app/assets/javascripts/discourse/initializers/inject-app-events.js.es6 b/app/assets/javascripts/discourse/initializers/inject-app-events.js.es6 index 7be3a087755..6a11fd729d6 100644 --- a/app/assets/javascripts/discourse/initializers/inject-app-events.js.es6 +++ b/app/assets/javascripts/discourse/initializers/inject-app-events.js.es6 @@ -5,6 +5,7 @@ export default { application.register('app-events:main', AppEvents, { singleton: true }); application.inject('controller', 'appEvents', 'app-events:main'); + application.inject('component', 'appEvents', 'app-events:main'); application.inject('route', 'appEvents', 'app-events:main'); application.inject('view', 'appEvents', 'app-events:main'); application.inject('model', 'appEvents', 'app-events:main'); diff --git a/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars b/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars index 1358c9a65dc..a2007af2106 100644 --- a/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars @@ -2,13 +2,13 @@
- {{avatar this imageSize="large"}} + {{poster-avatar action="showPosterExpansion" post=this classNames="main-avatar"}}
-
{{{unbound username}}}
+ {{poster-name post=this expandAction="showPosterExpansion"}} {{#if view.parentView.previousPost}}{{/if}}
{{age-with-tooltip created_at}}
diff --git a/app/assets/javascripts/discourse/templates/post.js.handlebars b/app/assets/javascripts/discourse/templates/post.js.handlebars index 75f0d519db7..4f04e717036 100644 --- a/app/assets/javascripts/discourse/templates/post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/post.js.handlebars @@ -19,9 +19,8 @@ {{/if}}
{{#unless userDeleted}} -
- {{avatar this imageSize="large"}} - +
+ {{poster-avatar action="showPosterExpansion" post=this classNames="main-avatar"}}
{{else}}
diff --git a/app/assets/javascripts/discourse/views/embedded-post.js.es6 b/app/assets/javascripts/discourse/views/embedded-post.js.es6 index e62c8cf9a94..1bbeb51104a 100644 --- a/app/assets/javascripts/discourse/views/embedded-post.js.es6 +++ b/app/assets/javascripts/discourse/views/embedded-post.js.es6 @@ -1,11 +1,3 @@ -/** - This view handles rendering of post within another (such as a collapsed reply) - - @class EmbeddedPostView - @extends Discourse.View - @namespace Discourse - @module Discourse -**/ export default Discourse.GroupedView.extend({ templateName: 'embedded_post', classNames: ['reply'], @@ -18,5 +10,4 @@ export default Discourse.GroupedView.extend({ _stopTracking: function() { Discourse.ScreenTrack.current().stopTracking(this.get('elementId')); }.on('willDestroyElement') - }); diff --git a/app/assets/javascripts/discourse/views/poster-expansion.js.es6 b/app/assets/javascripts/discourse/views/poster-expansion.js.es6 index 65b59803b60..8998a9ffadb 100644 --- a/app/assets/javascripts/discourse/views/poster-expansion.js.es6 +++ b/app/assets/javascripts/discourse/views/poster-expansion.js.es6 @@ -1,40 +1,25 @@ -/** - Shows expanded details for a poster - - @class PosterExpansionView - @namespace Discourse - @module Discourse -**/ - var clickOutsideEventName = "mousedown.outside-poster-expansion"; export default Discourse.View.extend({ elementId: 'poster-expansion', classNameBindings: ['controller.visible::hidden', 'controller.showBadges'], - // Position the expansion when the post changes - _visibleChanged: function() { - var post = this.get('controller.model'), - div = this.$(); - - Em.run.schedule('afterRender', function() { - if (post) { - var $post = $('#' + post.get('postElementId')), - $avatar = $('.topic-avatar img.avatar', $post), - position = $avatar.offset(); - - if (position) { - position.left += $avatar.width() + 5; - div.css(position); - } - } - }); - }.observes('controller.model'), - - didInsertElement: function() { + _setup: function() { var self = this; - $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) { + this.appEvents.on('poster:expand', function(target) { + if (!target) { return; } + Em.run.schedule('afterRender', function() { + if (target) { + var position = target.offset(); + if (position) { + position.left += target.width() + 5; + self.$().css(position); + } + } + }); + }); + $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) { if (self.get('controller.visible')) { var $target = $(e.target); if ($target.closest('.trigger-expansion').length > 0) { return; } @@ -45,10 +30,11 @@ export default Discourse.View.extend({ return true; }); - }, + }.on('didInsertElement'), - willDestroyElement: function() { + _removeEvents: function() { $('html').off(clickOutsideEventName); - } + this.appEvents.off('poster:expand'); + }.on('willDestroyElement') });