From f2bdc1c563bd663f1749533aa8848c14efeb02c2 Mon Sep 17 00:00:00 2001 From: tusooa Date: Thu, 6 Apr 2023 14:15:57 -0400 Subject: [PATCH] Allow confirmation on closing reply form --- src/components/draft_closer/draft_closer.js | 48 +++++++++++++++++++ src/components/draft_closer/draft_closer.vue | 43 +++++++++++++++++ .../post_status_form/post_status_form.js | 45 +++++++++++++---- .../post_status_form/post_status_form.vue | 5 ++ .../settings_modal/tabs/general_tab.js | 5 ++ .../settings_modal/tabs/general_tab.vue | 9 ++++ src/components/status/status.js | 7 +++ src/components/status/status.vue | 4 +- src/i18n/en.json | 11 ++++- src/modules/config.js | 6 ++- src/modules/instance.js | 1 + 11 files changed, 170 insertions(+), 14 deletions(-) create mode 100644 src/components/draft_closer/draft_closer.js create mode 100644 src/components/draft_closer/draft_closer.vue diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js new file mode 100644 index 00000000..e5f827d7 --- /dev/null +++ b/src/components/draft_closer/draft_closer.js @@ -0,0 +1,48 @@ +import DialogModal from 'src/components/dialog_modal/dialog_modal.vue' + +const DraftCloser = { + data () { + return { + showing: false + } + }, + components: { + DialogModal + }, + emits: [ + 'save', + 'discard' + ], + computed: { + action () { + return this.$store.getters.mergedConfig.unsavedPostAction + }, + shouldConfirm () { + return this.action === 'confirm' + } + }, + methods: { + requestClose () { + if (this.shouldConfirm) { + this.showing = true + } else if (this.action === 'save') { + this.save() + } else { + this.discard() + } + }, + save () { + this.$emit('save') + this.showing = false + }, + discard () { + this.$emit('discard') + this.showing = false + }, + cancel () { + this.showing = false + } + } +} + +export default DraftCloser diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue new file mode 100644 index 00000000..e5ab9e7f --- /dev/null +++ b/src/components/draft_closer/draft_closer.vue @@ -0,0 +1,43 @@ + + + diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 9163db40..f629be12 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -15,6 +15,7 @@ import suggestor from '../emoji_input/suggestor.js' import { mapGetters, mapState } from 'vuex' import Checkbox from '../checkbox/checkbox.vue' import Select from '../select/select.vue' +import DraftCloser from 'src/components/draft_closer/draft_closer.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -104,7 +105,8 @@ const PostStatusForm = { 'posted', 'resize', 'mediaplay', - 'mediapause' + 'mediapause', + 'can-close' ], components: { MediaUpload, @@ -115,7 +117,8 @@ const PostStatusForm = { Select, Attachment, StatusContent, - Gallery + Gallery, + DraftCloser }, mounted () { this.updateIdempotencyKey() @@ -199,7 +202,8 @@ const PostStatusForm = { previewLoading: false, emojiInputShown: false, idempotencyKey: '', - saveInhibited: true + saveInhibited: true, + savable: false } }, computed: { @@ -290,9 +294,9 @@ const PostStatusForm = { isEdit () { return typeof this.statusId !== 'undefined' && this.statusId.trim() !== '' }, - debouncedSaveDraft () { - return debounce(this.saveDraft, 3000) - }, + // debouncedSaveDraft () { + // return debounce(this.saveDraft, 3000) + // }, pollFormVisible () { return this.newStatus.hasPoll }, @@ -310,13 +314,14 @@ const PostStatusForm = { } }, beforeUnmount () { - this.saveDraft() + // this.saveDraft() }, methods: { statusChanged () { this.autoPreview() this.updateIdempotencyKey() - this.debouncedSaveDraft() + // this.debouncedSaveDraft() + this.savable = true this.saveInhibited = false }, clearStatus () { @@ -344,6 +349,7 @@ const PostStatusForm = { el.style.height = undefined this.error = null if (this.preview) this.previewStatus() + this.savable = false }, async postStatus (event, newStatus, opts = {}) { if (this.posting && !this.optimisticPosting) { return } @@ -678,16 +684,18 @@ const PostStatusForm = { this.newStatus.files?.length || this.newStatus.hasPoll )) { - this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus }) + return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus }) .then(id => { if (this.newStatus.id !== id) { this.newStatus.id = id + this.savable = false } }) } + return Promise.resolve() }, abandonDraft () { - this.$store.dispatch('abandonDraft', { id: this.newStatus.id }) + return this.$store.dispatch('abandonDraft', { id: this.newStatus.id }) }, getDraft (statusType, refId) { const maybeDraft = this.$store.state.drafts.drafts[this.draftId] @@ -701,6 +709,23 @@ const PostStatusForm = { } } // No draft available, fall back + }, + requestClose () { + if (!this.savable) { + this.$emit('can-close') + } else { + this.$refs.draftCloser.requestClose() + } + }, + saveAndCloseDraft () { + this.saveDraft().then(() => { + this.$emit('can-close') + }) + }, + discardAndCloseDraft () { + this.abandonDraft().then(() => { + this.$emit('can-close') + }) } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index b03e5527..a215b9bd 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -339,6 +339,11 @@ + diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index be97710f..d5a5d4fb 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -50,6 +50,11 @@ const GeneralTab = { value: mode, label: this.$t(`settings.user_popover_avatar_action_${mode}`) })), + unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({ + key: mode, + value: mode, + label: this.$t(`settings.unsaved_post_action_${mode}`) + })), loopSilentAvailable: // Firefox Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 21e2d855..02d905a1 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -518,6 +518,15 @@ {{ $t('settings.autocomplete_select_first') }} +
  • + + {{ $t('settings.unsaved_post_action') }} + +
    • diff --git a/src/components/status/status.js b/src/components/status/status.js index 9a9bca7a..faedc13d 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -423,6 +423,13 @@ const Status = { this.error = undefined }, toggleReplying () { + if (this.replying) { + this.$refs.postStatusForm.requestClose() + } else { + this.doToggleReplying() + } + }, + doToggleReplying () { controlledOrUncontrolledToggle(this, 'replying') }, gotoOriginal (id) { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 35b15362..d11756b0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -496,13 +496,15 @@ class="status-container reply-form" > diff --git a/src/i18n/en.json b/src/i18n/en.json index 04cc1150..4507e2b0 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -296,7 +296,12 @@ "private": "Followers-only - post to followers only", "public": "Public - post to public timelines", "unlisted": "Unlisted - do not post to public timelines" - } + }, + "close_confirm_title": "Closing post form", + "close_confirm": "What do you want to do with your current writing?", + "close_confirm_save_button": "Save", + "close_confirm_discard_button": "Discard", + "close_confirm_continue_composing_button": "Continue composing" }, "registration": { "bio_optional": "Bio (optional)", @@ -467,6 +472,10 @@ "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.", "pad_emoji": "Pad emoji with spaces when adding from picker", "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available", + "unsaved_post_action": "When you try to close an unsaved posting form", + "unsaved_post_action_save": "Save it to drafts", + "unsaved_post_action_discard": "Discard it", + "unsaved_post_action_confirm": "Ask every time", "emoji_reactions_on_timeline": "Show emoji reactions on timeline", "emoji_reactions_scale": "Reactions scale factor", "export_theme": "Save preset", diff --git a/src/modules/config.js b/src/modules/config.js index 7597886e..bc991891 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -18,7 +18,8 @@ export const multiChoiceProperties = [ 'conversationDisplay', // tree | linear 'conversationOtherRepliesButton', // below | inside 'mentionLinkDisplay', // short | full_for_remote | full - 'userPopoverAvatarAction' // close | zoom | open + 'userPopoverAvatarAction', // close | zoom | open + 'unsavedPostAction' // save | discard | confirm ] export const defaultState = { @@ -117,7 +118,8 @@ export const defaultState = { conversationOtherRepliesButton: undefined, // instance default conversationTreeFadeAncestors: undefined, // instance default maxDepthInThread: undefined, // instance default - autocompleteSelect: undefined // instance default + autocompleteSelect: undefined, // instance default + unsavedPostAction: undefined // instance default } // caching the instance default properties diff --git a/src/modules/instance.js b/src/modules/instance.js index bb0292da..24c1b86a 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -105,6 +105,7 @@ const defaultState = { conversationTreeFadeAncestors: false, maxDepthInThread: 6, autocompleteSelect: false, + unsavedPostAction: 'confirm', // Nasty stuff customEmoji: [],