diff --git a/app/assets/javascripts/discourse/helpers/application_helpers.js b/app/assets/javascripts/discourse/helpers/application_helpers.js
index b10286832f2..958219769dd 100644
--- a/app/assets/javascripts/discourse/helpers/application_helpers.js
+++ b/app/assets/javascripts/discourse/helpers/application_helpers.js
@@ -110,52 +110,6 @@ Handlebars.registerHelper('shorten-url', function(property, options) {
return url.substring(0,80);
});
-/**
- Show an avatar for a user, intelligently making use of available properties
-
- @method avatar
- @for Handlebars
-**/
-Handlebars.registerHelper('avatar', function(user, options) {
- if (typeof user === 'string') {
- user = Ember.Handlebars.get(this, user, options);
- }
-
- if (user) {
- var username = Em.get(user, 'username');
- if (!username) username = Em.get(user, options.hash.usernamePath);
-
- var title;
- if (!options.hash.ignoreTitle) {
- // first try to get a title
- title = Em.get(user, 'title');
- // if there was no title provided
- if (!title) {
- // try to retrieve a description
- var description = Em.get(user, 'description');
- // if a description has been provided
- if (description && description.length > 0) {
- // preprend the username before the description
- title = username + " - " + description;
- }
- }
- }
-
- // this is simply done to ensure we cache images correctly
- var uploadedAvatarId = Em.get(user, 'uploaded_avatar_id') || Em.get(user, 'user.uploaded_avatar_id');
- var avatarTemplate = Discourse.User.avatarTemplate(username,uploadedAvatarId);
-
- return new safe(Discourse.Utilities.avatarImg({
- size: options.hash.imageSize,
- extraClasses: Em.get(user, 'extras') || options.hash.extraClasses,
- title: title || username,
- avatarTemplate: avatarTemplate
- }));
- } else {
- return '';
- }
-});
-
/**
Bound avatar helper.
diff --git a/app/assets/javascripts/discourse/helpers/user-avatar.js.es6 b/app/assets/javascripts/discourse/helpers/user-avatar.js.es6
new file mode 100644
index 00000000000..12ce28d8f0d
--- /dev/null
+++ b/app/assets/javascripts/discourse/helpers/user-avatar.js.es6
@@ -0,0 +1,45 @@
+export function renderAvatar(user, options) {
+ options = options || {};
+
+ if (typeof user === 'string') {
+ user = Ember.Handlebars.get(this, user, options);
+ }
+
+ if (user) {
+ var username = Em.get(user, 'username');
+ if (!username) username = Em.get(user, options.usernamePath);
+
+ var title;
+ if (!options.ignoreTitle) {
+ // first try to get a title
+ title = Em.get(user, 'title');
+ // if there was no title provided
+ if (!title) {
+ // try to retrieve a description
+ var description = Em.get(user, 'description');
+ // if a description has been provided
+ if (description && description.length > 0) {
+ // preprend the username before the description
+ title = username + " - " + description;
+ }
+ }
+ }
+
+ // this is simply done to ensure we cache images correctly
+ var uploadedAvatarId = Em.get(user, 'uploaded_avatar_id') || Em.get(user, 'user.uploaded_avatar_id');
+ var avatarTemplate = Discourse.User.avatarTemplate(username,uploadedAvatarId);
+
+ return Discourse.Utilities.avatarImg({
+ size: options.imageSize,
+ extraClasses: Em.get(user, 'extras') || options.extraClasses,
+ title: title || username,
+ avatarTemplate: avatarTemplate
+ });
+ } else {
+ return '';
+ }
+}
+
+Handlebars.registerHelper('avatar', function(user, options) {
+ return new Handlebars.SafeString(renderAvatar.call(this, user, options.hash));
+});
diff --git a/app/assets/javascripts/discourse/initializers/load-all-helpers.js.es6 b/app/assets/javascripts/discourse/initializers/load-all-helpers.js.es6
new file mode 100644
index 00000000000..a3b71a1cd50
--- /dev/null
+++ b/app/assets/javascripts/discourse/initializers/load-all-helpers.js.es6
@@ -0,0 +1,12 @@
+export default {
+ name: 'load-all-helpers',
+
+ initialize: function() {
+ Ember.keys(requirejs.entries).forEach(function(entry) {
+ if ((/\/helpers\//).test(entry)) {
+ require(entry, null, null, true);
+ }
+ });
+ }
+};
+
diff --git a/app/assets/javascripts/discourse/routes/application.js.es6 b/app/assets/javascripts/discourse/routes/application.js.es6
index 4a09027737d..71da530d03b 100644
--- a/app/assets/javascripts/discourse/routes/application.js.es6
+++ b/app/assets/javascripts/discourse/routes/application.js.es6
@@ -5,6 +5,18 @@ var ApplicationRoute = Em.Route.extend({
this.controllerFor('topic-entrance').send('show', data);
},
+ composePrivateMessage: function(user) {
+ var self = this;
+ this.transitionTo('userActivity', user).then(function () {
+ self.controllerFor('user-activity').send('composePrivateMessage');
+ });
+ },
+
+ expandUser: function(user) {
+ this.controllerFor('poster-expansion').show(user.get('username'), user.get('uploaded_avatar_id'));
+ return true;
+ },
+
error: function(err, transition) {
if (err.status === 404) {
// 404
diff --git a/app/assets/javascripts/discourse/routes/topic_route.js b/app/assets/javascripts/discourse/routes/topic_route.js
index efc2b952916..39d07763e90 100644
--- a/app/assets/javascripts/discourse/routes/topic_route.js
+++ b/app/assets/javascripts/discourse/routes/topic_route.js
@@ -25,13 +25,6 @@ Discourse.TopicRoute = Discourse.Route.extend({
}
},
- composePrivateMessage: function(user) {
- var self = this;
- this.transitionTo('userActivity', user).then(function () {
- self.controllerFor('user-activity').send('composePrivateMessage');
- });
- },
-
showFlags: function(post) {
Discourse.Route.showModal(this, 'flag', post);
this.controllerFor('flag').setProperties({ selected: null });
diff --git a/app/assets/javascripts/discourse/templates/application.js.handlebars b/app/assets/javascripts/discourse/templates/application.js.handlebars
index f850ab4efb0..0366dcbf821 100644
--- a/app/assets/javascripts/discourse/templates/application.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/application.js.handlebars
@@ -2,6 +2,7 @@
{{outlet}}
+ {{render "poster-expansion"}}
{{render "modal"}}
diff --git a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
index e9baf550d17..3d432d3648b 100644
--- a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
@@ -40,11 +40,7 @@
{{bound-category-link category showParent=true}} |
{{/unless}}
-
- {{#each posters}}
-
- {{/each}}
- |
+{{view 'posters-column' posters=posters}}
{{posts-count-column topic=model class="num"}}
{{number views numberKey="views_long"}} |
diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster-expansion.js.handlebars
similarity index 99%
rename from app/assets/javascripts/discourse/templates/poster_expansion.handlebars
rename to app/assets/javascripts/discourse/templates/poster-expansion.js.handlebars
index 58cf8e8d36d..e322b763fb6 100644
--- a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
+++ b/app/assets/javascripts/discourse/templates/poster-expansion.js.handlebars
@@ -52,5 +52,4 @@
{{else}}
{{i18n loading}}
{{/if}}
-
{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/topic.js.handlebars b/app/assets/javascripts/discourse/templates/topic.js.handlebars
index 72cb989c45b..f89169f58c2 100644
--- a/app/assets/javascripts/discourse/templates/topic.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/topic.js.handlebars
@@ -145,7 +145,6 @@
{{/if}}
{{render "share"}}
-{{render "posterExpansion"}}
{{#if currentUser.enable_quoting}}
{{render "quote-button"}}
diff --git a/app/assets/javascripts/discourse/views/poster-expansion.js.es6 b/app/assets/javascripts/discourse/views/poster-expansion.js.es6
index 89c10476950..e337e5c2e1b 100644
--- a/app/assets/javascripts/discourse/views/poster-expansion.js.es6
+++ b/app/assets/javascripts/discourse/views/poster-expansion.js.es6
@@ -7,6 +7,7 @@ export default Discourse.View.extend({
_setup: function() {
var self = this;
this.appEvents.on('poster:expand', this, '_posterExpand');
+ this.appEvents.on('dom:clean', this, '_cleanUp');
$('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) {
if (self.get('controller.visible')) {
@@ -42,9 +43,14 @@ export default Discourse.View.extend({
});
},
+ _cleanUp: function() {
+ this.get('controller').close();
+ },
+
_removeEvents: function() {
$('html').off(clickOutsideEventName);
this.appEvents.off('poster:expand', this, '_posterExpand');
+ this.appEvents.off('dom:clean', this, '_cleanUp');
}.on('willDestroyElement')
});
diff --git a/app/assets/javascripts/discourse/views/posters-column.js.es6 b/app/assets/javascripts/discourse/views/posters-column.js.es6
new file mode 100644
index 00000000000..af351a265f6
--- /dev/null
+++ b/app/assets/javascripts/discourse/views/posters-column.js.es6
@@ -0,0 +1,6 @@
+export default Ember.CollectionView.extend({
+ classNames: ['posters'],
+ tagName: 'td',
+ content: Em.computed.alias('posters'),
+ itemViewClass: 'topic-list-poster'
+});
diff --git a/app/assets/javascripts/discourse/views/topic-list-poster.js.es6 b/app/assets/javascripts/discourse/views/topic-list-poster.js.es6
new file mode 100644
index 00000000000..ac36366f685
--- /dev/null
+++ b/app/assets/javascripts/discourse/views/topic-list-poster.js.es6
@@ -0,0 +1,22 @@
+import { renderAvatar } from 'discourse/helpers/user-avatar';
+
+export default Ember.View.extend({
+ tagName: 'a',
+ attributeBindings: ['href'],
+ classNameBindings: ['content.extras'],
+
+ user: Em.computed.alias('content.user'),
+ href: Em.computed.alias('user.path'),
+
+ click: function(e) {
+ var user = this.get('user');
+ this.appEvents.trigger('poster:expand', $(e.target));
+ this.get('controller').send('expandUser', user);
+ return false;
+ },
+
+ render: function(buffer) {
+ var av = renderAvatar(this.get('content'), {usernamePath: 'user.username', imageSize: 'small'});
+ buffer.push(av);
+ }
+});
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index ba626d9b42f..c09ec34fff4 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -9,7 +9,7 @@
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px 12px;
- border: 1px solid scale-color-diff();
+ border: 1px solid scale-color-diff();
.avatar-placeholder {
width: 120px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 5ba472836b6..12708946b60 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -376,11 +376,10 @@ and (max-width : 850px) {
.topic-excerpt {
padding-right: 20px;
}
- th.posters {
- text-align: center;
- }
- .posters {
-
+ th.posters {
+ text-align: center;
+ }
+ .posters {
min-width: 0;
width: 50px;
a:not(.latest) {