diff options
Diffstat (limited to 'src/components/RightSidebar/SharedItems/SharedItemsTab.vue')
-rw-r--r-- | src/components/RightSidebar/SharedItems/SharedItemsTab.vue | 85 |
1 files changed, 75 insertions, 10 deletions
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue index d3ee8db57..6403ecc0f 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue @@ -22,16 +22,34 @@ <template> <div v-if="!loading && active"> <template v-for="type in sharedItemsOrder"> - <SharedItems v-if="sharedItems[type]" - :key="type" - :type="type" - :items="sharedItems[type]" /> + <div v-if="sharedItems[type]" :key="type"> + <AppNavigationCaption :title="getTitle(type)" /> + <SharedItems :type="type" + :limit="true" + :items="sharedItems[type]" /> + <Button v-if="hasMore(sharedItems[type])" + type="tertiary-no-background" + class="more" + :wide="true" + @click="showMore(type)"> + <template #icon> + <DotsHorizontal :size="20" + decorative + title="" /> + </template> + {{ getButtonTitle(type) }} + </Button> + </div> </template> <AppNavigationCaption :title="t('spreed', 'Projects')" /> <CollectionList v-if="getUserId && token" :id="token" type="room" :name="conversation.displayName" /> + <SharedItemsBrowser v-if="showSharedItemsBrowser" + :shared-items="sharedItems" + :active-tab.sync="browserActiveTab" + @close="showSharedItemsBrowser = false" /> </div> </template> @@ -40,6 +58,10 @@ import { CollectionList } from 'nextcloud-vue-collections' import SharedItems from './SharedItems' import { SHARED_ITEM } from '../../../constants' import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption' +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' export default { @@ -49,8 +71,13 @@ export default { SharedItems, CollectionList, AppNavigationCaption, + SharedItemsBrowser, + DotsHorizontal, + Button, }, + mixins: [sharedItems], + props: { active: { @@ -59,6 +86,13 @@ export default { }, }, + data() { + return { + showSharedItemsBrowser: false, + browserActiveTab: '', + } + }, + computed: { getUserId() { return this.$store.getters.getUserId() @@ -79,12 +113,6 @@ export default { sharedItems() { return this.$store.getters.sharedItems(this.token) }, - - // Defines the order of the sections - sharedItemsOrder() { - // FIXME restore when non files work return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER] - return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO] - }, }, watch: { @@ -99,6 +127,43 @@ export default { getSharedItemsOverview() { this.$store.dispatch('getSharedItemsOverview', { token: this.token }) }, + + hasMore(items) { + return Object.values(items).length > 6 + }, + + showMore(type) { + this.browserActiveTab = type + this.showSharedItemsBrowser = true + }, + + getButtonTitle(type) { + switch (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') + } + }, }, } </script> + +<style lang="scss" scoped> + +.more { + margin-top: 8px; +} + +</style> |