101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<!--
|
|
- @copyright Copyright (c) 2023 Johannes Szeibert <johannes@szeibert.de>
|
|
-
|
|
- @author Johannes Szeibert <johannes@szeibert.de>
|
|
-
|
|
- @license GNU AGPL version 3 or any later version
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as
|
|
- published by the Free Software Foundation, either version 3 of the
|
|
- License, or (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
-
|
|
-->
|
|
|
|
<template>
|
|
<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
|
|
<div v-for="(attachment, index) in attachments"
|
|
:key="attachment.id"
|
|
:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
|
|
:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
export default {
|
|
name: 'CardCover',
|
|
props: {
|
|
cardId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
attachments() {
|
|
return [...this.$store.getters.attachmentsByCard(this.cardId)]
|
|
// Filter deleted and hasPreview
|
|
.filter(attachment => attachment.deletedAt >= 0 && attachment.extendedData.hasPreview)
|
|
// sort by id (same as in AttachmentList) to get Newest
|
|
.sort((a, b) => b.id - a.id)
|
|
// limit to 3 like with android Deck app
|
|
.slice(0, 3)
|
|
},
|
|
attachmentPreview() {
|
|
// FIXME find a better way to get the stack-width
|
|
const stackWidth = getComputedStyle(document.documentElement).getPropertyValue('--stack-width').trim()
|
|
const x = Math.ceil(parseInt(stackWidth) / this.attachments.length) | 260
|
|
const y = 100
|
|
return attachment => (
|
|
// The core preview provider is a bit strange at times, providing much larger than needed images
|
|
// when cropping is enabled. Therefore use a=1 to not crop the image and let css handle the overflow
|
|
attachment.extendedData.fileid ? generateUrl(`/core/preview?fileId=${attachment.extendedData.fileid}&x=${x}&y=${y}&a=1`) : null
|
|
)
|
|
},
|
|
},
|
|
watch: {
|
|
cardId: {
|
|
immediate: true,
|
|
handler() {
|
|
this.fetchAttachments(this.cardId)
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
'fetchAttachments',
|
|
]),
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../css/variables';
|
|
|
|
.card-cover {
|
|
height: 100px;
|
|
display: flex;
|
|
.image-wrapper {
|
|
flex: 1;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
&.rounded-left {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
&.rounded-right {
|
|
border-top-right-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|