2022-11-21 15:55:31 +09:00
|
|
|
|
<script setup lang="ts">
|
2022-11-25 22:21:02 +09:00
|
|
|
|
import { EditorContent } from '@tiptap/vue-3'
|
2023-01-19 19:27:08 +09:00
|
|
|
|
import stringLength from 'string-length'
|
2023-01-10 22:22:39 +09:00
|
|
|
|
import type { mastodon } from 'masto'
|
2022-12-13 23:03:30 +09:00
|
|
|
|
import type { Draft } from '~/types'
|
2022-11-21 15:55:31 +09:00
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
draftKey,
|
2023-01-30 20:23:49 +09:00
|
|
|
|
initial = getDefaultDraft,
|
2023-01-10 22:22:39 +09:00
|
|
|
|
expanded = false,
|
2022-11-30 13:50:29 +09:00
|
|
|
|
placeholder,
|
2022-12-17 04:55:31 +09:00
|
|
|
|
dialogLabelledBy,
|
2022-11-21 15:55:31 +09:00
|
|
|
|
} = defineProps<{
|
2023-01-06 00:42:36 +09:00
|
|
|
|
draftKey?: string
|
2022-11-28 19:23:33 +09:00
|
|
|
|
initial?: () => Draft
|
2022-11-21 15:55:31 +09:00
|
|
|
|
placeholder?: string
|
|
|
|
|
inReplyToId?: string
|
2023-01-08 15:21:09 +09:00
|
|
|
|
inReplyToVisibility?: mastodon.v1.StatusVisibility
|
2022-11-25 00:01:45 +09:00
|
|
|
|
expanded?: boolean
|
2022-12-17 04:55:31 +09:00
|
|
|
|
dialogLabelledBy?: string
|
2022-11-21 15:55:31 +09:00
|
|
|
|
}>()
|
|
|
|
|
|
2023-01-02 00:57:49 +09:00
|
|
|
|
const emit = defineEmits<{
|
2023-01-08 15:21:09 +09:00
|
|
|
|
(evt: 'published', status: mastodon.v1.Status): void
|
2023-01-02 00:57:49 +09:00
|
|
|
|
}>()
|
2022-12-01 16:24:35 +09:00
|
|
|
|
|
2022-11-30 13:50:29 +09:00
|
|
|
|
const { t } = useI18n()
|
2023-01-09 19:04:18 +09:00
|
|
|
|
|
2023-01-10 22:22:39 +09:00
|
|
|
|
const draftState = useDraft(draftKey, initial)
|
|
|
|
|
const { draft } = $(draftState)
|
2022-11-28 19:23:33 +09:00
|
|
|
|
|
2023-01-10 22:22:39 +09:00
|
|
|
|
const {
|
|
|
|
|
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
|
|
|
|
|
uploadAttachments, pickAttachments, setDescription, removeAttachment,
|
2023-01-11 07:51:25 +09:00
|
|
|
|
dropZoneRef,
|
2023-01-10 22:22:39 +09:00
|
|
|
|
} = $(useUploadMediaAttachment($$(draft)))
|
|
|
|
|
|
2023-01-30 20:20:22 +09:00
|
|
|
|
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage } = $(usePublish(
|
2023-01-10 22:22:39 +09:00
|
|
|
|
{
|
|
|
|
|
draftState,
|
|
|
|
|
...$$({ expanded, isUploading, initialDraft: initial }),
|
|
|
|
|
},
|
|
|
|
|
))
|
2022-11-24 15:54:54 +09:00
|
|
|
|
|
2022-11-25 22:21:02 +09:00
|
|
|
|
const { editor } = useTiptap({
|
2022-11-26 03:10:17 +09:00
|
|
|
|
content: computed({
|
|
|
|
|
get: () => draft.params.status,
|
2023-01-06 00:42:36 +09:00
|
|
|
|
set: (newVal) => {
|
|
|
|
|
draft.params.status = newVal
|
|
|
|
|
draft.lastUpdated = Date.now()
|
|
|
|
|
},
|
2022-11-26 03:10:17 +09:00
|
|
|
|
}),
|
2022-12-13 07:35:59 +09:00
|
|
|
|
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
2022-11-29 20:57:05 +09:00
|
|
|
|
autofocus: shouldExpanded,
|
2022-11-25 23:07:31 +09:00
|
|
|
|
onSubmit: publish,
|
2022-12-13 07:35:59 +09:00
|
|
|
|
onFocus() {
|
|
|
|
|
if (!isExpanded && draft.initialText) {
|
|
|
|
|
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
|
|
|
|
|
draft.initialText = ''
|
|
|
|
|
}
|
|
|
|
|
isExpanded = true
|
|
|
|
|
},
|
2022-11-25 22:21:02 +09:00
|
|
|
|
onPaste: handlePaste,
|
|
|
|
|
})
|
2023-01-30 20:09:04 +09:00
|
|
|
|
|
2023-01-16 19:24:29 +09:00
|
|
|
|
const characterCount = $computed(() => {
|
2023-01-19 19:27:08 +09:00
|
|
|
|
let length = stringLength(htmlToText(editor.value?.getHTML() || ''))
|
2023-01-16 19:24:29 +09:00
|
|
|
|
|
|
|
|
|
if (draft.mentions) {
|
|
|
|
|
// + 1 is needed as mentions always need a space seperator at the end
|
|
|
|
|
length += draft.mentions.map((mention) => {
|
|
|
|
|
const [handle] = mention.split('@')
|
|
|
|
|
return `@${handle}`
|
|
|
|
|
}).join(' ').length + 1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return length
|
|
|
|
|
})
|
2022-11-24 02:17:54 +09:00
|
|
|
|
|
2023-01-30 20:20:22 +09:00
|
|
|
|
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
|
2023-01-30 20:09:04 +09:00
|
|
|
|
|
2022-11-24 02:17:54 +09:00
|
|
|
|
async function handlePaste(evt: ClipboardEvent) {
|
|
|
|
|
const files = evt.clipboardData?.files
|
2022-11-24 17:20:21 +09:00
|
|
|
|
if (!files || files.length === 0)
|
2022-11-24 02:17:54 +09:00
|
|
|
|
return
|
|
|
|
|
|
2022-11-24 13:05:13 +09:00
|
|
|
|
evt.preventDefault()
|
2022-11-24 02:17:54 +09:00
|
|
|
|
await uploadAttachments(Array.from(files))
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-28 04:13:50 +09:00
|
|
|
|
function insertEmoji(name: string) {
|
|
|
|
|
editor.value?.chain().focus().insertEmoji(name).run()
|
2022-12-24 04:15:19 +09:00
|
|
|
|
}
|
2022-12-28 04:13:50 +09:00
|
|
|
|
function insertCustomEmoji(image: any) {
|
|
|
|
|
editor.value?.chain().focus().insertCustomEmoji(image).run()
|
2022-12-28 03:38:57 +09:00
|
|
|
|
}
|
2022-12-24 04:15:19 +09:00
|
|
|
|
|
2022-11-25 21:10:45 +09:00
|
|
|
|
async function toggleSensitive() {
|
|
|
|
|
draft.params.sensitive = !draft.params.sensitive
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-21 15:55:31 +09:00
|
|
|
|
async function publish() {
|
2023-01-10 22:22:39 +09:00
|
|
|
|
const status = await publishDraft()
|
|
|
|
|
if (status)
|
2023-01-02 00:57:49 +09:00
|
|
|
|
emit('published', status)
|
2022-11-21 15:55:31 +09:00
|
|
|
|
}
|
|
|
|
|
|
2023-01-15 05:58:52 +09:00
|
|
|
|
useWebShareTarget(async ({ data: { data, action } }: any) => {
|
|
|
|
|
if (action !== 'compose-with-shared-data')
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
editor.value?.commands.focus('end')
|
|
|
|
|
|
|
|
|
|
if (data.text !== undefined)
|
|
|
|
|
editor.value?.commands.insertContent(data.text)
|
|
|
|
|
|
|
|
|
|
if (data.files !== undefined)
|
|
|
|
|
await uploadAttachments(data.files)
|
|
|
|
|
})
|
|
|
|
|
|
2022-12-15 01:45:46 +09:00
|
|
|
|
defineExpose({
|
|
|
|
|
focusEditor: () => {
|
|
|
|
|
editor.value?.commands?.focus?.()
|
|
|
|
|
},
|
|
|
|
|
})
|
2022-11-21 15:55:31 +09:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2023-01-15 17:38:02 +09:00
|
|
|
|
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4>
|
2022-11-24 20:35:26 +09:00
|
|
|
|
<template v-if="draft.editingStatus">
|
|
|
|
|
<div flex="~ col gap-1">
|
2022-12-17 04:55:31 +09:00
|
|
|
|
<div id="state-editing" text-secondary self-center>
|
2022-11-29 15:57:32 +09:00
|
|
|
|
{{ $t('state.editing') }}
|
2022-11-24 20:35:26 +09:00
|
|
|
|
</div>
|
2022-12-02 16:02:44 +09:00
|
|
|
|
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" px-0 />
|
2022-11-24 16:53:27 +09:00
|
|
|
|
</div>
|
2022-11-24 20:35:26 +09:00
|
|
|
|
<div border="b dashed gray/40" />
|
|
|
|
|
</template>
|
2022-11-24 23:32:20 +09:00
|
|
|
|
|
2022-12-28 04:13:50 +09:00
|
|
|
|
<div flex gap-3 flex-1>
|
2022-12-26 17:00:57 +09:00
|
|
|
|
<NuxtLink :to="getAccountRoute(currentUser.account)">
|
2023-01-06 08:35:35 +09:00
|
|
|
|
<AccountBigAvatar :account="currentUser.account" square />
|
2022-11-25 00:19:18 +09:00
|
|
|
|
</NuxtLink>
|
2022-12-07 01:37:58 +09:00
|
|
|
|
<!-- This `w-0` style is used to avoid overflow problems in flex layouts,so don't remove it unless you know what you're doing -->
|
2022-11-24 20:35:26 +09:00
|
|
|
|
<div
|
2022-11-25 18:29:16 +09:00
|
|
|
|
ref="dropZoneRef"
|
2022-12-07 01:37:58 +09:00
|
|
|
|
flex w-0 flex-col gap-3 flex-1
|
2022-11-25 22:21:02 +09:00
|
|
|
|
border="2 dashed transparent"
|
2022-11-25 18:31:32 +09:00
|
|
|
|
:class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
|
2022-11-24 20:35:26 +09:00
|
|
|
|
>
|
2023-01-17 21:50:21 +09:00
|
|
|
|
<ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
|
2023-01-16 14:10:33 +09:00
|
|
|
|
<button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
|
2023-01-30 19:58:18 +09:00
|
|
|
|
{{ accountToShortHandle(m) }}
|
2023-01-16 14:10:33 +09:00
|
|
|
|
</button>
|
2023-01-13 09:33:04 +09:00
|
|
|
|
</ContentMentionGroup>
|
|
|
|
|
|
2022-11-25 21:10:45 +09:00
|
|
|
|
<div v-if="draft.params.sensitive">
|
|
|
|
|
<input
|
|
|
|
|
v-model="draft.params.spoilerText"
|
|
|
|
|
type="text"
|
2022-12-01 16:41:59 +09:00
|
|
|
|
:placeholder="$t('placeholder.content_warning')"
|
2022-11-25 21:10:45 +09:00
|
|
|
|
p2 border-rounded w-full bg-transparent
|
|
|
|
|
outline-none border="~ base"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-17 21:56:51 +09:00
|
|
|
|
<PublishErrMessage v-if="failedMessages.length > 0" described-by="publish-failed">
|
|
|
|
|
<head id="publish-failed" flex justify-between>
|
|
|
|
|
<div flex items-center gap-x-2 font-bold>
|
|
|
|
|
<div aria-hidden="true" i-ri:error-warning-fill />
|
|
|
|
|
<p>{{ $t('state.publish_failed') }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
|
|
|
|
|
<button
|
|
|
|
|
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('action.clear_publish_failed')"
|
|
|
|
|
@click="failedMessages = []"
|
|
|
|
|
>
|
|
|
|
|
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
</head>
|
|
|
|
|
<ol ps-2 sm:ps-1>
|
|
|
|
|
<li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
|
|
|
|
<strong>{{ i + 1 }}.</strong>
|
|
|
|
|
<span>{{ error }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</PublishErrMessage>
|
|
|
|
|
|
2022-12-07 01:37:58 +09:00
|
|
|
|
<div relative flex-1 flex flex-col>
|
2022-11-25 22:29:42 +09:00
|
|
|
|
<EditorContent
|
|
|
|
|
:editor="editor"
|
2022-12-14 22:22:35 +09:00
|
|
|
|
flex max-w-full
|
2022-12-04 15:27:08 +09:00
|
|
|
|
:class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
|
2022-11-25 22:29:42 +09:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2022-11-24 16:53:27 +09:00
|
|
|
|
|
2022-11-25 22:21:02 +09:00
|
|
|
|
<div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
|
2023-01-14 01:00:32 +09:00
|
|
|
|
<div animate-spin preserve-3d>
|
|
|
|
|
<div i-ri:loader-2-fill />
|
|
|
|
|
</div>
|
2022-11-29 15:57:32 +09:00
|
|
|
|
{{ $t('state.uploading') }}
|
2022-11-25 22:21:02 +09:00
|
|
|
|
</div>
|
2023-01-17 21:56:51 +09:00
|
|
|
|
<PublishErrMessage
|
2023-01-10 22:22:39 +09:00
|
|
|
|
v-else-if="failedAttachments.length > 0"
|
2023-01-17 21:56:51 +09:00
|
|
|
|
:described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
|
2022-12-26 14:25:35 +09:00
|
|
|
|
>
|
|
|
|
|
<head id="upload-failed" flex justify-between>
|
|
|
|
|
<div flex items-center gap-x-2 font-bold>
|
|
|
|
|
<div aria-hidden="true" i-ri:error-warning-fill />
|
|
|
|
|
<p>{{ $t('state.upload_failed') }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
|
|
|
|
|
<button
|
2023-01-17 21:56:51 +09:00
|
|
|
|
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
|
|
|
|
|
:aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
|
2022-12-26 14:25:35 +09:00
|
|
|
|
>
|
2023-01-08 16:49:32 +09:00
|
|
|
|
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
2022-12-26 14:25:35 +09:00
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
</head>
|
2023-01-02 03:11:50 +09:00
|
|
|
|
<div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
|
2022-12-31 18:02:55 +09:00
|
|
|
|
{{ $t('state.attachments_exceed_server_limit') }}
|
|
|
|
|
</div>
|
2023-01-01 23:29:11 +09:00
|
|
|
|
<ol ps-2 sm:ps-1>
|
2023-01-10 22:22:39 +09:00
|
|
|
|
<li v-for="error in failedAttachments" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
2023-01-02 03:11:50 +09:00
|
|
|
|
<strong>{{ error[1] }}:</strong>
|
|
|
|
|
<span>{{ error[0] }}</span>
|
2022-12-26 14:25:35 +09:00
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
2023-01-17 21:56:51 +09:00
|
|
|
|
</PublishErrMessage>
|
2022-11-25 22:21:02 +09:00
|
|
|
|
|
|
|
|
|
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
|
2022-11-24 20:35:26 +09:00
|
|
|
|
<PublishAttachment
|
|
|
|
|
v-for="(att, idx) in draft.attachments" :key="att.id"
|
|
|
|
|
:attachment="att"
|
2023-01-06 01:48:20 +09:00
|
|
|
|
:dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : undefined)"
|
2022-11-24 20:35:26 +09:00
|
|
|
|
@remove="removeAttachment(idx)"
|
2022-12-15 08:30:54 +09:00
|
|
|
|
@set-description="setDescription(att, $event)"
|
2022-11-24 20:35:26 +09:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2022-12-02 16:02:44 +09:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div flex gap-4>
|
|
|
|
|
<div w-12 h-full sm:block hidden />
|
|
|
|
|
<div
|
2023-01-16 04:27:54 +09:00
|
|
|
|
v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full
|
2022-12-02 16:02:44 +09:00
|
|
|
|
border="t base"
|
|
|
|
|
>
|
2022-12-28 04:13:50 +09:00
|
|
|
|
<PublishEmojiPicker
|
|
|
|
|
@select="insertEmoji"
|
|
|
|
|
@select-custom="insertCustomEmoji"
|
2023-01-04 19:41:19 +09:00
|
|
|
|
>
|
|
|
|
|
<button btn-action-icon :title="$t('tooltip.emoji')">
|
|
|
|
|
<div i-ri:emotion-line />
|
|
|
|
|
</button>
|
|
|
|
|
</PublishEmojiPicker>
|
2022-12-24 04:15:19 +09:00
|
|
|
|
|
2023-01-04 19:41:19 +09:00
|
|
|
|
<CommonTooltip placement="top" :content="$t('tooltip.add_media')">
|
2022-12-02 16:02:44 +09:00
|
|
|
|
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
|
|
|
|
<div i-ri:image-add-line />
|
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
|
|
|
|
|
<template v-if="editor">
|
2023-01-04 19:41:19 +09:00
|
|
|
|
<CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
|
2022-12-02 16:02:44 +09:00
|
|
|
|
<button
|
|
|
|
|
btn-action-icon
|
|
|
|
|
:aria-label="$t('tooltip.toggle_code_block')"
|
2022-12-28 05:42:58 +09:00
|
|
|
|
:class="editor.isActive('codeBlock') ? 'text-primary' : ''"
|
2022-12-02 16:02:44 +09:00
|
|
|
|
@click="editor?.chain().focus().toggleCodeBlock().run()"
|
|
|
|
|
>
|
|
|
|
|
<div i-ri:code-s-slash-line />
|
2022-11-25 00:48:52 +09:00
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
2022-12-02 16:02:44 +09:00
|
|
|
|
</template>
|
2022-11-24 18:15:58 +09:00
|
|
|
|
|
2022-12-02 16:02:44 +09:00
|
|
|
|
<div flex-auto />
|
2022-11-25 22:21:02 +09:00
|
|
|
|
|
2023-01-08 16:49:32 +09:00
|
|
|
|
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
|
2023-01-07 06:38:01 +09:00
|
|
|
|
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
|
2022-12-30 15:10:29 +09:00
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-02 06:52:00 +09:00
|
|
|
|
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
|
2023-01-03 21:17:04 +09:00
|
|
|
|
<CommonDropdown placement="bottom" auto-boundary-max-size>
|
2023-01-30 20:09:04 +09:00
|
|
|
|
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
|
|
|
|
|
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
|
|
|
|
|
<div v-else i-ri:translate-2 />
|
2023-01-02 06:52:00 +09:00
|
|
|
|
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<template #popper>
|
2023-01-30 20:20:22 +09:00
|
|
|
|
<PublishLanguagePicker v-model="draft.params.language" min-w-80 />
|
2023-01-02 06:52:00 +09:00
|
|
|
|
</template>
|
|
|
|
|
</CommonDropdown>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
|
2023-01-30 20:09:04 +09:00
|
|
|
|
<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 />
|
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
|
2023-01-04 19:41:19 +09:00
|
|
|
|
<PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
|
|
|
|
|
<template #default="{ visibility }">
|
2023-01-03 07:11:43 +09:00
|
|
|
|
<button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
|
2023-01-04 19:41:19 +09:00
|
|
|
|
<div :class="visibility.icon" />
|
2023-01-03 07:11:43 +09:00
|
|
|
|
<div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
2022-11-25 21:10:45 +09:00
|
|
|
|
</button>
|
2023-01-04 19:41:19 +09:00
|
|
|
|
</template>
|
|
|
|
|
</PublishVisibilityPicker>
|
2022-12-02 16:02:44 +09:00
|
|
|
|
|
2023-01-17 21:56:51 +09:00
|
|
|
|
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
|
|
|
|
|
<button
|
|
|
|
|
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
|
|
|
|
|
>
|
|
|
|
|
<span block>
|
|
|
|
|
<div block i-carbon:face-dizzy-filled />
|
|
|
|
|
</span>
|
|
|
|
|
<span>{{ $t('state.publish_failed') }}</span>
|
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
|
|
|
|
|
|
|
|
|
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
|
2023-01-09 05:55:52 +09:00
|
|
|
|
<button
|
2023-01-10 22:32:50 +09:00
|
|
|
|
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
|
2023-01-09 05:55:52 +09:00
|
|
|
|
md:w-fit
|
|
|
|
|
class="publish-button"
|
|
|
|
|
:aria-disabled="isPublishDisabled"
|
|
|
|
|
aria-describedby="publish-tooltip"
|
|
|
|
|
@click="publish"
|
|
|
|
|
>
|
2023-01-14 01:00:32 +09:00
|
|
|
|
<span v-if="isSending" block animate-spin preserve-3d>
|
|
|
|
|
<div block i-ri:loader-2-fill />
|
|
|
|
|
</span>
|
2023-01-17 21:56:51 +09:00
|
|
|
|
<span v-if="failedMessages.length" block>
|
|
|
|
|
<div block i-carbon:face-dizzy-filled />
|
|
|
|
|
</span>
|
2023-01-09 23:31:30 +09:00
|
|
|
|
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
|
|
|
|
|
<span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
|
2023-01-10 22:32:50 +09:00
|
|
|
|
<span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
|
2023-01-09 05:55:52 +09:00
|
|
|
|
</button>
|
|
|
|
|
</CommonTooltip>
|
2022-11-24 16:53:27 +09:00
|
|
|
|
</div>
|
2022-11-21 15:55:31 +09:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
2023-01-09 05:55:52 +09:00
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.publish-button[aria-disabled=true] {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
background-color: var(--c-bg-btn-disabled);
|
|
|
|
|
color: var(--c-text-btn-disabled);
|
|
|
|
|
}
|
|
|
|
|
.publish-button[aria-disabled=true]:hover {
|
|
|
|
|
background-color: var(--c-bg-btn-disabled);
|
|
|
|
|
color: var(--c-text-btn-disabled);
|
|
|
|
|
}
|
|
|
|
|
</style>
|