MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(front): [WIP] layout for collapsible description fields

This commit is contained in:
upsiflu 2025-04-01 15:20:55 +02:00
parent 8ec00c26f8
commit f81ac12fa4
1 changed files with 76 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/components/common/RenderedDescription.vue
View File

@ -10,7 +10,6 @@ import clip from 'text-clipper'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Alert from '~/components/ui/Alert.vue' import Alert from '~/components/ui/Alert.vue'
import Link from '~/components/ui/Link.vue'
interface Events { interface Events {
(e: 'updated', data: unknown): void (e: 'updated', data: unknown): void
@ -53,6 +52,8 @@ const truncatedHtml = computed(() => clip(props.content?.html ?? '', props.trunc
})) }))
const showMore = ref(false) const showMore = ref(false)
// Truncated or full Html or an empty string
const html = computed(() => props.fetchHtml const html = computed(() => props.fetchHtml
? preview.value ? preview.value
: props.truncateLength > 0 && !showMore.value : props.truncateLength > 0 && !showMore.value
@ -88,9 +89,13 @@ const submit = async () => {
</script> </script>
<template> <template>
<div>
<template v-if="content && !isUpdating"> <template v-if="content && !isUpdating">
<!-- Render the truncated or full description -->
<sanitized-html :html="html" /> <sanitized-html :html="html" />
<!-- Display the `show more` / `show less` button -->
<template v-if="isTruncated"> <template v-if="isTruncated">
<a <a
v-if="showMore === false" v-if="showMore === false"
@ -115,6 +120,10 @@ const submit = async () => {
<span v-else-if="!isUpdating"> <span v-else-if="!isUpdating">
{{ t('components.common.RenderedDescription.empty.noDescription') }} {{ t('components.common.RenderedDescription.empty.noDescription') }}
</span> </span>
<!-- [DISABLED] Display an edit form -->
<!-- TODO: Check if we want to revive in-situ editing here -->
<form <form
v-if="isUpdating" v-if="isUpdating"
@submit.prevent="submit()" @submit.prevent="submit()"
@ -156,5 +165,4 @@ const submit = async () => {
{{ t('components.common.RenderedDescription.button.update') }} {{ t('components.common.RenderedDescription.button.update') }}
</Button> </Button>
</form> </form>
</div>
</template> </template>