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

144
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,73 +89,80 @@ 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" />
<template v-if="isTruncated"> <sanitized-html :html="html" />
<a
v-if="showMore === false" <!-- Display the `show more` / `show less` button -->
class="more"
style="float: right; margin-top: -32px; color: var(--fw-primary);" <template v-if="isTruncated">
href="" <a
@click.stop.prevent="showMore = true" v-if="showMore === false"
> class="more"
{{ t('components.common.RenderedDescription.button.more') }} style="float: right; margin-top: -32px; color: var(--fw-primary);"
</a> href=""
<a @click.stop.prevent="showMore = true"
v-else >
class="more" {{ t('components.common.RenderedDescription.button.more') }}
style="float: right; margin-top: -32px; color: var(--fw-primary);" </a>
href="" <a
@click.stop.prevent="showMore = false" v-else
> class="more"
{{ t('components.common.RenderedDescription.button.less') }} style="float: right; margin-top: -32px; color: var(--fw-primary);"
</a> href=""
</template> @click.stop.prevent="showMore = false"
>
{{ t('components.common.RenderedDescription.button.less') }}
</a>
</template> </template>
<span v-else-if="!isUpdating"> </template>
{{ t('components.common.RenderedDescription.empty.noDescription') }} <span v-else-if="!isUpdating">
</span> {{ t('components.common.RenderedDescription.empty.noDescription') }}
<form </span>
v-if="isUpdating"
@submit.prevent="submit()" <!-- [DISABLED] Display an edit form -->
<!-- TODO: Check if we want to revive in-situ editing here -->
<form
v-if="isUpdating"
@submit.prevent="submit()"
>
<Alert
v-if="errors.length > 0"
red
title="{{ t('components.common.RenderedDescription.header.failure') }}"
role="alert"
> >
<Alert <ul class="list">
v-if="errors.length > 0" <li
red v-for="(error, key) in errors"
title="{{ t('components.common.RenderedDescription.header.failure') }}" :key="key"
role="alert" >
> {{ error }}
<ul class="list"> </li>
<li </ul>
v-for="(error, key) in errors" </Alert>
:key="key" <content-form
> v-model="text"
{{ error }} :autofocus="true"
</li> />
</ul> <Button
</Alert> class="left floated"
<content-form solid
v-model="text" secondary
:autofocus="true" @click.prevent="isUpdating = false"
/> >
<Button {{ t('components.common.RenderedDescription.button.cancel') }}
class="left floated" </Button>
solid <Button
secondary :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
@click.prevent="isUpdating = false" type="submit"
> :disabled="isLoading"
{{ t('components.common.RenderedDescription.button.cancel') }} solid
</Button> primary
<Button >
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" {{ t('components.common.RenderedDescription.button.update') }}
type="submit" </Button>
:disabled="isLoading" </form>
solid
primary
>
{{ t('components.common.RenderedDescription.button.update') }}
</Button>
</form>
</div>
</template> </template>