mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 22:41:27 +00:00
Update PostReactions partial, hide bookmark button unless post has public visibility
This commit is contained in:
Daniel Supernault
parent
e8a6a8c71e
commit
025e685f39
1 changed files with 251 additions and 0 deletions
251
resources/assets/components/partials/post/PostReactions.vue
Normal file
251
resources/assets/components/partials/post/PostReactions.vue
Normal file
|
|
@ -0,0 +1,251 @@
|
||||||
|
<template>
|
||||||
|
<div class="px-3 my-3" style="z-index:3;">
|
||||||
|
<div v-if="(status.favourites_count || status.reblogs_count) && ((status.hasOwnProperty('liked_by') && status.liked_by.url) || (status.hasOwnProperty('reblogs_count') && status.reblogs_count))" class="mb-0 d-flex justify-content-between">
|
||||||
|
<p v-if="!hideCounts && status.favourites_count" class="mb-2 reaction-liked-by">
|
||||||
|
Liked by
|
||||||
|
<span v-if="status.favourites_count == 1 && status.favourited == true" class="font-weight-bold">me</span>
|
||||||
|
<span v-else>
|
||||||
|
<router-link :to="'/i/web/profile/' + status.liked_by.id" class="primary font-weight-bold"">@{{ status.liked_by.username}}</router-link>
|
||||||
|
<span v-if="status.liked_by.others || status.favourites_count > 1">
|
||||||
|
and <a href="#" class="primary font-weight-bold" @click.prevent="showLikes()">{{ count(status.favourites_count - 1) }} others</a>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p v-if="!hideCounts && status.reblogs_count" class="mb-2 reaction-liked-by">
|
||||||
|
Shared by
|
||||||
|
<span v-if="status.reblogs_count == 1 && status.reblogged == true" class="font-weight-bold">me</span>
|
||||||
|
<a v-else class="primary font-weight-bold" href="#" @click.prevent="showShares()">
|
||||||
|
{{ count(status.reblogs_count) }} {{ status.reblogs_count > 1 ? 'others' : 'other' }}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between" style="font-size: 14px !important;">
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-light font-weight-bold rounded-pill mr-2" @click.prevent="like()">
|
||||||
|
<span v-if="status.favourited" class="primary">
|
||||||
|
<i class="fas fa-heart mr-md-1 text-danger fa-lg"></i>
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<i class="far fa-heart mr-md-2"></i>
|
||||||
|
</span>
|
||||||
|
<span v-if="likesCount && !hideCounts">
|
||||||
|
{{ count(likesCount)}}
|
||||||
|
<span class="d-none d-md-inline">{{ likesCount == 1 ? $t('common.like') : $t('common.likes') }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<span class="d-none d-md-inline">{{ $t('common.like') }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button v-if="!status.comments_disabled" type="button" class="btn btn-light font-weight-bold rounded-pill mr-2 px-3" @click="showComments()">
|
||||||
|
<i class="far fa-comment mr-md-2"></i>
|
||||||
|
<span v-if="replyCount && !hideCounts">
|
||||||
|
{{ count(replyCount) }}
|
||||||
|
<span class="d-none d-md-inline">{{ replyCount == 1 ? $t('common.comment') : $t('common.comments') }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<span class="d-none d-md-inline">{{ $t('common.comment') }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-light font-weight-bold rounded-pill"
|
||||||
|
:disabled="isReblogging"
|
||||||
|
@click="handleReblog()">
|
||||||
|
<span v-if="isReblogging">
|
||||||
|
<b-spinner variant="warning" small />
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<i v-if="status.reblogged == true" class="fas fa-retweet fa-lg text-warning"></i>
|
||||||
|
<i v-else class="far fa-retweet"></i>
|
||||||
|
|
||||||
|
<span v-if="status.reblogs_count && !hideCounts" class="ml-md-2">
|
||||||
|
{{ count(status.reblogs_count) }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="status.visibility === 'public'"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-light font-weight-bold rounded-pill ml-3"
|
||||||
|
:disabled="isBookmarking"
|
||||||
|
@click="handleBookmark()">
|
||||||
|
<span v-if="isBookmarking">
|
||||||
|
<b-spinner variant="warning" small />
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<i v-if="status.hasOwnProperty('bookmarked_at') || (status.hasOwnProperty('bookmarked') && status.bookmarked == true)" class="fas fa-bookmark fa-lg text-warning"></i>
|
||||||
|
<i v-else class="far fa-bookmark"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button v-if="admin" type="button" class="ml-3 btn btn-light font-weight-bold rounded-pill" v-b-tooltip.hover title="Moderation Tools" @click="openModTools()">
|
||||||
|
<i class="far fa-user-crown"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
import CommentDrawer from './CommentDrawer.vue';
|
||||||
|
import ProfileHoverCard from './../profile/ProfileHoverCard.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
status: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
profile: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
admin: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
"comment-drawer": CommentDrawer,
|
||||||
|
"profile-hover-card": ProfileHoverCard
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
key: 1,
|
||||||
|
menuLoading: true,
|
||||||
|
sensitive: false,
|
||||||
|
isReblogging: false,
|
||||||
|
isBookmarking: false,
|
||||||
|
owner: false,
|
||||||
|
license: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
hideCounts: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.hideCounts == true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
autoloadComments: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.autoloadComments == true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
newReactions: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.newReactions;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
likesCount: function() {
|
||||||
|
return this.status.favourites_count;
|
||||||
|
},
|
||||||
|
|
||||||
|
replyCount: function() {
|
||||||
|
return this.status.reply_count;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
count(val) {
|
||||||
|
return App.util.format.count(val);
|
||||||
|
},
|
||||||
|
|
||||||
|
like() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
if(this.status.favourited) {
|
||||||
|
this.$emit('unlike');
|
||||||
|
} else {
|
||||||
|
this.$emit('like');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showLikes() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
this.$emit('likes-modal');
|
||||||
|
},
|
||||||
|
|
||||||
|
showShares() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
this.$emit('shares-modal');
|
||||||
|
},
|
||||||
|
|
||||||
|
showComments() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
this.$emit('toggle-comments');
|
||||||
|
},
|
||||||
|
|
||||||
|
copyLink() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
App.util.clipboard(this.status.url);
|
||||||
|
},
|
||||||
|
|
||||||
|
shareToOther() {
|
||||||
|
if (navigator.canShare) {
|
||||||
|
navigator.share({
|
||||||
|
url: this.status.url
|
||||||
|
})
|
||||||
|
.then(() => console.log('Share was successful.'))
|
||||||
|
.catch((error) => console.log('Sharing failed', error));
|
||||||
|
} else {
|
||||||
|
swal('Not supported', 'Your current device does not support native sharing.', 'error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
counterChange(type) {
|
||||||
|
this.$emit('counter-change', type);
|
||||||
|
},
|
||||||
|
|
||||||
|
showCommentLikes(post) {
|
||||||
|
this.$emit('comment-likes-modal', post);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleReblog() {
|
||||||
|
this.isReblogging = true;
|
||||||
|
if(this.status.reblogged) {
|
||||||
|
this.$emit('unshare');
|
||||||
|
} else {
|
||||||
|
this.$emit('share');
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isReblogging = false;
|
||||||
|
}, 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleBookmark() {
|
||||||
|
event.currentTarget.blur();
|
||||||
|
this.isBookmarking = true;
|
||||||
|
this.$emit('bookmark');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isBookmarking = false;
|
||||||
|
}, 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
getStatusAvatar() {
|
||||||
|
if(window._sharedData.user.id == this.status.account.id) {
|
||||||
|
return window._sharedData.user.avatar;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.status.account.avatar;
|
||||||
|
},
|
||||||
|
|
||||||
|
openModTools() {
|
||||||
|
this.$emit('mod-tools');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in a new issue