Card Cover Images

src/components/Controls.vue

@@ -208,6 +208,12 @@
 						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
 					</NcActionButton>
+					<NcActionButton @click="toggleShowCardCover">
+						<template #icon>
+							<ImageIcon :size="20" decorative />
+						</template>
+						{{ showCardCover ? t('deck', 'Hide card cover images') : t('deck', 'Show card cover images') }}
+					</NcActionButton>
 				</NcActions>
 				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
 				<NcActions>
@@ -226,6 +232,7 @@ import { mapState, mapGetters } from 'vuex'
 import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import ImageIcon from 'vue-material-design-icons/ImageMultiple.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
 import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
@@ -245,6 +252,7 @@ export default {
 		NcPopover,
 		NcAvatar,
 		ArchiveIcon,
+		ImageIcon,
 		FilterIcon,
 		FilterOffIcon,
 		ArrowCollapseVerticalIcon,
@@ -285,6 +293,7 @@ export default {
 		]),
 		...mapState({
 			compactMode: state => state.compactMode,
+			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
 		}),
 		detailsRoute() {
@@ -339,6 +348,9 @@ export default {
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
 		},
+		toggleShowCardCover() {
+			this.$store.dispatch('toggleShowCardCover')
+		},
 		toggleShowArchived() {
 			this.$store.dispatch('toggleShowArchived')
 			this.showArchived = !this.showArchived

src/components/cards/CardCover.vue

@@ -0,0 +1,102 @@
+<!--
+  - @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() {
+				if (this.$store.getters.cardById(this.cardId)?.attachmentCount > 0) {
+					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>

src/components/cards/CardItem.vue

@@ -34,6 +34,7 @@
 				<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
 				{{ board.title }} » {{ stack.title }}
 			</div>
+			<CardCover v-if="showCardCover" :card-id="card.id" />
 			<div class="card-upper">
 				<h3 v-if="inlineEditingBlocked">
 					{{ card.title }}
@@ -92,10 +93,11 @@ import labelStyle from '../../mixins/labelStyle.js'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
 import CardMenu from './CardMenu.vue'
 import DueDate from './badges/DueDate.vue'
+import CardCover from './CardCover.vue'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover },
 	directives: {
 		ClickOutside,
 	},
@@ -129,6 +131,7 @@ export default {
 			compactMode: state => state.compactMode,
 			showArchived: state => state.showArchived,
 			currentBoard: state => state.currentBoard,
+			showCardCover: state => state.showCardCover,
 		}),
 		...mapGetters([
 			'isArchived',

src/store/main.js

@@ -62,6 +62,7 @@ export default new Vuex.Store({
 		showArchived: false,
 		navShown: localStorage.getItem('deck.navShown') === null || localStorage.getItem('deck.navShown') === 'true',
 		compactMode: localStorage.getItem('deck.compactMode') === 'true',
+		showCardCover: localStorage.getItem('deck.showCardCover') === 'true',
 		sidebarShown: false,
 		currentBoard: null,
 		currentCard: null,
@@ -229,6 +230,10 @@ export default new Vuex.Store({
 			state.compactMode = !state.compactMode
 			localStorage.setItem('deck.compactMode', state.compactMode)
 		},
+		toggleShowCardCover(state) {
+			state.showCardCover = !state.showCardCover
+			localStorage.setItem('deck.showCardCover', state.showCardCover)
+		},
 		setBoards(state, boards) {
 			state.boards = boards
 		},
@@ -439,6 +444,9 @@ export default new Vuex.Store({
 		toggleCompactMode({ commit }) {
 			commit('toggleCompactMode')
 		},
+		toggleShowCardCover({ commit }) {
+			commit('toggleShowCardCover')
+		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		},