FEATURE: auto expand incoming/outgoing links

app/assets/javascripts/discourse/widgets/post-links.js.es6

@@ -16,20 +16,14 @@ export default createWidget('post-links', {
 
     const result = [];
     if (links.length) {
-      if (state.collapsed) {
-        return this.attach('link', {
-          labelCount: `post_links.title`,
-          title: "post_links.about",
-          count: links.length,
-          action: 'expandLinks',
-          className: 'expand-links'
-        });
-      }
 
       const seenTitles = {};
 
       let titleCount = 0;
-      links.forEach(function(l) {
+
+      let hasMore = links.any((l) => {
+        if (this.state.collapsed && titleCount === 5) { return true; }
+
         let title = l.title;
         if (title && !seenTitles[title]) {
           seenTitles[title] = true;
@@ -47,9 +41,21 @@ export default createWidget('post-links', {
           ));
         }
       });
+
+      if (hasMore) {
+        result.push(h('li', this.attach('link', {
+          labelCount: `post_links.title`,
+          title: "post_links.about",
+          count: links.length,
+          action: 'expandLinks',
+          className: 'expand-links'
+        })));
+      }
     }
 
+    if (result.length) {
       return h('ul.post-links', result);
+    }
   },
 
   expandLinks() {

app/assets/stylesheets/common/base/topic.scss

@@ -82,26 +82,35 @@
 .post-links-container {
   @include unselectable;
   clear: both;
-  text-align: right;
+
+  .post-links {
     margin-top: 1em;
+    padding: 1em 1em 0;
+    background: blend-primary-secondary(4%);
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+  }
 
   .expand-links {
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+    color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
   }
 
   .track-link {
-    padding-left: 10px;
+    padding-left: 0;
     display: inline-block;
     overflow: hidden;
   }
 
   ul {
+    margin: 0;
     list-style: none;
 
     li {
       margin-bottom: 0.5em;
       a[href] {
-        color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+        color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
+      }
+      .clicks {
+        margin-left: 0.5em;
       }
       i {
         font-size: 0.857em;

app/assets/stylesheets/common/components/badges.css.scss

@@ -273,9 +273,9 @@
 
   &.clicks {
     font-weight: normal;
-    background-color: dark-light-diff($primary, $secondary, 85%, -60%);
+    background-color: dark-light-diff($primary, $secondary, 88%, -60%);
     top: -1px;
-    color: dark-light-diff($primary, $secondary, 50%, -20%);
+    color: dark-light-diff($primary, $secondary, 40%, -20%);
     position: relative;
     margin-left: 2px;
     border: none;

config/locales/client.en.yml

@@ -1832,10 +1832,10 @@ en:
         one: "1 click"
         other: "%{count} clicks"
     post_links:
-      about: "expand the links for this post"
+      about: "expand more links for this post"
       title:
-        one: "1 post link"
+        one: "1 more"
-        other: "%{count} post links"
+        other: "%{count} more"
 
     topic_statuses:
       warning:

test/javascripts/widgets/post-links-test.js.es6

@@ -14,10 +14,7 @@ widgetTest("duplicate links", {
     });
   },
   test(assert) {
-    click('.expand-links');
-    andThen(() => {
     assert.equal(this.$('.post-links a.track-link').length, 1, 'it hides the dupe link');
-    });
   }
 });
 
@@ -38,7 +35,7 @@ widgetTest("collapsed links", {
     });
   },
   test(assert) {
-    assert.ok(this.$('.expand-links').length, 'collapsed by default');
+    assert.ok(this.$('.expand-links').length === 1, 'collapsed by default');
     click('a.expand-links');
     andThen(() => {
       assert.equal(this.$('.post-links a.track-link').length, 7);