Add groups list to the poster expansion when you click an avatar while

in a topic.

app/assets/javascripts/discourse/components/groups_list_component.js

@@ -0,0 +1,12 @@
+/**
+  Displays a list of groups that a user belongs to.
+
+  @class Discourse.GroupsListComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.GroupsListComponent = Em.Component.extend({
+  classNames: ['groups']
+});
+

app/assets/javascripts/discourse/mixins/scroll_top.js

@@ -0,0 +1,18 @@
+/**
+  This mixin will cause a view to scroll the viewport to the top once it has been inserted
+
+  @class Discourse.ScrollTop
+  @extends Ember.Mixin
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.ScrollTop = Em.Mixin.create({
+
+  _scrollTop: function() {
+    Em.run.schedule('afterRender', function() {
+      $(document).scrollTop(0);
+    });
+  }.on('didInsertElement'),
+
+});
+

app/assets/javascripts/discourse/templates/components/groups-list.js.handlebars

@@ -0,0 +1,6 @@
+{{#if groups}}
+  {{i18n groups.title count=groups.length}}:
+  {{#each groups}}
+    {{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}
+  {{/each}}
+{{/if}}

app/assets/javascripts/discourse/templates/poster_expansion.handlebars

@@ -10,6 +10,8 @@
     <h3>{{i18n last_post}} {{unboundDate path="user.last_posted_at" leaveAgo="true"}}</h3>
     <h3>{{i18n joined}} {{unboundDate path="user.created_at" leaveAgo="true"}}</h3>
 
+    {{groups-list groups=user.custom_groups}}
+
     <div class='bottom'>
       {{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}}
 

app/assets/javascripts/discourse/templates/user/user.js.handlebars

@@ -43,14 +43,7 @@
 
           <div class='bio'>{{{bio_cooked}}}</div>
 
-          {{#if custom_groups}}
+          {{groups-list groups=custom_groups}}
-            <div class='groups'>
-              {{i18n groups.title count=custom_groups.length}}:
-              {{#each custom_groups}}
-                {{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}
-              {{/each}}
-            </div>
-          {{/if}}
 
           {{#if isSuspended}}
             <div class='suspended'>

app/assets/javascripts/discourse/views/discovery_topics_view.js

@@ -7,15 +7,9 @@
   @namespace Discourse
   @module Discourse
 **/
-Discourse.DiscoveryTopicsView = Discourse.View.extend(Discourse.LoadMore, {
+Discourse.DiscoveryTopicsView = Discourse.View.extend(Discourse.ScrollTop, Discourse.LoadMore, {
   eyelineSelector: '.topic-list-item',
 
-  _scrollTop: function() {
-    Em.run.schedule('afterRender', function() {
-      $(document).scrollTop(0);
-    });
-  }.on('didInsertElement'),
-
   actions: {
     loadMore: function() {
       var self = this;

app/assets/javascripts/discourse/views/group_index_view.js

@@ -1,4 +1,13 @@
-Discourse.GroupIndexView = Discourse.View.extend(Discourse.LoadMore, {
+/**
+  Displays all posts within a group
+
+  @class Discourse.GroupIndexView
+  @extends Ember.Mixin
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.GroupIndexView = Discourse.View.extend(Discourse.ScrollTop, Discourse.LoadMore, {
   eyelineSelector: '.user-stream .item'
+
 });
 

app/assets/stylesheets/desktop/poster_expansion.scss

@@ -40,6 +40,16 @@
     margin-top: 0px;
     color: $primary_medium;
   }
+  .groups {
+    font-size: 13px;
+    font-weight: normal;
+    margin-top: 0px;
+    color: $primary_medium;
+
+    .group-link {
+      color: $primary;
+    }
+  }
 
   .bottom {
     clear: both;

app/assets/stylesheets/desktop/user.scss

@@ -2,6 +2,12 @@
 @import "common/foundation/variables";
 @import "common/foundation/mixins";
 
+.groups {
+  .group-link {
+    color: $tertiary_lightest;
+  }
+}
+
 .user-preferences {
   input.category-group {
     width: 500px;
@@ -210,9 +216,6 @@
 
         h1, h2 {margin-top: 10px;}
 
-        .group-link {
-          color: $tertiary_lightest;
-        }
         .bio {
           color: $primary_lighter;