Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-07 09:29:59 +00:00
Code Issues Wiki Activity

refactor(publish): extract pickers

Browse source
This commit is contained in:
三咲智子 2023-01-04 18:41:19 +08:00
parent 9677f742c8
commit 73fe063a8f
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 64 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/publish/PublishEmojiPicker.client.vue
View file

@ -44,16 +44,17 @@ const hideEmojiPicker = () => {
</script>
<template>
<VDropdown
auto-boundary-max-size
@apply-show="openEmojiPicker()"
@apply-hide="hideEmojiPicker()"
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
<template #popper>
<div ref="el" min-w-10 min-h-10 />
</template>
</VDropdown>
<CommonTooltip content="Add emojis">
<VDropdown
auto-boundary-max-size
@apply-show="openEmojiPicker()"
@apply-hide="hideEmojiPicker()"
>
<slot />
<template #popper>
<div ref="el" min-w-10 min-h-10 />
</template>
</VDropdown>
</CommonTooltip>
</template>

38
components/publish/PublishVisibilityPicker.vue Normal file
View file

@ -0,0 +1,38 @@
<script setup lang="ts">
import { statusVisibilities } from '~/composables/masto/icons'
const { editing } = defineProps<{
editing?: boolean
}>()
let { modelValue } = $defineModel<{
modelValue: string
}>()
const currentVisibility = $computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
)
const chooseVisibility = (visibility: string) => {
modelValue = visibility
}
</script>
<template>
<CommonTooltip placement="top" :content="editing ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
<CommonDropdown placement="bottom">
<slot :visibility="currentVisibility" />
<template #popper>
<CommonDropdownItem
v-for="visibility in statusVisibilities"
:key="visibility.value"
:icon="visibility.icon"
:text="$t(`visibility.${visibility.value}`)"
:description="$t(`visibility.${visibility.value}_desc`)"
:checked="visibility.value === modelValue"
@click="chooseVisibility(visibility.value)"
/>
</template>
</CommonDropdown>
</CommonTooltip>
</template>

46
components/publish/PublishWidget.vue
View file

@ -3,7 +3,6 @@ import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'm
import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3'
import { statusVisibilities } from '~/composables/masto/icons'
import type { Draft } from '~/types'
type FileUploadError = [filename: string, message: string]
@ -54,10 +53,6 @@ const { editor } = useTiptap({
onPaste: handlePaste,
})
const currentVisibility = $computed(() => {
return statusVisibilities.find(v => v.value === draft.params.visibility) || statusVisibilities[0]
})
let isUploading = $ref<boolean>(false)
let isExceedingAttachmentLimit = $ref<boolean>(false)
let failed = $ref<FileUploadError[]>([])
@ -132,10 +127,6 @@ function removeAttachment(index: number) {
draft.attachments.splice(index, 1)
}
function chooseVisibility(visibility: StatusVisibility) {
draft.params.visibility = visibility
}
async function publish() {
const payload = {
...draft.params,
@ -291,16 +282,20 @@ defineExpose({
<PublishEmojiPicker
@select="insertEmoji"
@select-custom="insertCustomEmoji"
/>
>
<button btn-action-icon :title="$t('tooltip.emoji')">
<div i-ri:emotion-line />
</button>
</PublishEmojiPicker>
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
<CommonTooltip placement="top" :content="$t('tooltip.add_media')">
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line />
</button>
</CommonTooltip>
<template v-if="editor">
<CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
<CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
<button
btn-action-icon
:aria-label="$t('tooltip.toggle_code_block')"
@ -318,7 +313,7 @@ defineExpose({
{{ editor?.storage.characterCount.characters() }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
</div>
<CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')">
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line />
@ -338,29 +333,14 @@ defineExpose({
</CommonDropdown>
</CommonTooltip>
<CommonTooltip placement="bottom" :content="draft.editingStatus ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
<CommonDropdown>
<PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
<template #default="{ visibility }">
<button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
<div :class="currentVisibility.icon" />
<div :class="visibility.icon" />
<div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
</button>
<template #popper>
<CommonDropdownItem
v-for="visibility in statusVisibilities"
:key="visibility.value"
:icon="visibility.icon"
:checked="visibility.value === draft.params.visibility"
@click="chooseVisibility(visibility.value)"
>
{{ $t(`visibility.${visibility.value}`) }}
<template #description>
{{ $t(`visibility.${visibility.value}_desc`) }}
</template>
</CommonDropdownItem>
</template>
</CommonDropdown>
</CommonTooltip>
</template>
</PublishVisibilityPicker>
<button
btn-solid rounded-full text-sm w-full md:w-fit