feat: publish button disabled UX (#886)

zio/stable
Lucas Homer 2023-01-08 12:55:52 -08:00 committed by GitHub
parent 3c90fee07e
commit 4203778f57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 7 deletions

View File

@ -184,6 +184,13 @@ defineExpose({
editor.value?.commands?.focus?.() editor.value?.commands?.focus?.()
}, },
}) })
const isPublishDisabled = computed(() => {
if (isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status))
return true
return false
})
</script> </script>
<template> <template>
@ -348,14 +355,31 @@ defineExpose({
</template> </template>
</PublishVisibilityPicker> </PublishVisibilityPicker>
<button <CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
btn-solid rounded-3 text-sm w-full md:w-fit <button
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit" btn-solid rounded-3 text-sm w-full
@click="publish" md:w-fit
> class="publish-button"
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }} :aria-disabled="isPublishDisabled"
</button> aria-describedby="publish-tooltip"
@click="publish"
>
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
</button>
</CommonTooltip>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<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>

View File

@ -362,6 +362,8 @@
"tooltip": { "tooltip": {
"add_content_warning": "Add content warning", "add_content_warning": "Add content warning",
"add_media": "Add images, a video or an audio file", "add_media": "Add images, a video or an audio file",
"add_publishable_content": "Add content to publish",
"change_content_visibility": "Change content visibility", "change_content_visibility": "Change content visibility",
"change_language": "Change language", "change_language": "Change language",
"emoji": "Emoji", "emoji": "Emoji",

View File

@ -432,6 +432,7 @@
"tooltip": { "tooltip": {
"add_content_warning": "Add content warning", "add_content_warning": "Add content warning",
"add_media": "Add images, a video or an audio file", "add_media": "Add images, a video or an audio file",
"add_publishable_content": "Add content to publish",
"change_content_visibility": "Change content visibility", "change_content_visibility": "Change content visibility",
"change_language": "Change language", "change_language": "Change language",
"emoji": "Emoji", "emoji": "Emoji",