Rushing things in

Signed-off-by: marco <marcoambrosini@pm.me>

4 files changed, 102 insertions, 36 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 0655686fe..3ed04b3c9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -25,7 +25,7 @@
 	<file-preview v-bind="filePreview"
 		:tabindex="wrapperTabIndex"
 		class="file-preview"
-		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
+		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor, 'file-preview--row-layout': rowLayout}"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
 		<div v-if="!isLoading"
@@ -63,8 +63,8 @@
 			</template>
 		</Button>
 		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
-		<div class="name-container">
-			<strong v-if="shouldShowFileDetail">{{ fileDetail }}</strong>
+		<div v-if="shouldShowFileDetail" class="name-container">
+			{{ fileDetail }}
 		</div>
 	</file-preview>
 </template>
@@ -203,6 +203,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		rowLayout: {
+			type: Boolean,
+			default: false,
+		},
+
+		isSharedItemsTab: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -212,6 +222,9 @@ export default {
 	},
 	computed: {
 		shouldShowFileDetail() {
+			if (this.isSharedItemsTab && !this.rowLayout) {
+				return false
+			}
 			// display the file detail below the preview if the preview
 			// is not easily recognizable, when:
 			return (
@@ -473,6 +486,7 @@ export default {
 
 .file-preview {
 	position: relative;
+	min-width: 0;
 	width: 100%;
 	/* The file preview can not be a block; otherwise it would fill the whole
 	width of the container and the loading icon would not be centered on the
@@ -522,8 +536,7 @@ export default {
 	}
 
 	.image-container {
-		display: inline-block;
-		position: relative;
+		display: flex;
 
 		&.playable {
 			.preview {
@@ -554,19 +567,11 @@ export default {
 	}
 
 	.name-container {
-		/* Ellipsis with 100% width */
-		display: table;
-		table-layout: fixed;
+		font-weight: bold;
 		width: 100%;
-
-		strong {
-			/* As the file preview is an inline block the name is set as a block to
-			force it to be on its own line below the preview. */
-			display: block;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	&:not(.file-preview--viewer-available) {
@@ -589,6 +594,18 @@ export default {
 			width: 100%;
 		}
 	}
+
+	&--row-layout {
+		display: flex;
+		align-items: center;
+		height: 36px;
+		border-radius: var(--border-radius);
+		padding: 2px 4px;
+
+		.name-container {
+			padding: 0 4px;
+		}
+	}
 }
 
 .remove-file {
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index f2dc49aa0..390903ca3 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -21,23 +21,35 @@
 
 <template>
 	<div class="shared-items">
+		<AppNavigationCaption :title="title" />
+		<div class="files" :class="{'files__list' : isList}">
+			<template v-for="file in filesToDisplay">
+				<FilePreview :key="file.id"
+					:small-preview="isList"
+					:row-layout="isList"
+					:is-shared-items-tab="true"
+					v-bind="file.messageParameters.file" />
+			</template>
+		</div>
 		<Button type="tertiary"
+			class="shared-items__more"
 			:wide="true"
 			@click="handleCaptionClick">
-			{{ title }}
-		</Button>
-		<div class="files">
-			<template v-for="item in items">
-				<FilePreview :key="item.id"
-					v-bind="item.messageParameters.file" />
+			<template #icon>
+				<DotsHorizontal :size="20"
+					decorative
+					title="" />
 			</template>
-		</div>
+			Show all {{ title }}
+		</Button>
 	</div>
 </template>
 
 <script>
 import Button from '@nextcloud/vue/dist/Components/Button'
 import FilePreview from '../../MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 
 export default {
 	name: 'SharedItems',
@@ -45,6 +57,8 @@ export default {
 	components: {
 		Button,
 		FilePreview,
+		DotsHorizontal,
+		AppNavigationCaption,
 	},
 
 	props: {
@@ -60,6 +74,10 @@ export default {
 	},
 
 	computed: {
+		filesToDisplay() {
+			return Object.values(this.items).slice(0, 5)
+		},
+
 		title() {
 			switch (this.type) {
 			case 'media':
@@ -73,13 +91,28 @@ export default {
 			case 'location':
 				return t('spreed', 'Locations')
 			case 'audio':
-				return t('spreed', 'Music')
+				return t('spreed', 'Audio')
 			case 'other':
 				return t('spreed', 'Other')
 			default:
 				return ''
 			}
 		},
+
+		isList() {
+			switch (this.type) {
+			case 'file':
+				return true
+			case 'voice':
+				return true
+			case 'audio':
+				return true
+			case 'other':
+				return true
+			default:
+				return false
+			}
+		},
 	},
 
 	methods: {
@@ -91,13 +124,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.shared-items {
-	margin-bottom: 8px;
+.files {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	&__list {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
-::v-deep .button-vue--vue-tertiary {
-	justify-content: flex-start;
-	border-radius: var(--border-radius-large);
-	opacity: 1;
+.shared-items {
+	margin-bottom: 16px;
+	&__more {
+		margin-top: 4px;
+	}
 }
 </style>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index d130a8288..1871bb8b5 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -21,10 +21,13 @@
 
 <template>
 	<div v-if="!loading && active">
-		<SharedItems v-for="type in Object.keys(sharedItems)"
-			:key="type"
-			:type="type"
-			:items="sharedItems[type]" />
+		<template v-for="type in sharedItemsOrder">
+			<SharedItems v-if="sharedItems[type]"
+				:key="type"
+				:type="type"
+				:items="sharedItems[type]" />
+		</template>
+		<AppNavigationCaption :title="t('spreed', 'Projects')" />
 		<CollectionList v-if="getUserId && token"
 			:id="token"
 			type="room"
@@ -35,6 +38,7 @@
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
 import SharedItems from './SharedItems'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 
 export default {
 
@@ -43,6 +47,7 @@ export default {
 	components: {
 		SharedItems,
 		CollectionList,
+		AppNavigationCaption,
 	},
 
 	props: {
@@ -73,6 +78,11 @@ export default {
 		sharedItems() {
 			return this.$store.getters.sharedItems(this.token)
 		},
+
+		// Defines the order of the sections
+		sharedItemsOrder() {
+			return ['media', 'file', 'voice', 'audio', 'location', 'deckcard', 'other']
+		},
 	},
 
 	watch: {
diff --git a/src/store/conversationSharedItemsStore.js b/src/store/conversationSharedItemsStore.js
index 88db08531..9ea68d9c9 100644
--- a/src/store/conversationSharedItemsStore.js
+++ b/src/store/conversationSharedItemsStore.js
@@ -28,9 +28,9 @@ import { getSharedItemsOverview, getSharedItems } from '../services/conversation
 //    media: {},
 //    file: {},
 //    voice: {},
+//    audio: {},
 //    location: {}
 //    deckcard: {},
-//    audio: {},
 //    other: {},
 
 const state = () => ({