diff options
author | marco <marcoambrosini@pm.me> | 2022-04-13 15:19:21 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-04-13 17:14:20 +0300 |
commit | 259ba6eb6beae10a0981a5800d38be1cea178b3b (patch) | |
tree | 18c8d369b494d587948ca93b78a59fb928595b6d /src | |
parent | 25de64d55c9c8be6a3a029774f0f675adc63bfea (diff) |
Rushing more stuff in
Signed-off-by: marco <marcoambrosini@pm.me>
Diffstat (limited to 'src')
3 files changed, 51 insertions, 11 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 3ed04b3c9..09cda5d64 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -25,7 +25,10 @@ <file-preview v-bind="filePreview" :tabindex="wrapperTabIndex" class="file-preview" - :class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor, 'file-preview--row-layout': rowLayout}" + :class="{ 'file-preview--viewer-available': isViewerAvailable, + 'file-preview--upload-editor': isUploadEditor, + 'file-preview--shared-items-grid': isSharedItemsTab && !rowLayout, + 'file-preview--row-layout': rowLayout }" @click.exact="handleClick" @keydown.enter="handleClick"> <div v-if="!isLoading" @@ -537,6 +540,7 @@ export default { .image-container { display: flex; + height: 100%; &.playable { .preview { @@ -602,10 +606,21 @@ export default { border-radius: var(--border-radius); padding: 2px 4px; + .image-container { + height: 100%; + } + .name-container { padding: 0 4px; } } + + &--shared-items-grid { + aspect-ratio: 1; + .preview { + width: 100%; + } + } } .remove-file { diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue index f16347906..8f4427e54 100644 --- a/src/components/RightSidebar/RightSidebar.vue +++ b/src/components/RightSidebar/RightSidebar.vue @@ -81,7 +81,7 @@ ref="sharedItemsTab" :order="4" icon="icon-details" - :name="t('spreed', 'Shared Items')" + :name="t('spreed', 'Shared items')" @update:active="handleUpdateActive"> <template #icon> <FolderMultipleImage :size="20" diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue index 390903ca3..7f8cbb72f 100644 --- a/src/components/RightSidebar/SharedItems/SharedItems.vue +++ b/src/components/RightSidebar/SharedItems/SharedItems.vue @@ -31,7 +31,8 @@ v-bind="file.messageParameters.file" /> </template> </div> - <Button type="tertiary" + <Button v-if="hasMore" + type="tertiary" class="shared-items__more" :wide="true" @click="handleCaptionClick"> @@ -40,7 +41,7 @@ decorative title="" /> </template> - Show all {{ title }} + {{ buttonTitle }} </Button> </div> </template> @@ -75,7 +76,7 @@ export default { computed: { filesToDisplay() { - return Object.values(this.items).slice(0, 5) + return Object.values(this.items).slice(0, 6) }, title() { @@ -99,20 +100,41 @@ export default { } }, - isList() { + buttonTitle() { switch (this.type) { + case 'media': + return t('spreed', 'Show all media') case 'file': - return true + return t('spreed', 'Show all files') + case 'deck-card': + return t('spreed', 'Show all deck cards') case 'voice': - return true + return t('spreed', 'Show all voice messages') + case 'location': + return t('spreed', 'Show all locations') case 'audio': - return true + return t('spreed', 'Show all audio') case 'other': - return true + return t('spreed', 'Show all other') default: + return '' + } + }, + + isList() { + switch (this.type) { + case 'media': + return false + case 'locations': return false + default: + return true } }, + + hasMore() { + return Object.values(this.items).length > 6 + }, }, methods: { @@ -127,16 +149,19 @@ export default { .files { display: grid; grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 4px; &__list { display: flex; flex-direction: column; } + } .shared-items { margin-bottom: 16px; &__more { - margin-top: 4px; + margin-top: 8px; } } </style> |