fix(front): use card template sections on library card
This commit is contained in:
ArneBo
parent
f4607e0d02
commit
6ee0d81976
|
|
@ -154,58 +154,44 @@ const isOpen = ref(false)
|
||||||
<template>
|
<template>
|
||||||
<Card
|
<Card
|
||||||
:title="library.name"
|
:title="library.name"
|
||||||
|
:to="{name: 'library.detail', params: {id: library.uuid}}"
|
||||||
>
|
>
|
||||||
<div class="content">
|
<template #topright>
|
||||||
<h4 class="header">
|
<span
|
||||||
<router-link :to="{name: 'library.detail', params: {id: library.uuid}}">
|
v-if="library.privacy_level === 'me'"
|
||||||
{{ library.name }}
|
:data-tooltip="labels.tooltips.me"
|
||||||
</router-link>
|
>
|
||||||
|
<i class="bi bi-lock-fill" />
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else-if="library.privacy_level === 'everyone'"
|
||||||
|
:data-tooltip="labels.tooltips.everyone"
|
||||||
|
>
|
||||||
|
<i class="bi bi-globe" />
|
||||||
|
</span>
|
||||||
|
<Popover v-model:open="isOpen">
|
||||||
|
<template #default="{ toggleOpen }">
|
||||||
|
<OptionsButton
|
||||||
|
@click="toggleOpen"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #items>
|
||||||
|
<PopoverItem
|
||||||
|
v-for="obj in getReportableObjects({library, account: library.actor})"
|
||||||
|
:key="obj.target.type + obj.target.id"
|
||||||
|
@click.stop.prevent="report(obj)"
|
||||||
|
>
|
||||||
|
<i class="bi bi-share" /> {{ obj.label }}
|
||||||
|
</PopoverItem>
|
||||||
|
</template>
|
||||||
|
</Popover>
|
||||||
|
</template>
|
||||||
|
|
||||||
<Popover v-model:open="isOpen">
|
<div class="content">
|
||||||
<template #default="{ toggleOpen }">
|
|
||||||
<OptionsButton
|
|
||||||
@click="toggleOpen"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #items>
|
|
||||||
<PopoverItem
|
|
||||||
v-for="obj in getReportableObjects({library, account: library.actor})"
|
|
||||||
:key="obj.target.type + obj.target.id"
|
|
||||||
@click.stop.prevent="report(obj)"
|
|
||||||
>
|
|
||||||
<i class="bi bi-share" /> {{ obj.label }}
|
|
||||||
</PopoverItem>
|
|
||||||
</template>
|
|
||||||
</Popover>
|
|
||||||
<span
|
|
||||||
v-if="library.privacy_level === 'me'"
|
|
||||||
class="right floated"
|
|
||||||
:data-tooltip="labels.tooltips.me"
|
|
||||||
>
|
|
||||||
<i class="bi bi-lock" />
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-else-if="library.privacy_level === 'everyone'"
|
|
||||||
class="right floated"
|
|
||||||
:data-tooltip="labels.tooltips.everyone"
|
|
||||||
>
|
|
||||||
<i class="bi bi-globe" />
|
|
||||||
</span>
|
|
||||||
</h4>
|
|
||||||
<div class="meta">
|
|
||||||
<span>
|
|
||||||
<i class="bi bi-clock" />
|
|
||||||
<human-date :date="library.creation_date" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
<div class="description">
|
||||||
{{ library.description }}
|
{{ library.description }}
|
||||||
</div>
|
</div>
|
||||||
<Spacer :size="8" />
|
<Spacer :size="8" />
|
||||||
<div class="meta">
|
|
||||||
<i class="bi bi-music-note" />
|
|
||||||
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-if="displayScan && latestScan"
|
v-if="displayScan && latestScan"
|
||||||
class="meta"
|
class="meta"
|
||||||
|
|
@ -289,63 +275,90 @@ const isOpen = ref(false)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<template #footer>
|
||||||
v-if="displayFollow || radioPlayable"
|
<div class="meta">
|
||||||
:class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']"
|
<span>
|
||||||
>
|
<i class="bi bi-clock" />
|
||||||
<radio-button
|
<human-date :date="library.creation_date" />
|
||||||
v-if="radioPlayable"
|
</span>
|
||||||
:type="'library'"
|
<span>
|
||||||
:object-id="library.uuid"
|
<i class="bi bi-music-note-list" />
|
||||||
/>
|
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
|
||||||
<template v-if="displayFollow">
|
</span>
|
||||||
<button
|
</div>
|
||||||
v-if="!library.follow"
|
|
||||||
:class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
|
|
||||||
@click="follow()"
|
|
||||||
>
|
|
||||||
{{ t('views.content.remote.Card.button.follow') }}
|
|
||||||
</button>
|
|
||||||
<template v-else-if="!library.follow.approved">
|
|
||||||
<button
|
|
||||||
class="ui disabled button"
|
|
||||||
>
|
|
||||||
<i class="hourglass icon" />
|
|
||||||
{{ t('views.content.remote.Card.button.pending') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ui button"
|
|
||||||
@click="unfollow"
|
|
||||||
>
|
|
||||||
{{ t('views.content.remote.Card.button.cancel') }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="library.follow.approved">
|
|
||||||
<dangerous-button
|
|
||||||
:class="['ui', 'button']"
|
|
||||||
:action="unfollow"
|
|
||||||
>
|
|
||||||
{{ t('views.content.remote.Card.button.unfollow') }}
|
|
||||||
<template #modal-header>
|
|
||||||
<p>
|
|
||||||
{{ t('views.content.remote.Card.modal.unfollow.header') }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
<template #modal-content>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
{{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #modal-confirm>
|
|
||||||
<div>
|
|
||||||
{{ t('views.content.remote.Card.button.unfollow') }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dangerous-button>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
|
||||||
|
<template #actions>
|
||||||
|
<div
|
||||||
|
v-if="displayFollow || radioPlayable"
|
||||||
|
:class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']"
|
||||||
|
>
|
||||||
|
<radio-button
|
||||||
|
v-if="radioPlayable"
|
||||||
|
:type="'library'"
|
||||||
|
:object-id="library.uuid"
|
||||||
|
/>
|
||||||
|
<template v-if="displayFollow">
|
||||||
|
<button
|
||||||
|
v-if="!library.follow"
|
||||||
|
:class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
|
||||||
|
@click="follow()"
|
||||||
|
>
|
||||||
|
{{ t('views.content.remote.Card.button.follow') }}
|
||||||
|
</button>
|
||||||
|
<template v-else-if="!library.follow.approved">
|
||||||
|
<button
|
||||||
|
class="ui disabled button"
|
||||||
|
>
|
||||||
|
<i class="hourglass icon" />
|
||||||
|
{{ t('views.content.remote.Card.button.pending') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ui button"
|
||||||
|
@click="unfollow"
|
||||||
|
>
|
||||||
|
{{ t('views.content.remote.Card.button.cancel') }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="library.follow.approved">
|
||||||
|
<dangerous-button
|
||||||
|
:class="['ui', 'button']"
|
||||||
|
:action="unfollow"
|
||||||
|
>
|
||||||
|
{{ t('views.content.remote.Card.button.unfollow') }}
|
||||||
|
<template #modal-header>
|
||||||
|
<p>
|
||||||
|
{{ t('views.content.remote.Card.modal.unfollow.header') }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template #modal-content>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
{{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #modal-confirm>
|
||||||
|
<div>
|
||||||
|
{{ t('views.content.remote.Card.button.unfollow') }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</dangerous-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</Card>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.meta {
|
||||||
|
padding-left: 8px;
|
||||||
|
> span {
|
||||||
|
margin-right: 16px;
|
||||||
|
> i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue