github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 16:52:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FEATURE: auto expand incoming/outgoing links

Browse Source
This commit is contained in:
Sam 2016-06-08 16:48:37 +10:00
parent 7aac5baeed
commit 6d10812b26
5 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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() {

19
app/assets/stylesheets/common/base/topic.scss
View File

@ -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;

4
app/assets/stylesheets/common/components/badges.css.scss
View File

@ -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;

6
config/locales/client.en.yml
View File

@ -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:

7
test/javascripts/widgets/post-links-test.js.es6
View File

@ -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);