feat: basic alt text edit

This commit is contained in:
patak 2022-12-15 00:30:54 +01:00
parent 0f438b80cd
commit 2f8085fa86
2 changed files with 36 additions and 2 deletions

View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Attachment } from 'masto' import type { Attachment } from 'masto'
withDefaults(defineProps<{ const props = withDefaults(defineProps<{
attachment: Attachment attachment: Attachment
alt?: string alt?: string
removable?: boolean removable?: boolean
@ -11,7 +11,11 @@ withDefaults(defineProps<{
defineEmits<{ defineEmits<{
(evt: 'remove'): void (evt: 'remove'): void
(evt: 'setDescription', description: string): void
}>() }>()
const isEditDialogOpen = ref(false)
const description = ref(props.attachment.description)
</script> </script>
<template> <template>
@ -29,5 +33,29 @@ defineEmits<{
<div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" /> <div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" />
</div> </div>
</div> </div>
<div absolute right-2 bottom-2>
<button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
Edit
</button>
</div>
<ModalDialog v-model="isEditDialogOpen" py-6 px-6 max-w-300>
<div flex gap-5>
<div flex flex-col gap-2 justify-between>
<h1 font-bold>
Description
</h1>
<div flex flex-col gap-2>
<textarea v-model="description" p-3 w-100 h-50 bg-base rounded-2 border-strong border-1 />
<button btn-outline @click="$emit('setDescription', description)">
Apply
</button>
</div>
<button btn-outline @click="isEditDialogOpen = false">
Close
</button>
</div>
<StatusAttachment :attachment="attachment" w-full />
</div>
</ModalDialog>
</div> </div>
</template> </template>

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CreateStatusParams, StatusVisibility } from 'masto' import type { Attachment, CreateStatusParams, StatusVisibility } from 'masto'
import { fileOpen } from 'browser-fs-access' import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core' import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
@ -99,6 +99,11 @@ async function uploadAttachments(files: File[]) {
isUploading = false isUploading = false
} }
async function setDescription(att: Attachment, description: string) {
att.description = description
await useMasto().mediaAttachments.update(att.id, { description: att.description })
}
function removeAttachment(index: number) { function removeAttachment(index: number) {
draft.attachments.splice(index, 1) draft.attachments.splice(index, 1)
} }
@ -213,6 +218,7 @@ defineExpose({
v-for="(att, idx) in draft.attachments" :key="att.id" v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att" :attachment="att"
@remove="removeAttachment(idx)" @remove="removeAttachment(idx)"
@set-description="setDescription(att, $event)"
/> />
</div> </div>
</div> </div>