feat: publish button disabled UX (#886)
parent
3c90fee07e
commit
4203778f57
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue