diff --git a/app/assets/javascripts/discourse/widgets/post-links.js.es6 b/app/assets/javascripts/discourse/widgets/post-links.js.es6 index 6c8acb6653c..65f6f47991e 100644 --- a/app/assets/javascripts/discourse/widgets/post-links.js.es6 +++ b/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' + }))); + } } - return h('ul.post-links', result); + if (result.length) { + return h('ul.post-links', result); + } }, expandLinks() { diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 382f488bc33..364a8df1ce5 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -82,26 +82,35 @@ .post-links-container { @include unselectable; clear: both; - text-align: right; - margin-top: 1em; + + .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; diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index 110ad1968a0..3dd2d80eb44 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/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; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 3c3a4f6ddd7..9cfe190f830 100644 --- a/config/locales/client.en.yml +++ b/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" - other: "%{count} post links" + one: "1 more" + other: "%{count} more" topic_statuses: warning: diff --git a/test/javascripts/widgets/post-links-test.js.es6 b/test/javascripts/widgets/post-links-test.js.es6 index 3bda5fab879..289f947e813 100644 --- a/test/javascripts/widgets/post-links-test.js.es6 +++ b/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'); - }); + 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);