refs #577 Add mute menu to mute an account
This commit is contained in:
parent
9d17c88d85
commit
a03c97f5fe
|
@ -164,6 +164,12 @@
|
|||
"list_membership": {
|
||||
"title": "List Memberships"
|
||||
},
|
||||
"mute_confirm": {
|
||||
"title": "Are you sure to block?",
|
||||
"body": "Hide notification from this user?",
|
||||
"cancel": "Cancel",
|
||||
"ok": "Ok"
|
||||
},
|
||||
"shortcut": {
|
||||
"title": "Keyboard shortcuts",
|
||||
"ctrl_number": "Switch accounts",
|
||||
|
@ -208,6 +214,10 @@
|
|||
"follow_requested": "Follow requested",
|
||||
"open_in_browser": "Open in Browser",
|
||||
"manage_list_memberships": "Manage List Memberships",
|
||||
"mute": "Mute",
|
||||
"unmute": "Unmute",
|
||||
"unblock": "Unblock",
|
||||
"block": "Block",
|
||||
"toots": "Toots",
|
||||
"follows": "Follows",
|
||||
"followers": "Followers"
|
||||
|
|
|
@ -23,6 +23,18 @@
|
|||
<li role="button" @click="addToList(account)">
|
||||
{{ $t('side_bar.account_profile.manage_list_memberships') }}
|
||||
</li>
|
||||
<li role="button" @click="unmute(account)" v-if="muting">
|
||||
{{ $t('side_bar.account_profile.unmute') }}
|
||||
</li>
|
||||
<li role="button" @click="confirmMute(account)" v-else>
|
||||
{{ $t('side_bar.account_profile.mute') }}
|
||||
</li>
|
||||
<li role="button" @click="unblock(account)" v-if="blocking">
|
||||
{{ $t('side_bar.account_profile.unblock') }}
|
||||
</li>
|
||||
<li role="button" @click="confirmBlock(account)" v-else>
|
||||
{{ $t('side_bar.account_profile.block') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
@ -104,10 +116,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
|
||||
user: state => state.TimelineSpace.account,
|
||||
relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
|
||||
loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading,
|
||||
theme: (state) => {
|
||||
return {
|
||||
'--theme-mask-color': state.App.theme.wrapper_mask_color,
|
||||
|
@ -115,6 +124,13 @@ export default {
|
|||
'--theme-primary-color': state.App.theme.primary_color
|
||||
}
|
||||
}
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/SideBar/AccountProfile', {
|
||||
account: state => state.account,
|
||||
relationship: state => state.relationship,
|
||||
loading: state => state.loading,
|
||||
muting: state => state.relationship && state.relationship.muting,
|
||||
blocking: state => state.relationship && state.relationship.blocking
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
|
@ -168,6 +184,17 @@ export default {
|
|||
this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account)
|
||||
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
confirmMute (account) {
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account)
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
unmute () {
|
||||
},
|
||||
confirmBlock () {
|
||||
},
|
||||
unblock () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<image-viewer></image-viewer>
|
||||
<list-membership></list-membership>
|
||||
<add-list-member></add-list-member>
|
||||
<mute-confirm></mute-confirm>
|
||||
<shortcut></shortcut>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -15,6 +16,7 @@ import Jump from './Modals/Jump'
|
|||
import ImageViewer from './Modals/ImageViewer'
|
||||
import ListMembership from './Modals/ListMembership'
|
||||
import AddListMember from './Modals/AddListMember'
|
||||
import MuteConfirm from './Modals/MuteConfirm'
|
||||
import Shortcut from './Modals/Shortcut'
|
||||
|
||||
export default {
|
||||
|
@ -25,6 +27,7 @@ export default {
|
|||
ImageViewer,
|
||||
ListMembership,
|
||||
AddListMember,
|
||||
MuteConfirm,
|
||||
Shortcut
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.mute_confirm.title')"
|
||||
:visible.sync="muteConfirmModal"
|
||||
width="400px"
|
||||
custom-class="mute-confirm"
|
||||
>
|
||||
<div class="description">
|
||||
<span class="label">
|
||||
{{ $t('modals.mute_confirm.body') }}
|
||||
</span>
|
||||
<el-switch v-model="notify"></el-switch>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MuteConfirm',
|
||||
data () {
|
||||
return {
|
||||
notify: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Modals/MuteConfirm', {
|
||||
account: state => state.account
|
||||
}),
|
||||
muteConfirmModal: {
|
||||
get () {
|
||||
return this.$store.state.TimelineSpace.Modals.MuteConfirm.modalOpen
|
||||
},
|
||||
set (value) {
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal () {
|
||||
this.muteConfirmModal = false
|
||||
},
|
||||
async submit () {
|
||||
this.closeModal()
|
||||
await this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/submit', this.notify)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.description {
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
padding: 0 32px 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -3,6 +3,7 @@ import ImageViewer from './Modals/ImageViewer'
|
|||
import Jump from './Modals/Jump'
|
||||
import ListMembership from './Modals/ListMembership'
|
||||
import AddListMember from './Modals/AddListMember'
|
||||
import MuteConfirm from './Modals/MuteConfirm'
|
||||
import Shortcut from './Modals/Shortcut'
|
||||
|
||||
const Modals = {
|
||||
|
@ -13,6 +14,7 @@ const Modals = {
|
|||
Jump,
|
||||
ListMembership,
|
||||
AddListMember,
|
||||
MuteConfirm,
|
||||
Shortcut
|
||||
},
|
||||
getters: {
|
||||
|
@ -22,8 +24,9 @@ const Modals = {
|
|||
const jump = rootState.TimelineSpace.Modals.Jump.modalOpen
|
||||
const listMembership = rootState.TimelineSpace.Modals.ListMembership.modalOpen
|
||||
const addListMember = rootState.TimelineSpace.Modals.AddListMember.modalOpen
|
||||
const shortcut = rootState.TimelineSpace.Modals.Jump.modalOpen
|
||||
return imageViewer || newToot || jump || listMembership || addListMember || shortcut
|
||||
const shortcut = rootState.TimelineSpace.Modals.Shortcut.modalOpen
|
||||
const muteConfirm = rootState.TimelineSpace.Modals.MuteConfirm.modalOpen
|
||||
return imageViewer || newToot || jump || listMembership || addListMember || shortcut || muteConfirm
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,39 @@
|
|||
import Mastodon from 'megalodon'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
modalOpen: false,
|
||||
account: {}
|
||||
},
|
||||
mutations: {
|
||||
changeModal (state, value) {
|
||||
state.modalOpen = value
|
||||
},
|
||||
changeAccount (state, account) {
|
||||
state.account = account
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
changeModal ({ commit }, value) {
|
||||
commit('changeModal', value)
|
||||
},
|
||||
changeAccount ({ commit }, account) {
|
||||
commit('changeAccount', account)
|
||||
},
|
||||
async submit ({ state, rootState, dispatch }, notify) {
|
||||
const client = new Mastodon(
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.TimelineSpace.account.baseURL + '/api/v1'
|
||||
)
|
||||
return client.post(`/accounts/${state.account.id}/mute`, {
|
||||
notifications: notify
|
||||
})
|
||||
.then(res => {
|
||||
// Reload relationship
|
||||
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchRelationship', state.account, { root: true })
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue