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>
|
||||
<Card
|
||||
:title="library.name"
|
||||
:to="{name: 'library.detail', params: {id: library.uuid}}"
|
||||
>
|
||||
<div class="content">
|
||||
<h4 class="header">
|
||||
<router-link :to="{name: 'library.detail', params: {id: library.uuid}}">
|
||||
{{ library.name }}
|
||||
</router-link>
|
||||
<template #topright>
|
||||
<span
|
||||
v-if="library.privacy_level === 'me'"
|
||||
:data-tooltip="labels.tooltips.me"
|
||||
>
|
||||
<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">
|
||||
<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="content">
|
||||
<div class="description">
|
||||
{{ library.description }}
|
||||
</div>
|
||||
<Spacer :size="8" />
|
||||
<div class="meta">
|
||||
<i class="bi bi-music-note" />
|
||||
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="displayScan && latestScan"
|
||||
class="meta"
|
||||
|
|
@ -289,63 +275,90 @@ const isOpen = ref(false)
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 #footer>
|
||||
<div class="meta">
|
||||
<span>
|
||||
<i class="bi bi-clock" />
|
||||
<human-date :date="library.creation_date" />
|
||||
</span>
|
||||
<span>
|
||||
<i class="bi bi-music-note-list" />
|
||||
{{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.meta {
|
||||
padding-left: 8px;
|
||||
> span {
|
||||
margin-right: 16px;
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue