diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ca90bf26..6972164b 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,6 +3,7 @@
ref="popover"
trigger="click"
popover-class="emoji-picker popover-default"
+ :trigger-attrs="{ 'aria-hidden': true }"
@show="onPopoverShown"
@close="onPopoverClosed"
>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 3dc968c9..48b960b2 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,
@@ -32,10 +33,14 @@ library.add(
const ExtraButtons = {
props: ['status'],
- components: { Popover },
+ components: {
+ Popover,
+ ConfirmModal
+ },
data () {
return {
- expanded: false
+ expanded: false,
+ showingDeleteDialog: false
}
},
methods: {
@@ -46,11 +51,22 @@ const ExtraButtons = {
this.expanded = false
},
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 })
+ this.hideDeleteStatusConfirmDialog()
+ },
+ showDeleteStatusConfirmDialog () {
+ this.showingDeleteDialog = true
+ },
+ hideDeleteStatusConfirmDialog () {
+ this.showingDeleteDialog = false
+ },
pinStatus () {
this.$store.dispatch('pinStatus', this.status.id)
.then(() => this.$emit('onSuccess'))
@@ -133,7 +149,10 @@ const ExtraButtons = {
isEdited () {
return this.status.edited_at !== null
},
- editingAvailable () { return this.$store.state.instance.editingAvailable }
+ editingAvailable () { return this.$store.state.instance.editingAvailable },
+ 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 a84d47f6..c1c15c0f 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,6 +165,18 @@
/>
+
+
+ {{ $t('status.delete_confirm') }}
+
+
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 58d14945..8c883c13 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -38,13 +38,20 @@
class="button-unstyled interactive"
target="_blank"
role="button"
+ :title="$t('tool_tip.favorite')"
:href="remoteInteractionLink"
>
-
+
+
+
+
{
this.inProgress = false
store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
})
+
+ this.hideConfirmUnfollow()
}
}
}
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 965d5256..e421c15b 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -7,6 +7,27 @@
@click="onClick"
>
{{ label }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index eff69fb2..bdb6b809 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -24,6 +24,7 @@
/>
diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index cbd75311..b0873bb1 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -1,10 +1,18 @@
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
const FollowRequestCard = {
props: ['user'],
components: {
- BasicUserCard
+ BasicUserCard,
+ ConfirmModal
+ },
+ data () {
+ return {
+ showingApproveConfirmDialog: false,
+ showingDenyConfirmDialog: false
+ }
},
methods: {
findFollowRequestNotificationId () {
@@ -13,7 +21,26 @@ const FollowRequestCard = {
)
return notif && notif.id
},
+ showApproveConfirmDialog () {
+ this.showingApproveConfirmDialog = true
+ },
+ hideApproveConfirmDialog () {
+ this.showingApproveConfirmDialog = false
+ },
+ showDenyConfirmDialog () {
+ this.showingDenyConfirmDialog = true
+ },
+ hideDenyConfirmDialog () {
+ this.showingDenyConfirmDialog = false
+ },
approveUser () {
+ if (this.shouldConfirmApprove) {
+ this.showApproveConfirmDialog()
+ } else {
+ this.doApprove()
+ }
+ },
+ doApprove () {
this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
this.$store.dispatch('removeFollowRequest', this.user)
@@ -25,14 +52,34 @@ const FollowRequestCard = {
notification.type = 'follow'
}
})
+ this.hideApproveConfirmDialog()
},
denyUser () {
+ if (this.shouldConfirmDeny) {
+ this.showDenyConfirmDialog()
+ } else {
+ this.doDeny()
+ }
+ },
+ doDeny () {
const notifId = this.findFollowRequestNotificationId()
this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
.then(() => {
this.$store.dispatch('dismissNotificationLocal', { id: notifId })
this.$store.dispatch('removeFollowRequest', this.user)
})
+ this.hideDenyConfirmDialog()
+ }
+ },
+ computed: {
+ mergedConfig () {
+ return this.$store.getters.mergedConfig
+ },
+ shouldConfirmApprove () {
+ return this.mergedConfig.modalOnApproveFollow
+ },
+ shouldConfirmDeny () {
+ return this.mergedConfig.modalOnDenyFollow
}
}
}
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index eb222cc7..55b65112 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -14,6 +14,28 @@
{{ $t('user_card.deny') }}
+
+
+ {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+
+
+ {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+
+
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6997f149..a57e8761 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,21 +1,44 @@
-
-
@@ -235,6 +247,16 @@
}
}
}
+
+ .confirm-modal.dark-overlay {
+ &::before {
+ z-index: 3000;
+ }
+
+ .dialog-modal.panel {
+ z-index: 3001;
+ }
+ }
}
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index b03329c9..c823a426 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -8,6 +8,7 @@ import Report from '../report/report.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import UserPopover from '../user_popover/user_popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -43,7 +44,9 @@ const Notification = {
return {
statusExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
- unmuted: false
+ unmuted: false,
+ showingApproveConfirmDialog: false,
+ showingDenyConfirmDialog: false
}
},
props: ['notification'],
@@ -56,7 +59,8 @@ const Notification = {
Report,
RichContent,
UserPopover,
- UserLink
+ UserLink,
+ ConfirmModal
},
methods: {
toggleStatusExpanded () {
@@ -71,7 +75,26 @@ const Notification = {
toggleMute () {
this.unmuted = !this.unmuted
},
+ showApproveConfirmDialog () {
+ this.showingApproveConfirmDialog = true
+ },
+ hideApproveConfirmDialog () {
+ this.showingApproveConfirmDialog = false
+ },
+ showDenyConfirmDialog () {
+ this.showingDenyConfirmDialog = true
+ },
+ hideDenyConfirmDialog () {
+ this.showingDenyConfirmDialog = false
+ },
approveUser () {
+ if (this.shouldConfirmApprove) {
+ this.showApproveConfirmDialog()
+ } else {
+ this.doApprove()
+ }
+ },
+ doApprove () {
this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
this.$store.dispatch('removeFollowRequest', this.user)
this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
@@ -81,13 +104,22 @@ const Notification = {
notification.type = 'follow'
}
})
+ this.hideApproveConfirmDialog()
},
denyUser () {
+ if (this.shouldConfirmDeny) {
+ this.showDenyConfirmDialog()
+ } else {
+ this.doDeny()
+ }
+ },
+ doDeny () {
this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
.then(() => {
this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
this.$store.dispatch('removeFollowRequest', this.user)
})
+ this.hideDenyConfirmDialog()
}
},
computed: {
@@ -117,6 +149,15 @@ const Notification = {
isStatusNotification () {
return isStatusNotification(this.notification.type)
},
+ mergedConfig () {
+ return this.$store.getters.mergedConfig
+ },
+ shouldConfirmApprove () {
+ return this.mergedConfig.modalOnApproveFollow
+ },
+ shouldConfirmDeny () {
+ return this.mergedConfig.modalOnDenyFollow
+ },
...mapState({
currentUser: state => state.users.currentUser
})
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index b8267465..8d4cc2d1 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -243,6 +243,28 @@
+