UX: show heart glyph on your own likes count

This commit is contained in:
Arpit Jalan 2018-03-30 08:48:15 +05:30
parent 131b19c26b
commit a55b458e56
3 changed files with 15 additions and 3 deletions

View File

@ -69,11 +69,15 @@ 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' : '';
return { action: 'toggleWhoLiked', return { action: 'toggleWhoLiked',
title, title,
className: 'like-count highlight-action', className: 'like-count highlight-action',
contents: count, contents: count,
icon,
iconRight: true,
titleOptions: {count: attrs.liked ? (count-1) : count } titleOptions: {count: attrs.liked ? (count-1) : count }
}; };
} }

View File

@ -57,6 +57,10 @@ nav.post-controls {
.like-count { .like-count {
font-size: $font-up-1; font-size: $font-up-1;
margin-right: -15px; margin-right: -15px;
i.fa-heart {
padding-left: 5px;
color: $love;
}
} }
.highlight-action { .highlight-action {

View File

@ -29,7 +29,7 @@ span.badge-posts {
.topic-post { .topic-post {
nav.post-controls { nav.post-controls {
clear: both; clear: both;
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
.d-icon { .d-icon {
opacity: 1.0; opacity: 1.0;
} }
@ -51,7 +51,7 @@ span.badge-posts {
} }
&.reply { &.reply {
float: right; float: right;
color: $primary-high; color: $primary-high;
} }
&.has-like { &.has-like {
color: $love; color: $love;
@ -64,6 +64,10 @@ span.badge-posts {
button.like-count { button.like-count {
font-size: $font-0; font-size: $font-0;
padding: 8px 4px; padding: 8px 4px;
i.fa-heart {
padding-left: 5px;
color: $love;
}
} }
} }
} }
@ -404,7 +408,7 @@ blockquote {
} }
.gap { .gap {
padding: 0.25em 0; padding: 0.25em 0;
} }
.gutter { display: none; } .gutter { display: none; }