introduce Card Covers

Signed-off-by: Johannes Szeibert <johannes@szeibert.de>

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