Page MenuHomePhorge
Files F7686953

No OneTemporary
Actions

Size
9 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 9b0526062..f5f44467c 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -1,67 +1,69 @@
import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+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'
const Draft = {
components: {
PostStatusForm,
+ EditStatusForm,
ConfirmModal,
StatusContent
},
props: {
draft: {
type: Object,
required: true
}
},
data () {
return {
editing: false,
showingConfirmDialog: false
}
},
computed: {
relAttrs () {
if (this.draft.type === 'edit') {
return { statusId: this.draft.refId }
} else if (this.draft.type === 'reply') {
return { replyTo: this.draft.refId }
} else {
return {}
}
},
postStatusFormProps () {
return {
draftId: this.draft.id,
...this.relAttrs
}
},
refStatus () {
return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
}
},
methods: {
toggleEditing () {
this.editing = !this.editing
},
abandon () {
this.showingConfirmDialog = true
},
doAbandon () {
console.debug('abandoning')
this.$store.dispatch('abandonDraft', { id: this.draft.id })
.then(() => {
this.hideConfirmDialog()
})
},
hideConfirmDialog () {
this.showingConfirmDialog = false
},
handlePosted () {
console.debug('posted')
this.doAbandon()
}
}
}
export default Draft
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 6e1b65bd5..43b14721d 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -1,100 +1,106 @@
<template>
<article class="Draft">
<div class="actions">
<button
class="btn button-default"
:class="{ toggled: editing }"
:aria-expanded="editing"
@click.prevent.stop="toggleEditing"
>
{{ $t('drafts.continue') }}
</button>
<button
class="btn button-default"
@click.prevent.stop="abandon"
>
{{ $t('drafts.abandon') }}
</button>
</div>
<div
v-if="!editing"
class="status-content"
>
<div>
<i18n-t
v-if="draft.type === 'reply' || draft.type === 'edit'"
tag="span"
:keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
>
<template #statusLink>
<router-link
class="faint-link"
:to="{ name: 'conversation', params: { id: draft.refId } }"
>
{{ refStatus.external_url }}
</router-link>
</template>
</i18n-t>
<StatusContent
v-if="draft.refId"
class="status-content"
:status="refStatus"
:compact="true"
/>
</div>
<p>{{ draft.status }}</p>
</div>
<div v-if="editing">
<PostStatusForm
+ v-if="draft.type !== 'edit'"
v-bind="postStatusFormProps"
@posted="handlePosted"
/>
+ <EditStatusForm
+ v-else
+ :params="postStatusFormProps"
+ @posted="handlePosted"
+ />
</div>
<teleport to="#modal">
<confirm-modal
v-if="showingConfirmDialog"
:title="$t('drafts.abandon_confirm_title')"
:confirm-text="$t('drafts.abandon_confirm_accept_button')"
:cancel-text="$t('drafts.abandon_confirm_cancel_button')"
@accepted="doAbandon"
@cancelled="hideConfirmDialog"
>
{{ $t('drafts.abandon_confirm') }}
</confirm-modal>
</teleport>
</article>
</template>
<script src="./draft.js"></script>
<style lang="scss">
@import "src/variables";
.Draft {
margin: 1em;
.status-content {
border: 1px solid $fallback--faint;
border-color: var(--faint, $fallback--faint);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
color: $fallback--text;
color: var(--text, $fallback--text);
padding: 0.5em;
margin: 0.5em 0;
}
.actions {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.btn {
flex: 1;
margin-left: 1em;
margin-right: 1em;
max-width: 10em;
}
}
}
</style>
diff --git a/src/components/edit_status_form/edit_status_form.js b/src/components/edit_status_form/edit_status_form.js
new file mode 100644
index 000000000..9a0bcc0e6
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.js
@@ -0,0 +1,41 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+
+const EditStatusForm = {
+ components: {
+ PostStatusForm
+ },
+ props: {
+ params: {
+ type: Object,
+ required: true
+ }
+ },
+ methods: {
+ doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
+ const params = {
+ store: this.$store,
+ statusId: this.params.statusId,
+ status,
+ spoilerText,
+ sensitive,
+ poll,
+ media,
+ contentType
+ }
+
+ return statusPosterService.editStatus(params)
+ .then((data) => {
+ return data
+ })
+ .catch((err) => {
+ console.error('Error editing status', err)
+ return {
+ error: err.message
+ }
+ })
+ }
+ }
+}
+
+export default EditStatusForm
diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
new file mode 100644
index 000000000..eee2d39a4
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.vue
@@ -0,0 +1,10 @@
+<template>
+ <PostStatusForm
+ v-bind="params"
+ :post-handler="doEditStatus"
+ :disable-polls="true"
+ :disable-visibility-selector="true"
+ />
+</template>
+
+<script src="./edit_status_form.js"></script>
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index 75adfea75..90964c952 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -1,75 +1,51 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
+import EditStatusForm from '../edit_status_form/edit_status_form.vue'
import Modal from '../modal/modal.vue'
-import statusPosterService from '../../services/status_poster/status_poster.service.js'
import get from 'lodash/get'
const EditStatusModal = {
components: {
- PostStatusForm,
+ EditStatusForm,
Modal
},
data () {
return {
resettingForm: false
}
},
computed: {
isLoggedIn () {
return !!this.$store.state.users.currentUser
},
modalActivated () {
return this.$store.state.editStatus.modalActivated
},
isFormVisible () {
return this.isLoggedIn && !this.resettingForm && this.modalActivated
},
params () {
return this.$store.state.editStatus.params || {}
}
},
watch: {
params (newVal, oldVal) {
if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
this.resettingForm = true
this.$nextTick(() => {
this.resettingForm = false
})
}
},
isFormVisible (val) {
if (val) {
this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
}
}
},
methods: {
- doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
- const params = {
- store: this.$store,
- statusId: this.$store.state.editStatus.params.statusId,
- status,
- spoilerText,
- sensitive,
- poll,
- media,
- contentType
- }
-
- return statusPosterService.editStatus(params)
- .then((data) => {
- return data
- })
- .catch((err) => {
- console.error('Error editing status', err)
- return {
- error: err.message
- }
- })
- },
closeModal () {
this.$store.dispatch('closeEditStatusModal')
}
}
}
export default EditStatusModal
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index db62972d6..96d05343c 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -1,49 +1,46 @@
<template>
<Modal
v-if="isFormVisible"
class="edit-form-modal-view"
@backdropClicked="closeModal"
>
<div class="edit-form-modal-panel panel">
<div class="panel-heading">
{{ $t('post_status.edit_status') }}
</div>
- <PostStatusForm
+ <EditStatusForm
class="panel-body"
- v-bind="params"
- :post-handler="doEditStatus"
- :disable-polls="true"
- :disable-visibility-selector="true"
+ :params="params"
@posted="closeModal"
/>
</div>
</Modal>
</template>
<script src="./edit_status_modal.js"></script>
<style lang="scss">
.modal-view.edit-form-modal-view {
align-items: flex-start;
}
.edit-form-modal-panel {
flex-shrink: 0;
margin-top: 25%;
margin-bottom: 2em;
width: 100%;
max-width: 700px;
@media (orientation: landscape) {
margin-top: 8%;
}
.form-bottom-left {
max-width: 6.5em;
.emoji-icon {
justify-content: right;
}
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Wed, Sep 3, 5:58 PM (1 d, 2 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
439132
Default Alt Text
(9 KB)

Event Timeline