Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2024-12-22 16:42:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat(wall): add likes tooltip

Browse source 
resolves #1094 resolves #998 resolves #31
This commit is contained in:
mrilyew 2024-11-22 21:27:21 +03:00
parent cf0b4be3fb
commit aff19de2ea
10 changed files with 136 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
VKAPI/Handlers/Likes.php
View file

@ -198,7 +198,7 @@ final class Likes extends VKAPIRequestHandler
if(!$extended)
$res->items[] = $liker->getId();
else
$res->items[] = $liker->toVkApiStruct();
$res->items[] = $liker->toVkApiStruct(NULL, 'photo_50');
}
return $res;

2
Web/Presenters/templates/Photos/Photo.xml
View file

@ -36,7 +36,7 @@
{var $liked = $photo->hasLikeFrom($thisUser)}
{var $likesCount = $photo->getLikesCount()}
<div class='like_wrap tidy'>
<a href="/photo{$photo->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
<a href="/photo{$photo->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$photo->getPrettyId()}" data-type='photo'>
<div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
</a>

2
Web/Presenters/templates/Videos/View.xml
View file

@ -38,7 +38,7 @@
{var $liked = $video->hasLikeFrom($thisUser)}
{var $likesCount = $video->getLikesCount()}
<div class='like_wrap tidy'>
<a href="/video{$video->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
<a href="/video{$video->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$video->getPrettyId()}" data-type='video'>
<div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
</a>

2
Web/Presenters/templates/components/comment.xml
View file

@ -60,7 +60,7 @@
<a href="javascript:reportComment()">{_report}</a>
{/if}
<div style="float: right; font-size: .7rem;">
<a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}">
<a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}" data-likes='{$likesCount}' data-id="1_{$comment->getPrettyId()}" data-type='comment'>
<div class="heart" style="{if $comment->hasLikeFrom($thisUser)}opacity: 1;{else}opacity: 0.4;{/if}"></div>
<span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
</a>

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

@ -131,7 +131,7 @@
{if !($forceNoLike ?? false)}
{var $liked = $post->hasLikeFrom($thisUser)}
<a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
<a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$post->getPrettyId()}" data-type='post'>
<div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
</a>

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

@ -157,7 +157,7 @@
<div n:if="!($forceNoLike ?? false)" class="like_wrap">
{ifset $thisUser}
{var $liked = $post->hasLikeFrom($thisUser)}
<a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
<a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$post->getPrettyId()}" data-type='post'>
<div class="heart" id="{if $liked}liked{/if}"></div>
<span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
</a>

70
Web/static/css/main.css
View file

@ -3783,3 +3783,73 @@ hr {
height: 206px;
overflow-x: hidden;
}
.like_tooltip_wrapper .like_tooltip_head {
background: linear-gradient(180deg, #595959, #515151);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.18) inset;
border: solid 1px #575757;
padding: 4px 10px;
width: 200px;
display: flex;
justify-content: space-between;
align-items: center;
}
.like_tooltip_wrapper .like_tooltip_head span, .like_tooltip_wrapper .like_tooltip_head a {
font-size: 12px;
color: white;
height: 14px;
}
.like_tooltip_wrapper .like_tooltip_body {
background: white;
padding: 10px;
border: 1px solid #878787;
cursor: default;
}
.like_tooltip_wrapper .like_tooltip_body .like_tooltip_body_grid {
display: flex;
gap: 6px;
}
.like_tooltip_wrapper .like_tooltip_body img {
width: 25px;
height: 25px;
}
.like_tooltip_wrapper .like_tooltip_body a {
height: 25px;
}
.tippy-box[data-theme~="special"] {
margin: 0;
border: unset;
border-radius: 0px;
background-color: #fff;
}
.tippy-box[data-theme~="special"] .tippy-arrow {
z-index: 9;
}
.tippy-box[data-theme~="special"] .tippy-arrow::before {
border-top-color: white;
}
.tippy-box[data-theme~="special"][data-placement^=bottom] .tippy-arrow::before {
border-bottom-color: #525252;
}
.tippy-box[data-animation='up_down'] {
transition: all 50ms;
}
.tippy-box[data-animation='up_down'][data-state='hidden'] {
opacity: 0;
inset: auto auto 10px 0px;
}
.tippy-box[data-animation='up_down'][data-state='visible'] {
inset: auto auto 0px 0px;
}

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

@ -581,6 +581,54 @@ tippy.delegate("body", {
}
});
tippy.delegate('body', {
animation: 'up_down',
target: `.post-like-button[data-type]:not([data-likes="0"])`,
theme: "special vk",
content: "⌛",
allowHTML: true,
interactive: true,
interactiveDebounce: 500,
onCreate: async function(that) {
that._likesList = null;
},
onShow: async function(that) {
const id = that.reference.dataset.id
const type = that.reference.dataset.type
let final_type = type
if(type == 'post') {
final_type = 'wall'
}
if(!that._likesList) {
that._likesList = await window.OVKAPI.call('likes.getList', {'extended': 1, 'count': 6, 'type': type, 'owner_id': id.split('_')[0], 'item_id': id.split('_')[1]})
}
const final_template = u(`
<div style='margin: -6px -10px;'>
<div class='like_tooltip_wrapper'>
<a href="/${final_type}/${id}/likes" class='like_tooltip_head'>
<span>${tr('liked_by_x_people', that._likesList.count)}</span>
</a>
<div class='like_tooltip_body'>
<div class='like_tooltip_body_grid'></div>
</div>
</div>
</div>
`)
that._likesList.items.forEach(item => {
final_template.find('.like_tooltip_body .like_tooltip_body_grid').append(`
<a href='/id${item.id}'><img src='${item.photo_50}' alt='.'></a>
`)
})
that.setContent(final_template.nodes[0].outerHTML)
}
})
async function showArticle(note_id) {
u("body").addClass("dimmed");
let note = await API.Notes.getNote(note_id);

6
locales/en.strings
View file

@ -275,6 +275,12 @@
"likers_list" = "Likers list";
"liked_verb" = "Liked by";
"liked_by_x_people_one" = "Liked by $1 user";
"liked_by_x_people_few" = "Liked by $1 users";
"liked_by_x_people_many" = "Liked by $1 users";
"liked_by_x_people_other" = "Liked by $1 users";
"liked_by_x_people_zero" = "Nobody liked";
/* Friends */
"friends" = "Friends";

6
locales/ru.strings
View file

@ -254,6 +254,12 @@
"likers_list" = "Список лайкнувших";
"liked_verb" = "Понравилось";
"liked_by_x_people_one" = "Понравилось $1 человеку";
"liked_by_x_people_few" = "Понравилось $1 людям";
"liked_by_x_people_many" = "Понравилось $1 людям";
"liked_by_x_people_other" = "Понравилось $1 людям";
"liked_by_x_people_zero" = "Никому не понравилось";
/* Friends */
"friends" = "Друзья";