logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: a0b886459bf5e146b8b7654d97ba8838bfac29de
parent 4d175235f1bc72c369c5e5fc8ed1997b384c0b83
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Wed,  9 Feb 2022 15:50:04 -0500

Add confirmation for following

Diffstat:

Msrc/components/follow_button/follow_button.js25++++++++++++++++++++++++-
Msrc/components/follow_button/follow_button.vue38+++++++++++++++++++++++++++++---------
2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js @@ -1,12 +1,20 @@ +import ConfirmModal from '../confirm_modal/confirm_modal.vue' import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' export default { props: ['relationship', 'user', 'labelFollowing', 'buttonClass'], + components: { + ConfirmModal + }, data () { return { - inProgress: false + inProgress: false, + showingConfirmUnfollow: false, } }, computed: { + shouldConfirmUnfollow () { + return this.$store.getters.mergedConfig.modalOnUnfollow + }, isPressed () { return this.inProgress || this.relationship.following }, @@ -35,6 +43,12 @@ export default { } }, methods: { + showConfirmUnfollow () { + this.showingConfirmUnfollow = true + }, + hideConfirmUnfollow () { + this.showingConfirmUnfollow = false + }, onClick () { this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow() }, @@ -45,12 +59,21 @@ export default { }) }, unfollow () { + if (this.shouldConfirmUnfollow) { + this.showConfirmUnfollow() + } else { + this.doUnfollow() + } + }, + doUnfollow () { const store = this.$store this.inProgress = true requestUnfollow(this.relationship.id, store).then(() => { 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 @@ -1,13 +1,33 @@ <template> - <button - class="btn button-default follow-button" - :class="{ toggled: isPressed }" - :disabled="disabled" - :title="title" - @click="onClick" - > - {{ label }} - </button> + <div> + <button + class="btn button-default follow-button" + :class="{ toggled: isPressed }" + :disabled="disabled" + :title="title" + @click="onClick" + > + {{ label }} + </button> + <confirm-modal + :showing="showingConfirmUnfollow" + :title="$t('user_card.unfollow_confirm_title')" + :confirm-text="$t('user_card.unfollow_confirm_accept_button')" + :cancel-text="$t('user_card.unfollow_confirm_cancel_button')" + @accepted="doUnfollow" + @cancelled="hideConfirmUnfollow" + > + <i18n + path="user_card.unfollow_confirm" + tag="span" + > + <span + place="user" + v-text="user.screen_name_ui" + /> + </i18n> + </confirm-modal> + </div> </template> <script src="./follow_button.js"></script>