Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-04 02:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: Use empty heart for unliked state

Browse Source
This commit is contained in:
Kris 2018-04-23 12:41:41 -04:00
parent 6215baca97
commit f812f5cd1c
4 changed files with 5 additions and 5 deletions
app/assets
javascripts
discourse-common/lib
icon-library.js.es6
discourse/widgets
post-menu.js.es6
stylesheets
desktop
topic-post.scss
mobile
topic-post.scss

2
app/assets/javascripts/discourse-common/lib/icon-library.js.es6

@ -9,7 +9,7 @@ const REPLACEMENTS = {
'd-watching-first': 'dot-circle-o', 'd-watching-first': 'dot-circle-o',
'd-drop-expanded': 'caret-down', 'd-drop-expanded': 'caret-down',
'd-drop-collapsed': 'caret-right', 'd-drop-collapsed': 'caret-right',
'd-unliked': 'heart', 'd-unliked': 'heart-o',
'd-liked': 'heart', 'd-liked': 'heart',
'notification.mentioned': "at", 'notification.mentioned': "at",
'notification.group_mentioned': "at", 'notification.group_mentioned': "at",

4
app/assets/javascripts/discourse/widgets/post-menu.js.es6

@ -12,7 +12,7 @@ function animateHeart($elem, start, end, complete) {
.animate({ textIndent: end }, { .animate({ textIndent: end }, {
complete, complete,
step(now) { step(now) {
$(this).css('transform','scale('+now+')'); $(this).css('transform','scale('+now+')').addClass("fa-heart").removeClass("fa-heart-o");
}, },
duration: 150 duration: 150
}, 'linear'); }, 'linear');
@ -69,7 +69,7 @@ registerButton('like-count', attrs => {
const title = attrs.liked const title = attrs.liked
? count === 1 ? 'post.has_likes_title_only_you' : 'post.has_likes_title_you' ? count === 1 ? 'post.has_likes_title_only_you' : 'post.has_likes_title_you'
: 'post.has_likes_title'; : 'post.has_likes_title';
const icon = attrs.yours ? 'heart' : ''; const icon = attrs.yours ? 'heart-o' : '';
const additionalClass = attrs.yours ? 'my-likes' : 'regular-likes'; const additionalClass = attrs.yours ? 'my-likes' : 'regular-likes';
return { action: 'toggleWhoLiked', return { action: 'toggleWhoLiked',

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

@ -101,7 +101,7 @@ nav.post-controls {
} }
&.my-likes { &.my-likes {
margin-right: -2px; margin-right: -2px;
i.fa-heart { i.fa-heart-o {
padding-left: 10px; padding-left: 10px;
} }
} }

2
app/assets/stylesheets/mobile/topic-post.scss

@ -64,7 +64,7 @@ span.badge-posts {
button.like-count { button.like-count {
font-size: $font-up-1; font-size: $font-up-1;
padding: 8px 4px; padding: 8px 4px;
i.fa-heart { i.fa-heart, i.fa-heart-o {
padding-left: 8px; padding-left: 8px;
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
} }