diff options
author | marco <marcoambrosini@pm.me> | 2022-04-20 17:09:16 +0300 |
---|---|---|
committer | marco <marcoambrosini@pm.me> | 2022-04-25 11:03:18 +0300 |
commit | 8c74a589ddacd1b497c2e50e8c4b227c5dc53307 (patch) | |
tree | 9fc7e2f756dfcb6f4be50a577cf7d5112f295ea8 | |
parent | 5be864c945927605ad9fa0b392f4792f2a722af8 (diff) |
Fix design and first loading of the elements
Signed-off-by: marco <marcoambrosini@pm.me>
3 files changed, 32 insertions, 28 deletions
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue index a04eb5bfb..665e664e5 100644 --- a/src/components/RightSidebar/SharedItems/SharedItems.vue +++ b/src/components/RightSidebar/SharedItems/SharedItems.vue @@ -20,7 +20,7 @@ --> <template> - <div class="shared-items" :class="{'files__list' : isList}"> + <div class="shared-items" :class="{'shared-items__list' : isList}"> <template v-for="file in itemsToDisplay"> <FilePreview :key="file.id" :small-preview="isList" @@ -74,7 +74,7 @@ export default { </script> <style lang="scss" scoped> -.files { +.shared-items { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue index f3a7eba3d..e40d79289 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue @@ -21,20 +21,22 @@ <template> <Modal size="large" v-on="$listeners"> - <div class="shared-items-browser__navigation"> - <template v-for="type in sharedItemsOrder"> - <Button v-if="sharedItems[type]" - :key="type" - :class="{'active' : activeTab === type}" - type="tertiary" - @click="handleTabClick(type)"> - {{ type }} - </Button> - </template> - </div> - <div class="shared-items-browser__content"> - <SharedItems :type="activeTab" - :items="sharedItems[activeTab]" /> + <div class="shared-items-browser"> + <div class="shared-items-browser__navigation"> + <template v-for="type in sharedItemsOrder"> + <Button v-if="sharedItems[type]" + :key="type" + :class="{'active' : activeTab === type}" + type="tertiary" + @click="handleTabClick(type)"> + {{ getTitle(type) }} + </Button> + </template> + </div> + <div class="shared-items-browser__content"> + <SharedItems :type="activeTab" + :items="sharedItems[activeTab]" /> + </div> </div> </Modal> </template> @@ -43,6 +45,7 @@ import Modal from '@nextcloud/vue/dist/Components/Modal' import Button from '@nextcloud/vue/dist/Components/Button' import SharedItems from '../SharedItems.vue' +import sharedItems from '../../../../mixins/sharedItems' export default { name: 'SharedItemsBrowser', @@ -53,17 +56,14 @@ export default { SharedItems, }, + mixins: [sharedItems], + props: { sharedItems: { type: Object, required: true, }, - sharedItemsOrder: { - type: Array, - required: true, - }, - activeTab: { type: String, required: true, @@ -80,6 +80,11 @@ export default { <style lang="scss" scoped> .shared-items-browser { + width: 100%; + height: 100%; + position:relative; + display: flex; + flex-direction: column; &__navigation { display: flex; gap: 8px; @@ -88,7 +93,9 @@ export default { justify-content: center; } &__content { - overflow: auto; + overflow-y: auto; + overflow-x: hidden; + margin: 0 12px; } } diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue index bf286369e..68ed6cf4b 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue @@ -30,7 +30,7 @@ type="tertiary-no-background" class="more" :wide="true" - @click="handleCaptionClick"> + @click="showMore(type)"> <template #icon> <DotsHorizontal :size="20" decorative @@ -48,7 +48,6 @@ <SharedItemsBrowser v-if="showSharedItemsBrowser" :shared-items="sharedItems" :active-tab.sync="browserActiveTab" - :shared-items-order="sharedItemsOrder" @close="showSharedItemsBrowser = false" /> </div> </template> @@ -62,7 +61,6 @@ 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' -import { showMessage } from '@nextcloud/dialogs' export default { @@ -133,9 +131,8 @@ export default { return Object.values(items).length > 6 }, - handleCaptionClick() { - showMessage('Screenshot feature only. Implementation of the real feature will come soon! 😎') - console.debug('Show more') + showMore(type) { + this.browserActiveTab = type this.showSharedItemsBrowser = true }, |