forked from mirror/pixelfed
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