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?.()
},
})
const isPublishDisabled = computed(() => {
if (isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status))
return true
return false
})
</script>
<template>
@ -348,14 +355,31 @@ defineExpose({
</template>
</PublishVisibilityPicker>
<button
btn-solid rounded-3 text-sm w-full md:w-fit
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit"
@click="publish"
>
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
</button>
<CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
<button
btn-solid rounded-3 text-sm w-full
md:w-fit
class="publish-button"
:aria-disabled="isPublishDisabled"
aria-describedby="publish-tooltip"
@click="publish"
>
{{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
</button>
</CommonTooltip>
</div>
</div>
</div>
</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": {
"add_content_warning": "Add content warning",
"add_media": "Add images, a video or an audio file",
"add_publishable_content": "Add content to publish",
"change_content_visibility": "Change content visibility",
"change_language": "Change language",
"emoji": "Emoji",

View file

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