diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js index dd45b6b9..32662081 100644 --- a/src/components/extra_buttons/extra_buttons.js +++ b/src/components/extra_buttons/extra_buttons.js @@ -1,4 +1,5 @@ import Popover from '../popover/popover.vue' +import ConfirmModal from '../confirm_modal/confirm_modal.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faEllipsisH, @@ -26,14 +27,34 @@ library.add( const ExtraButtons = { props: [ 'status' ], - components: { Popover }, + components: { + Popover, + ConfirmModal + }, + data () { + return { + expanded: false, + showingDeleteDialog: false + } + }, methods: { deleteStatus () { - const confirmed = window.confirm(this.$t('status.delete_confirm')) - if (confirmed) { - this.$store.dispatch('deleteStatus', { id: this.status.id }) + if (this.shouldConfirmDelete) { + this.showDeleteStatusConfirmDialog() + } else { + this.doDeleteStatus() } }, + doDeleteStatus () { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + hideDeleteStatusConfirmDialog() + }, + showDeleteStatusConfirmDialog () { + this.showingDeleteDialog = true + }, + hideDeleteStatusConfirmDialog () { + this.showingDeleteDialog = false + }, pinStatus () { this.$store.dispatch('pinStatus', this.status.id) .then(() => this.$emit('onSuccess')) @@ -91,6 +112,9 @@ const ExtraButtons = { }, statusLink () { return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}` + }, + shouldConfirmDelete () { + return this.$store.getters.mergedConfig.modalOnDelete } } } diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index a3c3c767..4eb566a3 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -125,6 +125,16 @@ icon="ellipsis-h" /> </button> + <ConfirmModal + :showing="showingDeleteDialog" + :title="$t('status.delete_confirm_title')" + :cancel-text="$t('status.delete_confirm_cancel_button')" + :confirm-text="$t('status.delete_confirm_accept_button')" + @cancelled="hideDeleteStatusConfirmDialog" + @accepted="doDeleteStatus" + > + {{ $t('status.delete_confirm') }} + </ConfirmModal> </template> </Popover> </template> diff --git a/src/modules/config.js b/src/modules/config.js index ff5ef270..4c39c172 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -70,6 +70,12 @@ export const defaultState = { minimalScopesMode: undefined, // instance default // This hides statuses filtered via a word filter hideFilteredStatuses: undefined, // instance default + modalOnRepeat: undefined, // instance default + modalOnUnfollow: undefined, // instance default + modalOnBlock: undefined, // instance default + modalOnMute: undefined, // instance default + modalOnDelete: undefined, // instance default + modalOnLogout: undefined, // instance default playVideosInModal: false, useOneClickNsfw: false, useContainFit: true, diff --git a/src/modules/instance.js b/src/modules/instance.js index 220463ca..808434e5 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -36,6 +36,12 @@ const defaultState = { hideSitename: false, hideUserStats: false, muteBotStatuses: false, + modalOnRepeat: false, + modalOnUnfollow: false, + modalOnBlock: true, + modalOnMute: false, + modalOnDelete: true, + modalOnLogout: true, loginMethod: 'password', logo: '/static/logo.svg', logoMargin: '.2em',