Fix design and first loading of the elements

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

3 files changed, 32 insertions, 28 deletions

diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index a04eb5bfb..665e664e5 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="shared-items" :class="{'files__list' : isList}">
+	<div class="shared-items" :class="{'shared-items__list' : isList}">
 		<template v-for="file in itemsToDisplay">
 			<FilePreview :key="file.id"
 				:small-preview="isList"
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.files {
+.shared-items {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr;
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index f3a7eba3d..e40d79289 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -21,20 +21,22 @@
 
 <template>
 	<Modal size="large" v-on="$listeners">
-		<div class="shared-items-browser__navigation">
-			<template v-for="type in sharedItemsOrder">
-				<Button v-if="sharedItems[type]"
-					:key="type"
-					:class="{'active' : activeTab === type}"
-					type="tertiary"
-					@click="handleTabClick(type)">
-					{{ type }}
-				</Button>
-			</template>
-		</div>
-		<div class="shared-items-browser__content">
-			<SharedItems :type="activeTab"
-				:items="sharedItems[activeTab]" />
+		<div class="shared-items-browser">
+			<div class="shared-items-browser__navigation">
+				<template v-for="type in sharedItemsOrder">
+					<Button v-if="sharedItems[type]"
+						:key="type"
+						:class="{'active' : activeTab === type}"
+						type="tertiary"
+						@click="handleTabClick(type)">
+						{{ getTitle(type) }}
+					</Button>
+				</template>
+			</div>
+			<div class="shared-items-browser__content">
+				<SharedItems :type="activeTab"
+					:items="sharedItems[activeTab]" />
+			</div>
 		</div>
 	</Modal>
 </template>
@@ -43,6 +45,7 @@
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Button from '@nextcloud/vue/dist/Components/Button'
 import SharedItems from '../SharedItems.vue'
+import sharedItems from '../../../../mixins/sharedItems'
 
 export default {
 	name: 'SharedItemsBrowser',
@@ -53,17 +56,14 @@ export default {
 		SharedItems,
 	},
 
+	mixins: [sharedItems],
+
 	props: {
 		sharedItems: {
 			type: Object,
 			required: true,
 		},
 
-		sharedItemsOrder: {
-			type: Array,
-			required: true,
-		},
-
 		activeTab: {
 			type: String,
 			required: true,
@@ -80,6 +80,11 @@ export default {
 
 <style lang="scss" scoped>
 .shared-items-browser {
+	width: 100%;
+	height: 100%;
+	position:relative;
+	display: flex;
+	flex-direction: column;
 	&__navigation {
 		display: flex;
 		gap: 8px;
@@ -88,7 +93,9 @@ export default {
 		justify-content: center;
 	}
 	&__content {
-		overflow: auto;
+		overflow-y: auto;
+		overflow-x: hidden;
+		margin: 0 12px;
 	}
 }
 
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index bf286369e..68ed6cf4b 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -30,7 +30,7 @@
 					type="tertiary-no-background"
 					class="more"
 					:wide="true"
-					@click="handleCaptionClick">
+					@click="showMore(type)">
 					<template #icon>
 						<DotsHorizontal :size="20"
 							decorative
@@ -48,7 +48,6 @@
 		<SharedItemsBrowser v-if="showSharedItemsBrowser"
 			:shared-items="sharedItems"
 			:active-tab.sync="browserActiveTab"
-			:shared-items-order="sharedItemsOrder"
 			@close="showSharedItemsBrowser = false" />
 	</div>
 </template>
@@ -62,7 +61,6 @@ import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Button from '@nextcloud/vue/dist/Components/Button'
 import sharedItems from '../../../mixins/sharedItems'
-import { showMessage } from '@nextcloud/dialogs'
 
 export default {
 
@@ -133,9 +131,8 @@ export default {
 			return Object.values(items).length > 6
 		},
 
-		handleCaptionClick() {
-			showMessage('Screenshot feature only. Implementation of the real feature will come soon! 😎')
-			console.debug('Show more')
+		showMore(type) {
+			this.browserActiveTab = type
 			this.showSharedItemsBrowser = true
 		},