github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-23 19:54:14 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: use down chevron icon to expand "show more links.."

Browse Source
This commit is contained in:
Arpit Jalan
2017-07-21 23:21:56 +05:30
parent fff5e2c3a5
commit 6d09fbde44
4 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/widgets/topic-map.js.es6
View File

@ -18,10 +18,15 @@ function renderParticipants(userFilters, participants) {
createWidget('topic-map-show-links', { createWidget('topic-map-show-links', {
tagName: 'div.link-summary', tagName: 'div.link-summary',
html(attrs) { html(attrs) {
return h('a', I18n.t('topic_map.links_shown', { totalLinks: attrs.totalLinks })); return h('span', this.attach('button', {
title: 'topic_map.links_shown',
icon: 'chevron-down',
action: 'showLinks',
className: 'btn'
}));
}, },
click() { showLinks() {
this.sendWidgetAction('showAllLinks'); this.sendWidgetAction('showAllLinks');
} }
}); });
@ -179,7 +184,7 @@ createWidget('topic-map-expanded', {
]; ];
if (!state.allLinksShown && links.length < attrs.topicLinks.length) { if (!state.allLinksShown && links.length < attrs.topicLinks.length) {
showAllLinksContent.push(this.attach('topic-map-show-links', { totalLinks: attrs.topicLinks.length })); showAllLinksContent.push(this.attach('topic-map-show-links'));
} }
const section = h('section.links', showAllLinksContent); const section = h('section.links', showAllLinksContent);

10
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -419,6 +419,16 @@ a.star {
} }
} }
} }
.link-summary .btn {
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
background: blend-primary-secondary(5%);
width: 100%;
&:hover {
color: $primary;
background: dark-light-diff($primary, $secondary, 90%, -80%);
}
}
} }
#topic-footer-buttons { #topic-footer-buttons {

6
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -309,6 +309,12 @@ a.star {
} }
} }
} }
.link-summary .btn {
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
background: blend-primary-secondary(5%);
width: 100%;
}
} }
#topic-footer-buttons { #topic-footer-buttons {

2
test/javascripts/widgets/post-test.js.es6
View File

@ -765,7 +765,7 @@ widgetTest("topic map - links", {
assert.equal(this.$('.topic-map-expanded .topic-link').length, 5, 'it limits the links displayed'); assert.equal(this.$('.topic-map-expanded .topic-link').length, 5, 'it limits the links displayed');
}); });
click('.link-summary a'); click('.link-summary button');
andThen(() => { andThen(() => {
assert.equal(this.$('.topic-map-expanded .topic-link').length, 6, 'all links now shown'); assert.equal(this.$('.topic-map-expanded .topic-link').length, 6, 'all links now shown');
}); });