Only show a few topic links in the gutter and allow the user to expand

them.

app/assets/javascripts/discourse/components/post-links.js

@@ -0,0 +1,49 @@
+var MAX_SHOWN = 5;
+
+Discourse.PostLinksComponent = Em.Component.extend({
+  tagName: 'ul',
+  classNameBindings: [':post-links'],
+
+  render: function(buffer) {
+    var links = this.get('links'),
+        toRender = links;
+
+    if (Em.isEmpty(links)) { return; }
+
+    if (!this.get('expanded')) {
+      toRender = toRender.slice(0, MAX_SHOWN);
+    }
+
+    toRender.forEach(function(l) {
+      var direction = Em.get(l, 'reflection') ? 'left' : 'right',
+          clicks = Em.get(l, 'clicks');
+
+      buffer.push("<li><a href='" + Em.get(l, 'url') + "' class='track-link'>");
+      buffer.push("<i class='fa fa-arrow-" + direction + "'></i>");
+      buffer.push(Em.get(l, 'title'));
+      if (clicks) {
+        buffer.push("<span class='badge badge-notification clicks'>" + clicks + "</span>");
+      }
+      buffer.push("</a></li>");
+    });
+
+    if (!this.get('expanded')) {
+      var remaining = links.length - MAX_SHOWN;
+      if (remaining > 0) {
+        buffer.push("<li><a href='#' class='toggle-more'>" + I18n.t('post.more_links', {count: remaining}) + "</a></li>");
+      }
+    }
+  },
+
+  _rerenderIfNeeded: function() {
+    this.rerender();
+  }.observes('expanded'),
+
+  click: function(e) {
+    if ($(e.target).hasClass('toggle-more')) {
+      this.toggleProperty('expanded');
+      return false;
+    }
+    return true;
+  }
+});

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

@@ -93,7 +93,7 @@
     </div>
 
     <div class='span5 gutter'>
-      {{collection contentBinding="internalLinks" itemViewClass="Discourse.PostLinkView" tagName="ul" classNames="post-links"}}
+      {{post-links links=internalLinks}}
       {{#if topic.details.can_reply_as_new_topic}}
         <a href='#' class='reply-new' {{action replyAsNewTopic this}}><i class='fa fa-plus'></i>{{i18n post.reply_as_new_topic}}</a>
       {{/if}}

app/assets/stylesheets/desktop/topic-post.scss

@@ -823,7 +823,11 @@ blockquote { /* solo quotes */
       margin-bottom: 20px;
       margin-top: 2px;
     }
-    a {color: scale-color($primary, $lightness: 50%);}
+    a.track-link {color: scale-color($primary, $lightness: 50%);}
+    a.toggle-more {
+      display: block;
+      text-align: right;
+    }
     li {margin-bottom: 10px;}
   }
 }

config/locales/client.en.yml

@@ -923,6 +923,7 @@ en:
       gap:
         one: "1 post hidden"
         other: "{{count}} posts hidden"
+      more_links: "{{count}} more..."
 
       has_replies:
         one: "Reply"