mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 06:21:27 +00:00
Update context menu, add mute/block/unfollow actions and update relationship store accordingly
This commit is contained in:
Daniel Supernault
parent
b8e96a5ff3
commit
81d1e0fdab
2 changed files with 951 additions and 715 deletions
|
|
@ -10,79 +10,136 @@
|
|||
body-class="list-group-flush p-0 rounded">
|
||||
|
||||
<div class="list-group text-center">
|
||||
<div
|
||||
v-if="status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer font-weight-bold"
|
||||
@click="ctxMenuGoToPost()">
|
||||
{{ $t('menu.viewPost') }}
|
||||
<div v-if="status.visibility !== 'archived'" class="list-group-item d-flex p-0 m-0">
|
||||
<div class="border-right p-2 w-50">
|
||||
<a
|
||||
v-if="status"
|
||||
class="menu-option"
|
||||
:href="status.url"
|
||||
@click.prevent="ctxMenuGoToPost()">
|
||||
<div class="action-icon-link">
|
||||
<div class="icon"><i class="fal fa-images fa-lg"></i></div>
|
||||
<p class="mb-0">{{ $t('menu.viewPost') }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer font-weight-bold"
|
||||
@click="ctxMenuGoToProfile()">
|
||||
{{ $t('menu.viewProfile') }}
|
||||
<div class="p-2 flex-grow-1">
|
||||
<a
|
||||
v-if="status"
|
||||
class="menu-option"
|
||||
:href="status.account.url"
|
||||
@click.prevent="ctxMenuGoToProfile()">
|
||||
<div class="action-icon-link">
|
||||
<div class="icon"><i class="fal fa-user fa-lg"></i></div>
|
||||
<p class="mb-0">{{ $t('menu.viewProfile') }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<template v-if="ctxMenuRelationship">
|
||||
<a
|
||||
v-if="ctxMenuRelationship.following"
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="handleUnfollow">
|
||||
{{ $t('profile.unfollow') }}
|
||||
</a>
|
||||
|
||||
<div v-else class="d-flex">
|
||||
<div class="p-3 border-right w-50 text-center">
|
||||
<a
|
||||
class="small menu-option text-muted"
|
||||
href="#"
|
||||
@click.prevent="handleMute">
|
||||
<div class="action-icon-link-inline">
|
||||
<div class="icon"><i class="far" :class="[ ctxMenuRelationship.muting ? 'fa-eye' : 'fa-eye-slash' ]"></i></div>
|
||||
<p class="text-muted mb-0">{{ ctxMenuRelationship.muting ? 'Unmute' : 'Mute' }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-3 w-50">
|
||||
<a
|
||||
class="small menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="handleBlock">
|
||||
<div class="action-icon-link-inline">
|
||||
<div class="icon"><i class="far fa-shield-alt"></i></div>
|
||||
<p class="text-danger mb-0">Block</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a
|
||||
v-if="status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer font-weight-bold"
|
||||
@click="ctxMenuShare()">
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="ctxMenuShare()">
|
||||
{{ $t('common.share') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status && profile && profile.is_admin == true && status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer font-weight-bold"
|
||||
@click="ctxModMenuShow()">
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="ctxModMenuShow()">
|
||||
{{ $t('menu.moderationTools') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status && status.account.id != profile.id"
|
||||
class="list-group-item rounded cursor-pointer text-danger font-weight-bold"
|
||||
@click="ctxMenuReportPost()">
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="ctxMenuReportPost()">
|
||||
{{ $t('menu.report') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status && profile.id == status.account.id && status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer text-danger font-weight-bold"
|
||||
@click="archivePost(status)">
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="archivePost(status)">
|
||||
{{ $t('menu.archive') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status && profile.id == status.account.id && status.visibility == 'archived'"
|
||||
class="list-group-item rounded cursor-pointer text-danger font-weight-bold"
|
||||
@click="unarchivePost(status)">
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="unarchivePost(status)">
|
||||
{{ $t('menu.unarchive') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="config.ab.pue && status && profile.id == status.account.id && status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer text-danger font-weight-bold"
|
||||
@click="editPost(status)">
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="editPost(status)">
|
||||
Edit
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status && (profile.is_admin || profile.id == status.account.id) && status.visibility !== 'archived'"
|
||||
class="list-group-item rounded cursor-pointer text-danger font-weight-bold"
|
||||
@click="deletePost(status)">
|
||||
class="list-group-item menu-option text-danger"
|
||||
href="#"
|
||||
@click.prevent="deletePost(status)">
|
||||
<div v-if="isDeleting" class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('common.delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="list-group-item rounded cursor-pointer text-lighter font-weight-bold"
|
||||
@click="closeCtxMenu()">
|
||||
<a
|
||||
class="list-group-item menu-option text-lighter"
|
||||
href="#"
|
||||
@click.prevent="closeCtxMenu()">
|
||||
{{ $t('common.cancel') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
|
|
@ -98,7 +155,7 @@
|
|||
<div class="list-group text-center">
|
||||
<p class="py-2 px-3 mb-0">
|
||||
<div
|
||||
class="text-center font-weight-bold text-danger">
|
||||
class="text-center menu-option text-danger">
|
||||
{{ $t('menu.moderationTools') }}
|
||||
</div>
|
||||
|
||||
|
|
@ -107,38 +164,43 @@
|
|||
</div>
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="list-group-item rounded cursor-pointer"
|
||||
@click="moderatePost(status, 'unlist')">
|
||||
<a
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="moderatePost(status, 'unlist')">
|
||||
{{ $t('menu.unlistFromTimelines') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-if="status.sensitive"
|
||||
class="list-group-item rounded cursor-pointer"
|
||||
@click="moderatePost(status, 'remcw')">
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="moderatePost(status, 'remcw')">
|
||||
{{ $t('menu.removeCW') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
<a
|
||||
v-else
|
||||
class="list-group-item rounded cursor-pointer"
|
||||
@click="moderatePost(status, 'addcw')">
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="moderatePost(status, 'addcw')">
|
||||
{{ $t('menu.addCW') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="list-group-item rounded cursor-pointer"
|
||||
@click="moderatePost(status, 'spammer')">
|
||||
<a
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="moderatePost(status, 'spammer')">
|
||||
{{ $t('menu.markAsSpammer') }}<br />
|
||||
<span class="small">{{ $t('menu.markAsSpammerText') }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="list-group-item rounded cursor-pointer text-lighter"
|
||||
@click="ctxModMenuClose()">
|
||||
<a
|
||||
class="list-group-item menu-option text-lighter"
|
||||
href="#"
|
||||
@click.prevent="ctxModMenuClose()">
|
||||
{{ $t('common.cancel') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
|
|
@ -170,10 +232,26 @@
|
|||
rounded
|
||||
size="sm"
|
||||
body-class="list-group-flush p-0 rounded text-center">
|
||||
<div class="list-group-item rounded cursor-pointer" @click="shareStatus(status, $event)">{{status.reblogged ? 'Unshare' : 'Share'}} {{ $t('menu.toFollowers') }}</div>
|
||||
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">{{ $t('common.copyLink') }}</div>
|
||||
<div v-if="status && status.local == true && !status.in_reply_to_id" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">{{ $t('menu.embed') }}</div>
|
||||
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">{{ $t('common.cancel') }}</div>
|
||||
<a
|
||||
class="list-group-item menu-option"
|
||||
href="#"
|
||||
@click.prevent="ctxMenuCopyLink()">
|
||||
{{ $t('common.copyLink') }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="status && status.local == true && !status.in_reply_to_id"
|
||||
class="list-group-item menu-option"
|
||||
@click.prevent="ctxMenuEmbed()">
|
||||
{{ $t('menu.embed') }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="list-group-item menu-option text-lighter"
|
||||
href="#"
|
||||
@click.prevent="closeCtxShareMenu()">
|
||||
{{ $t('common.cancel') }}
|
||||
</a>
|
||||
</b-modal>
|
||||
|
||||
<b-modal ref="ctxEmbedModal"
|
||||
|
|
@ -339,19 +417,19 @@
|
|||
ctxMenu() {
|
||||
this.ctxMenuStatus = this.status;
|
||||
this.ctxEmbedPayload = window.App.util.embed.post(this.status.url);
|
||||
// if(this.status.account.id == this.profile.id) {
|
||||
if(this.status.account.id == this.profile.id) {
|
||||
this.ctxMenuRelationship = false;
|
||||
this.$refs.ctxModal.show();
|
||||
// } else {
|
||||
// axios.get('/api/pixelfed/v1/accounts/relationships', {
|
||||
// params: {
|
||||
// 'id[]': this.status.account.id
|
||||
// }
|
||||
// }).then(res => {
|
||||
// this.ctxMenuRelationship = res.data[0];
|
||||
// this.$refs.ctxModal.show();
|
||||
// });
|
||||
// }
|
||||
} else {
|
||||
axios.get('/api/v1/accounts/relationships', {
|
||||
params: {
|
||||
'id[]': this.status.account.id
|
||||
}
|
||||
}).then(res => {
|
||||
this.ctxMenuRelationship = res.data[0];
|
||||
this.$refs.ctxModal.show();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
closeCtxMenu() {
|
||||
|
|
@ -667,28 +745,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
shareStatus(status, $event) {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.closeModals();
|
||||
|
||||
axios.post('/i/share', {
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
status.reblogs_count = res.data.count;
|
||||
status.reblogged = !status.reblogged;
|
||||
// if(status.reblogged) {
|
||||
// swal('Success', 'You shared this post', 'success');
|
||||
// } else {
|
||||
// swal('Success', 'You unshared this post', 'success');
|
||||
// }
|
||||
}).catch(err => {
|
||||
swal(this.$t('common.error'), this.$t('common.errorMsg'), 'error');
|
||||
});
|
||||
},
|
||||
|
||||
statusUrl(status) {
|
||||
if(status.account.local == true) {
|
||||
this.$router.push({
|
||||
|
|
@ -741,10 +797,18 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if(window.confirm(this.$t('menu.deletePostConfirm')) == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
swal({
|
||||
title: 'Confirm Delete',
|
||||
text: 'Are you sure you want to delete this post?',
|
||||
icon: "warning",
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
})
|
||||
.then(res => {
|
||||
if(!res) {
|
||||
this.closeModals();
|
||||
this.isDeleting = false;
|
||||
} else {
|
||||
axios.post('/i/delete', {
|
||||
type: 'status',
|
||||
item: status.id
|
||||
|
|
@ -753,8 +817,12 @@
|
|||
this.closeModals();
|
||||
this.isDeleting = false;
|
||||
}).catch(err => {
|
||||
this.closeModals();
|
||||
this.isDeleting = false;
|
||||
swal(this.$t('common.error'), this.$t('common.errorMsg'), 'error');
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
owner(status) {
|
||||
|
|
@ -776,7 +844,7 @@
|
|||
|
||||
axios.post('/api/pixelfed/v2/status/' + status.id + '/archive')
|
||||
.then(res => {
|
||||
this.$emit('status-delete', status.id);
|
||||
this.$emit('delete', status.id);
|
||||
this.$emit('archived', status.id);
|
||||
this.closeModals();
|
||||
});
|
||||
|
|
@ -797,7 +865,157 @@
|
|||
editPost(status) {
|
||||
this.closeModals();
|
||||
this.$emit('edit', status);
|
||||
},
|
||||
|
||||
handleMute() {
|
||||
if(!this.ctxMenuRelationship) {
|
||||
return;
|
||||
}
|
||||
let curState = this.ctxMenuRelationship.muting;
|
||||
|
||||
swal({
|
||||
title: curState ? 'Confirm Unmute' : 'Confirm Mute',
|
||||
text: curState ? 'Are you sure you want to unmute this account?' : 'Are you sure you want to mute this account?',
|
||||
icon: "warning",
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
})
|
||||
.then(res => {
|
||||
if(!res) {
|
||||
this.closeModals();
|
||||
} else {
|
||||
let url = curState ?
|
||||
`/api/v1/accounts/${this.status.account.id}/unmute` :
|
||||
`/api/v1/accounts/${this.status.account.id}/mute`;
|
||||
axios.post(url)
|
||||
.then(res => {
|
||||
this.closeModals();
|
||||
this.$emit('muted', this.status);
|
||||
this.$store.commit('updateRelationship', [res.data]);
|
||||
})
|
||||
.catch(err => {
|
||||
this.closeModals();
|
||||
if(err && err.response && err.response.data && err.response.data.error) {
|
||||
swal('Error', err.response.data.error, 'error');
|
||||
} else {
|
||||
swal('Oops!', 'An error occured, please try again later.', 'error');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleBlock() {
|
||||
if(!this.ctxMenuRelationship) {
|
||||
return;
|
||||
}
|
||||
let curState = this.ctxMenuRelationship.blocking;
|
||||
|
||||
swal({
|
||||
title: curState ? 'Confirm Unblock' : 'Confirm Block',
|
||||
text: curState ? 'Are you sure you want to unblock this account?' : 'Are you sure you want to block this account?',
|
||||
icon: "warning",
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
})
|
||||
.then(res => {
|
||||
if(!res) {
|
||||
this.closeModals();
|
||||
} else {
|
||||
let url = curState ?
|
||||
`/api/v1/accounts/${this.status.account.id}/unblock` :
|
||||
`/api/v1/accounts/${this.status.account.id}/block`;
|
||||
axios.post(url)
|
||||
.then(res => {
|
||||
this.closeModals();
|
||||
this.$store.commit('updateRelationship', [res.data]);
|
||||
this.$emit('muted', this.status);
|
||||
})
|
||||
.catch(err => {
|
||||
this.closeModals();
|
||||
if(err && err.response && err.response.data && err.response.data.error) {
|
||||
swal('Error', err.response.data.error, 'error');
|
||||
} else {
|
||||
swal('Oops!', 'An error occured, please try again later.', 'error');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleUnfollow() {
|
||||
if(!this.ctxMenuRelationship) {
|
||||
return;
|
||||
}
|
||||
|
||||
swal({
|
||||
title: 'Unfollow',
|
||||
text: 'Are you sure you want to unfollow ' + this.status.account.username + '?',
|
||||
icon: "warning",
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
})
|
||||
.then(res => {
|
||||
if(!res) {
|
||||
this.closeModals();
|
||||
} else {
|
||||
axios.post(`/api/v1/accounts/${this.status.account.id}/unfollow`)
|
||||
.then(res => {
|
||||
this.closeModals();
|
||||
this.$store.commit('updateRelationship', [res.data]);
|
||||
this.$emit('unfollow', this.status);
|
||||
})
|
||||
.catch(err => {
|
||||
this.closeModals();
|
||||
if(err && err.response && err.response.data && err.response.data.error) {
|
||||
swal('Error', err.response.data.error, 'error');
|
||||
} else {
|
||||
swal('Oops!', 'An error occured, please try again later.', 'error');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-option {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.action-icon-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.icon {
|
||||
opacity: 0.5;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&-inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,6 +91,8 @@
|
|||
v-on:delete="deletePost"
|
||||
v-on:report-modal="handleReport"
|
||||
v-on:edit="handleEdit"
|
||||
v-on:muted="handleMuted"
|
||||
v-on:unfollow="handleUnfollow"
|
||||
/>
|
||||
|
||||
<likes-modal
|
||||
|
|
@ -543,6 +545,7 @@
|
|||
|
||||
deletePost() {
|
||||
this.feed.splice(this.postIndex, 1);
|
||||
this.forceUpdateIdx++;
|
||||
},
|
||||
|
||||
counterChange(index, type) {
|
||||
|
|
@ -788,6 +791,21 @@
|
|||
.then(res => {
|
||||
})
|
||||
},
|
||||
|
||||
handleMuted(post) {
|
||||
this.feed = this.feed.filter(p => {
|
||||
return p.account.id !== post.account.id;
|
||||
});
|
||||
},
|
||||
|
||||
handleUnfollow(post) {
|
||||
if(this.scope === 'home') {
|
||||
this.feed = this.feed.filter(p => {
|
||||
return p.account.id !== post.account.id;
|
||||
});
|
||||
}
|
||||
this.updateProfile({ following_count: this.profile.following_count - 1 });
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue