feat: publish button disabled UX (#886)

This commit is contained in:
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>
<CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
<button <button
btn-solid rounded-3 text-sm w-full md:w-fit btn-solid rounded-3 text-sm w-full
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit" md:w-fit
class="publish-button"
:aria-disabled="isPublishDisabled"
aria-describedby="publish-tooltip"
@click="publish" @click="publish"
> >
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }} {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
</button> </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",