fix(SharedItems): adjust tab styling

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -279,16 +279,21 @@ export default {
 				return {}
 			}
 
+			// Used in shared items grid (square container)
+			if (this.isSharedItems && !this.rowLayout) {
+				return {}
+			}
+
 			// Fallback for loading mimeicons (preview for audio files is not provided)
 			if (this.file['preview-available'] !== 'yes' || this.file.mimetype.startsWith('audio/') || this.failed) {
 				return {
-					width: this.smallPreview ? '32px' : '128px',
-					height: this.smallPreview ? '32px' : '128px',
+					width: this.smallPreview ? '24px' : '128px',
+					height: this.smallPreview ? '24px' : '128px',
 				}
 			}
 
-			const widthConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 600)
-			const heightConstraint = this.smallPreview ? 32 : (this.mediumPreview ? 192 : 384)
+			const widthConstraint = this.smallPreview ? 24 : (this.mediumPreview ? 192 : 600)
+			const heightConstraint = this.smallPreview ? 24 : (this.mediumPreview ? 192 : 384)
 
 			// Actual size when no metadata available
 			if (!this.file.width || !this.file.height) {
@@ -352,7 +357,7 @@ export default {
 			// use preview provider URL to render a smaller preview
 			let previewSize = 384
 			if (this.smallPreview) {
-				previewSize = 32
+				previewSize = 24
 			}
 			previewSize = Math.ceil(previewSize * window.devicePixelRatio)
 			if (userId === null) {
@@ -527,7 +532,7 @@ export default {
 	max-width: 100%;
 	display: inline-block;
 
-	border-radius: 16px;
+	border-radius: var(--border-radius);
 
 	box-sizing: content-box !important;
 
@@ -564,7 +569,7 @@ export default {
 
 	.mimeicon.preview-small {
 		min-height: auto;
-		height: 32px;
+		max-height: 24px;
 	}
 
 	.preview {
@@ -582,7 +587,7 @@ export default {
 	.preview-small {
 		border-radius: var(--border-radius);
 		max-width: 100%;
-		max-height: 32px;
+		max-height: 24px;
 	}
 
 	.preview-loading {
@@ -656,37 +661,28 @@ export default {
 			width: 128px;
 			height: 128px;
 		}
-
-		.loading {
-			width: 100%;
-		}
 	}
 
 	&--row-layout {
 		display: flex;
 		align-items: center;
-		height: 32px;
 		border-radius: var(--border-radius);
 		padding: 2px 4px;
 
 		.image-container {
 			flex-shrink: 0;
-			height: 32px;
-			width: 32px;
+			width: 24px;
 		}
 
 		.name-container {
 			padding: 0 4px;
-		}
-
-		.loading {
-			width: 32px;
-			height: 32px;
+			font-weight: normal;
 		}
 	}
 
 	&--shared-items-grid {
 		aspect-ratio: 1;
+		line-height: 0;
 
 		.preview {
 			width: 100%;

src/components/RightSidebar/RightSidebar.vue

@@ -113,7 +113,7 @@
 				:order="5"
 				:name="t('spreed', 'Shared items')">
 				<template #icon>
-					<IconFolderMultipleImage :size="20" />
+					<NcIconSvgWrapper :svg="IconPermMediaOutline" :size="20" />
 				</template>
 				<SharedItemsTab :active="activeTab === 'shared-items'" @update:state="handleUpdateState" />
 			</NcAppSidebarTab>
@@ -130,10 +130,10 @@ import { ref } from 'vue'
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
-import IconFolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import IconMessageTextOutline from 'vue-material-design-icons/MessageTextOutline.vue'
@@ -148,6 +148,7 @@ import SearchMessagesTab from './SearchMessages/SearchMessagesTab.vue'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
 import SipSettings from './SipSettings.vue'
 import ThreadsTab from './Threads/ThreadsTab.vue'
+import IconPermMediaOutline from '../../../img/material-icons/perm-media-outline.svg?raw'
 import { useGetParticipants } from '../../composables/useGetParticipants.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT, WEBINAR } from '../../constants.ts'
@@ -170,6 +171,7 @@ export default {
 		NcAppSidebar,
 		NcAppSidebarTab,
 		NcButton,
+		NcIconSvgWrapper,
 		ParticipantsTab,
 		RightSidebarContent,
 		SearchMessagesTab,
@@ -181,7 +183,6 @@ export default {
 		IconAccountMultipleOutline,
 		IconCogOutline,
 		IconDotsCircle,
-		IconFolderMultipleImage,
 		IconInformationOutline,
 		IconMessageOutline,
 		IconMessageTextOutline,
@@ -244,6 +245,7 @@ export default {
 		}
 
 		return {
+			IconPermMediaOutline,
 			activeTab,
 			CONTENT_MODES,
 			contentModeIndex,

src/components/RightSidebar/SharedItems/SharedItems.vue

@@ -4,7 +4,12 @@
 -->
 
 <template>
-	<div class="shared-items" :class="{ 'shared-items__list': hasListLayout }">
+	<div
+		class="shared-items"
+		:class="{
+			'shared-items__media': isMedia,
+			'shared-items__list': hasListLayout,
+		}">
 		<template v-for="item in itemsToDisplay" :key="item.id">
 			<div v-if="isLocation" class="shared-items__location">
 				<Location wide v-bind="item.messageParameters.object" />
@@ -122,21 +127,25 @@ export default {
 <style lang="scss" scoped>
 .shared-items {
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-gap: 6px;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: var(--default-grid-baseline);
 	margin: auto;
 
+	&__media {
+		grid-template-columns: repeat(5, 1fr);
+	}
+
 	&__list {
 		grid-template-columns: 1fr;
 	}
 
 	&__location {
 		height: 150px;
-		margin: 4px 0;
+		margin-block: var(--default-grid-baseline);
 	}
 
 	&__other {
-		padding-inline-start: 8px;
+		padding-inline-start: calc(var(--default-grid-baseline) * 2);
 
 		a {
 			text-decoration: underline;

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -17,17 +17,17 @@ import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCap
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCollectionList from '@nextcloud/vue/components/NcCollectionList'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcRelatedResourcesPanel from '@nextcloud/vue/components/NcRelatedResourcesPanel'
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import IconFolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 import IconPoll from 'vue-material-design-icons/Poll.vue'
 import LoadingComponent from '../../LoadingComponent.vue'
 import ThreadItem from '../Threads/ThreadItem.vue'
 import SharedItems from './SharedItems.vue'
 import SharedItemsBrowser from './SharedItemsBrowser.vue'
+import IconPermMediaOutline from '../../../../img/material-icons/perm-media-outline.svg?raw'
 import { useGetToken } from '../../../composables/useGetToken.ts'
-import { CONVERSATION } from '../../../constants.ts'
+import { CONVERSATION, SHARED_ITEM } from '../../../constants.ts'
 import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../../services/EventBus.ts'
 import { useActorStore } from '../../../stores/actor.ts'
@@ -99,7 +99,7 @@ function showMore(type: string) {
  * Get the limit for the number of items displayed based on the type.
  */
 function limit(type: string) {
-	return sharedItemsWithPreviewLimit.includes(type) ? 2 : 6
+	return sharedItemsWithPreviewLimit.includes(type) ? 2 : 5
 }
 
 /**
@@ -116,44 +116,45 @@ function openPollDraftHandler() {
 		<LoadingComponent v-if="!sharedItemsStore.overviewLoaded[token]" class="shared-items-tab__loading" />
 
 		<template v-else>
-			<NcButton v-if="canCreatePollDrafts"
-				wide
-				@click="openPollDraftHandler">
-				<template #icon>
-					<IconPoll :size="20" />
-				</template>
-				{{ t('spreed', 'Browse poll drafts') }}
-			</NcButton>
 			<!-- Threads overview -->
 			<template v-if="supportThreads && threadsInformation.length">
 				<NcAppNavigationCaption :name="t('spreed', 'Recent threads')" />
 				<ul class="threads-list">
 					<ThreadItem v-for="thread of threadsInformation"
 						:key="`thread_${thread.thread.id}`"
 						:thread="thread" />
-					<NcListItem v-if="hasMoreThreads"
-						:name="t('spreed', 'Show more threads')"
-						one-line
+					<NcButton v-if="hasMoreThreads"
+						variant="tertiary"
+						class="shared-items-tab__more-button shared-items-tab__more-button--threads"
 						@click="emit('update:state', 'threads')">
 						<template #icon>
-							<IconDotsHorizontal class="threads-icon" :size="20" />
+							<IconDotsHorizontal :size="24" />
 						</template>
-					</NcListItem>
+						{{ t('spreed', 'Show more threads') }}
+					</NcButton>
 				</ul>
 			</template>
 			<!-- Shared items grouped by type -->
 			<template v-for="type in sharedItemsOrder" :key="type">
-				<div v-if="sharedItems[type]">
+				<div v-if="sharedItems[type]" class="shared-items-tab__section">
 					<NcAppNavigationCaption :name="sharedItemTitle[type] || sharedItemTitle.default" />
+					<NcButton v-if="type === SHARED_ITEM.TYPES.POLL && canCreatePollDrafts"
+						class="shared-items-tab__poll-button"
+						wide
+						@click="openPollDraftHandler">
+						<template #icon>
+							<IconPoll :size="20" />
+						</template>
+						{{ t('spreed', 'Browse poll drafts') }}
+					</NcButton>
 					<SharedItems :type="type"
 						:token="token"
 						tab-view
 						:limit="limit(type)"
 						:items="sharedItems[type]" />
 					<NcButton v-if="hasMore(type, sharedItems[type])"
-						variant="tertiary-no-background"
-						class="more"
-						wide
+						variant="tertiary"
+						class="shared-items-tab__more-button"
 						@click="showMore(type)">
 						<template #icon>
 							<IconDotsHorizontal :size="20" />
@@ -184,7 +185,7 @@ function openPollDraftHandler() {
 				class="shared-items-tab__empty-content"
 				:name="t('spreed', 'No shared items')">
 				<template #icon>
-					<IconFolderMultipleImage :size="20" />
+					<NcIconSvgWrapper :svg="IconPermMediaOutline" />
 				</template>
 			</NcEmptyContent>
 		</template>
@@ -199,15 +200,11 @@ function openPollDraftHandler() {
 </template>
 
 <style lang="scss" scoped>
-.more {
-	margin-top: 8px;
-}
-
 // Override default NcRelatedResourcesPanel styles
 .related-resources {
 	&:deep(.related-resources__header) {
 		margin: 14px 0 !important;
-		padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
+		padding: 0 calc(var(--default-grid-baseline) * 2) 0 calc(var(--default-grid-baseline) * 3);
 
 		h5 {
 			opacity: .7 !important;
@@ -221,19 +218,48 @@ function openPollDraftHandler() {
 	flex-direction: column;
 	height: 100%;
 
+	&__section {
+		margin-top: calc(var(--default-grid-baseline) * 6);
+	}
+
 	&__loading,
 	&__empty-content {
 		flex: 1;
 	}
+
+	&__more-button {
+		margin-top: var(--default-grid-baseline);
+
+		// Override NcButton styles to align mdi icons and mimetype icons
+		&.button-vue--tertiary {
+			border-width: 0;
+		}
+
+		:deep(.button-vue__icon) {
+			margin-inline-end: var(--default-grid-baseline);
+			width: 24px;
+			min-width: 24px;
+		}
+
+		&--threads {
+			margin-inline-start: var(--default-grid-baseline);
+
+			:deep(.button-vue__icon) {
+				margin-inline-end: calc(var(--default-grid-baseline) * 2);
+				width: 40px;
+			}
+		}
+	}
+
+	&__poll-button {
+		max-width: 300px;
+		margin-bottom: var(--default-grid-baseline);
+	}
 }
 
 .threads {
 	&-list {
 		line-height: 20px;
 	}
-
-	&-icon {
-		width: 40px; // AVATAR.SIZE.DEFAULT
-	}
 }
 </style>