diff options
Diffstat (limited to 'src/components/RightSidebar/SharedItems/SharedItems.vue')
-rw-r--r-- | src/components/RightSidebar/SharedItems/SharedItems.vue | 107 |
1 files changed, 17 insertions, 90 deletions
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue index 072e268e4..d2c848804 100644 --- a/src/components/RightSidebar/SharedItems/SharedItems.vue +++ b/src/components/RightSidebar/SharedItems/SharedItems.vue @@ -20,48 +20,26 @@ --> <template> - <div class="shared-items"> - <AppNavigationCaption :title="title" /> - <div class="files" :class="{'files__list' : isList}"> - <template v-for="file in itemsToDisplay"> - <FilePreview :key="file.id" - :small-preview="isList" - :row-layout="isList" - :is-shared-items-tab="true" - v-bind="file.messageParameters.file" /> - </template> - </div> - <Button v-if="hasMore" - type="tertiary" - class="shared-items__more" - :wide="true" - @click="handleCaptionClick"> - <template #icon> - <DotsHorizontal :size="20" - decorative - title="" /> - </template> - {{ buttonTitle }} - </Button> + <div class="shared-items" :class="{'shared-items__list' : isList}"> + <template v-for="file in itemsToDisplay"> + <FilePreview :key="file.id" + :small-preview="isList" + :row-layout="isList" + :is-shared-items-tab="true" + v-bind="file.messageParameters.file" /> + </template> </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' -import { showMessage } from '@nextcloud/dialogs' import { SHARED_ITEM } from '../../../constants' export default { name: 'SharedItems', components: { - Button, FilePreview, - DotsHorizontal, - AppNavigationCaption, }, props: { @@ -74,51 +52,17 @@ export default { type: Object, required: true, }, + + // Limits the amount of items displayed + limit: { + type: Boolean, + default: false, + }, }, computed: { itemsToDisplay() { - return Object.values(this.items).reverse().slice(0, 6) - }, - - title() { - switch (this.type) { - case SHARED_ITEM.TYPES.MEDIA: - return t('spreed', 'Media') - case SHARED_ITEM.TYPES.FILE: - return t('spreed', 'Files') - case SHARED_ITEM.TYPES.DECK_CARD: - return t('spreed', 'Deck cards') - case SHARED_ITEM.TYPES.VOICE: - return t('spreed', 'Voice messages') - case SHARED_ITEM.TYPES.LOCATION: - return t('spreed', 'Locations') - case SHARED_ITEM.TYPES.AUDIO: - return t('spreed', 'Audio') - case SHARED_ITEM.TYPES.OTHER: - default: - return t('spreed', 'Other') - } - }, - - buttonTitle() { - switch (this.type) { - case SHARED_ITEM.TYPES.MEDIA: - return t('spreed', 'Show all media') - case SHARED_ITEM.TYPES.FILE: - return t('spreed', 'Show all files') - case SHARED_ITEM.TYPES.DECK_CARD: - return t('spreed', 'Show all deck cards') - case SHARED_ITEM.TYPES.VOICE: - return t('spreed', 'Show all voice messages') - case SHARED_ITEM.TYPES.LOCATION: - return t('spreed', 'Show all locations') - case SHARED_ITEM.TYPES.AUDIO: - return t('spreed', 'Show all audio') - case SHARED_ITEM.TYPES.OTHER: - default: - return t('spreed', 'Show all other') - } + return this.limit ? Object.values(this.items).reverse().slice(0, 6) : Object.values(this.items).reverse() }, isList() { @@ -131,26 +75,16 @@ export default { return true } }, - - hasMore() { - return Object.values(this.items).length > 6 - }, - }, - - methods: { - handleCaptionClick() { - showMessage('Screenshot feature only. Implementation of the real feature will come soon! 😎') - console.debug('Show more') - }, }, } </script> <style lang="scss" scoped> -.files { +.shared-items { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; + margin-bottom: 16px; grid-gap: 4px; &__list { display: flex; @@ -158,11 +92,4 @@ export default { } } - -.shared-items { - margin-bottom: 16px; - &__more { - margin-top: 8px; - } -} </style> |