diff --git a/img/material-icons/perm-media-outline.svg b/img/material-icons/perm-media-outline.svg new file mode 100644 index 00000000000..3a009df2fc0 --- /dev/null +++ b/img/material-icons/perm-media-outline.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 1289a59aeaf..b46a4caedd7 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/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%; diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue index b36a1fd594e..11d4050f541 100644 --- a/src/components/RightSidebar/RightSidebar.vue +++ b/src/components/RightSidebar/RightSidebar.vue @@ -113,7 +113,7 @@ :order="5" :name="t('spreed', 'Shared items')"> @@ -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, diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue index 423c05cbcdb..e534c2d404c 100644 --- a/src/components/RightSidebar/SharedItems/SharedItems.vue +++ b/src/components/RightSidebar/SharedItems/SharedItems.vue @@ -4,7 +4,12 @@ -->