commit: 68e8a24f1886c8f38857f19a6a978ad60fdde752
parent 8657c820bdc6347f804613b7506efe42dc2dc0a4
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 03:10:11 +0200
a bit clearer draft editing flow, partially divorced menu-item from list-item
Diffstat:
8 files changed, 74 insertions(+), 32 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -390,6 +390,20 @@ nav {
}
}
+.menu-item {
+ line-height: var(--__line-height);
+ font-family: inherit;
+ font-weight: 400;
+ font-size: 100%;
+ cursor: pointer;
+
+ a,
+ button:not(.button-default) {
+ color: var(--text);
+ font-size: 100%;
+ }
+}
+
.menu-item,
.list-item {
display: block;
@@ -397,10 +411,6 @@ nav {
border: none;
outline: none;
text-align: initial;
- font-size: inherit;
- font-family: inherit;
- font-weight: 400;
- cursor: pointer;
color: inherit;
clear: both;
position: relative;
@@ -410,7 +420,6 @@ nav {
border-width: 0;
border-top-width: 1px;
width: 100%;
- line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
background: transparent;
@@ -450,10 +459,8 @@ nav {
border: none;
outline: none;
display: inline;
- font-size: 100%;
font-family: inherit;
line-height: unset;
- color: var(--text);
}
&:first-child {
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
@@ -3,6 +3,7 @@ import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue
import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
import StatusContent from 'src/components/status_content/status_content.vue'
import Gallery from 'src/components/gallery/gallery.vue'
+import { cloneDeep } from 'lodash'
const Draft = {
components: {
@@ -19,8 +20,8 @@ const Draft = {
}
},
data () {
- console.log('DRAFT', this.draft)
return {
+ referenceDraft: cloneDeep(this.draft),
editing: false,
showingConfirmDialog: false
}
@@ -35,6 +36,11 @@ const Draft = {
return {}
}
},
+ safeToSave () {
+ return this.draft.status ||
+ this.draft.files?.length ||
+ this.draft.hasPoll
+ },
postStatusFormProps () {
return {
draftId: this.draft.id,
@@ -48,7 +54,6 @@ const Draft = {
return this.$store.getters.mergedConfig.collapseMessageWithSubject
},
nsfwClickthrough () {
- console.log(this.draft)
if (!this.draft.nsfw) {
return false
}
@@ -58,6 +63,16 @@ const Draft = {
return true
}
},
+ watch: {
+ editing (newVal) {
+ if (newVal) return
+ if (this.safeToSave) {
+ this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
+ } else {
+ this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
+ }
+ }
+ },
methods: {
toggleEditing () {
this.editing = !this.editing
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
@@ -44,10 +44,12 @@
<div v-if="editing">
<PostStatusForm
v-if="draft.type !== 'edit'"
+ :disable-draft="true"
v-bind="postStatusFormProps"
/>
<EditStatusForm
v-else
+ :disable-draft="true"
:params="postStatusFormProps"
/>
</div>
@@ -66,11 +68,10 @@
<div class="actions">
<button
class="btn button-default"
- :class="{ toggled: editing }"
:aria-expanded="editing"
@click.prevent.stop="toggleEditing"
>
- {{ $t('drafts.continue') }}
+ {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
</button>
<button
class="btn button-default"
@@ -87,6 +88,8 @@
<style lang="scss">
.Draft {
position: relative;
+ line-height: 1.1;
+ font-size: initial;
a {
color: var(--link);
@@ -119,7 +122,6 @@
flex: 1;
margin-left: 1em;
margin-right: 1em;
- max-width: 10em;
}
}
}
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
@@ -16,6 +16,7 @@
>
<template #item="{ item: draft }">
<Draft
+ class="draft"
:draft="draft"
/>
</template>
@@ -26,3 +27,9 @@
</template>
<script src="./drafts.js"></script>
+
+<style lang="scss">
+.draft {
+ margin: 1em 0;
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -118,7 +118,8 @@ const PostStatusForm = {
'resize',
'mediaplay',
'mediapause',
- 'can-close'
+ 'can-close',
+ 'update'
],
components: {
MediaUpload,
@@ -218,7 +219,7 @@ const PostStatusForm = {
emojiInputShown: false,
idempotencyKey: '',
saveInhibited: true,
- savable: false
+ saveable: false
}
},
computed: {
@@ -343,7 +344,7 @@ const PostStatusForm = {
return this.$store.getters.mergedConfig.autoSaveDraft
},
autoSaveState () {
- if (this.savable) {
+ if (this.saveable) {
return this.$t('post_status.auto_save_saving')
} else if (this.newStatus.id) {
return this.$t('post_status.auto_save_saved')
@@ -363,7 +364,7 @@ const PostStatusForm = {
this.statusChanged()
}
},
- savable (val) {
+ saveable (val) {
// https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
// MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
if (val) {
@@ -382,7 +383,7 @@ const PostStatusForm = {
this.autoPreview()
this.updateIdempotencyKey()
this.debouncedMaybeAutoSaveDraft()
- this.savable = true
+ this.saveable = true
this.saveInhibited = false
},
clearStatus () {
@@ -411,7 +412,7 @@ const PostStatusForm = {
el.style.height = undefined
this.error = null
if (this.preview) this.previewStatus()
- this.savable = false
+ this.saveable = false
},
async postStatus (event, newStatus, opts = {}) {
if (this.posting && !this.optimisticPosting) { return }
@@ -754,13 +755,13 @@ const PostStatusForm = {
if (this.newStatus.id !== id) {
this.newStatus.id = id
}
- this.savable = false
+ this.saveable = false
})
} else if (this.newStatus.id) {
// There is a draft, but there is nothing in it, clear it
return this.abandonDraft()
.then(() => {
- this.savable = false
+ this.saveable = false
})
}
}
@@ -788,7 +789,7 @@ const PostStatusForm = {
// No draft available, fall back
},
requestClose () {
- if (!this.savable) {
+ if (!this.saveable) {
this.$emit('can-close')
} else {
this.$refs.draftCloser.requestClose()
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
@@ -5,14 +5,31 @@
margin-bottom: 0.5em;
}
+ .more-post-actions {
+ height: 100%;
+
+ .btn {
+ height: 100%;
+ }
+ }
+
.form-bottom {
display: flex;
justify-content: space-between;
padding: 0.5em;
height: 2.5em;
- .post-button {
- width: 7.5em;
+ .post-button-group {
+ width: 10em;
+ display: flex;
+
+ .post-button {
+ flex: 1 0 auto;
+ }
+
+ .more-post-actions {
+ flex: 0 0 auto;
+ }
}
p {
@@ -22,14 +39,6 @@
}
}
- .more-post-actions {
- height: 100%;
-
- .btn {
- height: 100%;
- }
- }
-
.form-bottom-left {
display: flex;
flex: 1;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -302,7 +302,7 @@
<FAIcon icon="poll-h" />
</button>
</div>
- <div class="btn-group">
+ <div class="btn-group post-button-group">
<button
class="btn button-default post-button"
:disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1515,6 +1515,7 @@
"drafts": "Drafts",
"no_drafts": "You have no drafts",
"continue": "Continue composing",
+ "save": "Save without posting",
"abandon": "Abandon draft",
"abandon_confirm_title": "Abandon confirmation",
"abandon_confirm": "Do you really want to abandon this draft?",
