zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: support showing publish failed messages (#1209)

Browse source
This commit is contained in:
Alex 2023-01-17 20:56:51 +08:00 • committed by GitHub
parent 0b2b9a713b
commit 85e163a0ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/publish/PublishErrMessage.vue Normal file
View file

@ -0,0 +1,23 @@
<script setup lang="ts">
defineProps<{
describedBy: string
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
<div
role="alert"
:aria-describedby="describedBy"
flex="~ col"
gap-1 text-sm
pt-1 ps-2 pe-1 pb-2
text-red-600 dark:text-red-400
border="~ base rounded red-600 dark:red-400"
>
<slot />
</div>
</template>

59
components/publish/PublishWidget.vue
View file

@ -34,7 +34,7 @@ const {
dropZoneRef,
} = $(useUploadMediaAttachment($$(draft)))
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft } = $(usePublish(
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages } = $(usePublish(
{
draftState,
...$$({ expanded, isUploading, initialDraft: initial }),
@ -160,6 +160,29 @@ defineExpose({
>
</div>
<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>
<div relative flex-1 flex flex-col>
<EditorContent
:editor="editor"
@ -174,15 +197,9 @@ defineExpose({
</div>
{{ $t('state.uploading') }}
</div>
<div
<PublishErrMessage
v-else-if="failedAttachments.length > 0"
role="alert"
:aria-describedby="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
flex="~ col"
gap-1 text-sm
pt-1 ps-2 pe-1 pb-2
text-red-600 dark:text-red-400
border="~ base rounded red-600 dark:red-400"
:described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
>
<head id="upload-failed" flex justify-between>
<div flex items-center gap-x-2 font-bold>
@ -191,10 +208,8 @@ defineExpose({
</div>
<CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
<button
flex rounded-4 p1
hover:bg-active cursor-pointer transition-100
:aria-label="$t('action.clear_upload_failed')"
@click="failedAttachments = []"
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
:aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
>
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
@ -209,7 +224,7 @@ defineExpose({
<span>{{ error[0] }}</span>
</li>
</ol>
</div>
</PublishErrMessage>
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
<PublishAttachment
@ -291,7 +306,18 @@ defineExpose({
</template>
</PublishVisibilityPicker>
<CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
<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">
<button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit
@ -303,6 +329,9 @@ defineExpose({
<span v-if="isSending" block animate-spin preserve-3d>
<div block i-ri:loader-2-fill />
</span>
<span v-if="failedMessages.length" block>
<div block i-carbon:face-dizzy-filled />
</span>
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
<span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
<span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>