Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2024-09-21 08:36:17 +03:00
Code Issues Projects Releases Packages Wiki Activity

Wall: Redesign like and repost buttons

Browse source
This commit is contained in:
veselcraft 2021-11-27 16:31:00 +03:00
parent 7d94282ad4
commit f3791f6478
No known key found for this signature in database
GPG key ID: AED66BC1AC628A4E
5 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Web/Presenters/templates/components/post/microblogpost.xml
View file

@ -87,10 +87,9 @@
<div class="like_wrap"> <div class="like_wrap">
<a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')" <a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')">
class="post-like-button">
<div class="repost-icon" style="opacity: 0.4;"></div> <div class="repost-icon" style="opacity: 0.4;"></div>
<span class="likeCnt">{$post->getRepostCount()}</span> <span class="likeCnt">{if $post->getRepostCount() > 0}{$post->getRepostCount()}{/if}</span>
</a> </a>
{var liked = $post->hasLikeFrom($thisUser)} {var liked = $post->hasLikeFrom($thisUser)}
@ -98,8 +97,8 @@
class="post-like-button" class="post-like-button"
data-liked="{(int) $liked}" data-liked="{(int) $liked}"
data-likes="{$post->getLikesCount()}"> data-likes="{$post->getLikesCount()}">
<div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div> <div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{$post->getLikesCount()}</span> <span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
</a> </a>
</div> </div>
{/if} {/if}

4
Web/Presenters/templates/components/post/oldpost.xml
View file

@ -112,8 +112,8 @@
class="post-like-button" class="post-like-button"
data-liked="{(int) $liked}" data-liked="{(int) $liked}"
data-likes="{$post->getLikesCount()}"> data-likes="{$post->getLikesCount()}">
<div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div> <div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{$post->getLikesCount()}</span> <span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
</a> </a>
</div> </div>
</div> </div>

31
Web/static/css/microblog.css
View file

@ -36,18 +36,45 @@
color: grey; color: grey;
} }
.like_wrap {
display: flex;
}
.repost-icon { .repost-icon {
background: url('/assets/packages/static/openvk/img/published.gif') no-repeat 0px 0px; background: url('/assets/packages/static/openvk/img/published.gif') no-repeat 0px 0px;
height: 12px; height: 12px;
margin: 2px 3px 0px; margin: 2px 3px 0px;
width: 11px; width: 11px;
float: left;
} }
.repost-icon:hover { .heart {
background: url('/assets/packages/static/openvk/img/like.gif') no-repeat 1px 0px;
height: 10px;
margin: 2px 3px 0px;
width: 11px;
float: none;
opacity: 0.4;
}
#liked {
opacity: 1 !important; opacity: 1 !important;
} }
.heart:hover {
opacity: 0.4 !important;
}
.post-share-button, .post-like-button {
display: flex;
padding: 2px;
border-radius: 2px;
transition-duration: 0.2s;
}
.post-share-button:hover, .post-like-button:hover {
background-color: rgb(240, 240, 240);
}
.post-author .delete { .post-author .delete {
float: right; float: right;
display: inline-block; display: inline-block;

5
Web/static/css/style.css
View file

@ -1230,6 +1230,7 @@ body.scrolled .toTop:hover {
margin: 2px 3px 0px; margin: 2px 3px 0px;
width: 11px; width: 11px;
float: left; float: left;
opacity: 0.4;
} }
.likeCnt { .likeCnt {
@ -1242,6 +1243,10 @@ body.scrolled .toTop:hover {
opacity: 1 !important; opacity: 1 !important;
} }
#liked {
opacity: 1 !important;
}
.content_title_expanded { .content_title_expanded {
margin-top: 5px; margin-top: 5px;
} }

9
Web/static/js/al_wall.js
View file

@ -89,12 +89,15 @@ u(".post-like-button").on("click", function(e) {
var link = u(this).attr("href"); var link = u(this).attr("href");
var heart = u(".heart", thisBtn); var heart = u(".heart", thisBtn);
var counter = u(".likeCnt", thisBtn); var counter = u(".likeCnt", thisBtn);
var likes = counter.text(); var likes = counter.text() === "" ? 0 : counter.text();
var isLiked = heart.attr("style") === 'opacity: 1;'; var isLiked = heart.attr("id") === 'liked';
ky(link); ky(link);
heart.attr("style", isLiked ? 'opacity: 0.4;' : 'opacity: 1;'); heart.attr("id", isLiked ? '' : 'liked');
counter.text(parseInt(likes) + (isLiked ? -1 : 1)); counter.text(parseInt(likes) + (isLiked ? -1 : 1));
if (counter.text() === "0") {
counter.text("");
}
return false; return false;
}); });