Merge pull request #7221 from nextcloud/feature/noid/improve-shareditems-component

Improve SharedItems component

7 files changed, 69 insertions, 21 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
index e77000425..2531f594e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -21,6 +21,7 @@
 
 <template>
 	<a class="deck-card"
+		:class="{ 'wide': wide}"
 		:href="link"
 		:aria-label="deckCardAriaLabel"
 		target="_blank">
@@ -73,6 +74,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		wide: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -98,7 +104,7 @@ export default {
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
 	background-color: var(--color-main-background);
-	margin: 12px 0;
+	margin: 4px 0;
 	max-width: 300px;
 	padding: 8px 16px;
 	flex-direction: column;
@@ -133,4 +139,9 @@ export default {
 	opacity: .8;
 }
 
+.wide {
+	max-width: 400px;
+	margin: 4px auto;
+}
+
 </style>
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 553b675bd..4e18860c6 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -619,6 +619,7 @@ export default {
 		aspect-ratio: 1;
 		.preview {
 			width: 100%;
+			min-height: unset;
 		}
 	}
 }
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
index e41186efe..363860586 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
@@ -133,8 +133,7 @@ export default {
 	white-space: initial;
 	overflow: hidden;
 	border-radius: var(--border-radius-large);
-	height: 300px;
-	max-height: 30vh;
-	margin: 4px;
+	width: 100%;
+	height: 100%;
 }
 </style>
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index d2c848804..7a7a15472 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -21,12 +21,26 @@
 
 <template>
 	<div class="shared-items" :class="{'shared-items__list' : isList}">
-		<template v-for="file in itemsToDisplay">
-			<FilePreview :key="file.id"
+		<template v-for="item in itemsToDisplay">
+			<div v-if="type === 'location'"
+				:key="item.id"
+				class="shared-items__location"
+				:class="{ 'shared-items__location--nolimit': limit === 0 }">
+				<Location v-bind="item.messageParameters.object" />
+			</div>
+			<div v-else-if="type === 'deckcard'"
+				:key="item.id"
+				class="shared-items__deckcard"
+				:class="{ 'shared-items__location--nolimit': limit === 0 }">
+				<DeckCard :wide="true"
+					v-bind="item.messageParameters.object" />
+			</div>
+			<FilePreview v-else
+				:key="item.id"
 				:small-preview="isList"
 				:row-layout="isList"
 				:is-shared-items-tab="true"
-				v-bind="file.messageParameters.file" />
+				v-bind="item.messageParameters.file" />
 		</template>
 	</div>
 </template>
@@ -34,12 +48,16 @@
 <script>
 import FilePreview from '../../MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import { SHARED_ITEM } from '../../../constants'
+import Location from '../../MessagesList/MessagesGroup/Message/MessagePart/Location'
+import DeckCard from '../../MessagesList/MessagesGroup/Message/MessagePart/DeckCard'
 
 export default {
 	name: 'SharedItems',
 
 	components: {
 		FilePreview,
+		Location,
+		DeckCard,
 	},
 
 	props: {
@@ -55,23 +73,24 @@ export default {
 
 		// Limits the amount of items displayed
 		limit: {
-			type: Boolean,
-			default: false,
+			type: Number,
+			default: 0,
 		},
 	},
 
 	computed: {
 		itemsToDisplay() {
-			return this.limit ? Object.values(this.items).reverse().slice(0, 6) : Object.values(this.items).reverse()
+			if (this.limit === 0) {
+				return Object.values(this.items).reverse()
+			} else {
+				return Object.values(this.items).reverse().slice(0, this.limit)
+			}
 		},
 
 		isList() {
-			switch (this.type) {
-			case SHARED_ITEM.TYPES.MEDIA:
-				return false
-			case SHARED_ITEM.TYPES.LOCATION:
+			if (this.type === SHARED_ITEM.TYPES.MEDIA) {
 				return false
-			default:
+			} else {
 				return true
 			}
 		},
@@ -84,12 +103,23 @@ export default {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr;
-	margin-bottom: 16px;
 	grid-gap: 4px;
+	margin: auto;
 	&__list {
 		display: flex;
-		flex-direction: column;
+		flex-wrap: wrap;
 	}
+	&__location {
+		width: 100%;
+		height: 150px;
+		margin: 4px 0;
 
+		&--nolimit {
+			width: 33%;
+		}
+	}
+	&__deckcard {
+		width: 100%;
+	}
 }
 </style>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index f32e4914b..bdfa465f3 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -167,7 +167,7 @@ export default {
 ::v-deep .button-vue {
 	border-radius: var(--border-radius-large);
 	&.active {
-		background-color: var(--color-primary-element-hover);
+		background-color: var(--color-primary-light);
 	}
 }
 </style>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 6403ecc0f..0b51161ae 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -25,7 +25,7 @@
 			<div v-if="sharedItems[type]" :key="type">
 				<AppNavigationCaption :title="getTitle(type)" />
 				<SharedItems :type="type"
-					:limit="true"
+					:limit="limit(type)"
 					:items="sharedItems[type]" />
 				<Button v-if="hasMore(sharedItems[type])"
 					type="tertiary-no-background"
@@ -137,6 +137,14 @@ export default {
 			this.showSharedItemsBrowser = true
 		},
 
+		limit(type) {
+			if (type === SHARED_ITEM.TYPES.DECK_CARD || type === SHARED_ITEM.TYPES.LOCATION) {
+				return 2
+			} else {
+				return 6
+			}
+		},
+
 		getButtonTitle(type) {
 			switch (type) {
 			case SHARED_ITEM.TYPES.MEDIA:
diff --git a/src/mixins/sharedItems.js b/src/mixins/sharedItems.js
index 5569733ae..731552deb 100644
--- a/src/mixins/sharedItems.js
+++ b/src/mixins/sharedItems.js
@@ -26,8 +26,7 @@ const sharedItems = {
 	computed: {
 		// Defines the order of the sections
 		sharedItemsOrder() {
-			// FIXME restore when non files work return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER]
-			return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO]
+			return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER]
 		},
 	},