diff options
4 files changed, 102 insertions, 36 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 0655686fe..3ed04b3c9 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -25,7 +25,7 @@ <file-preview v-bind="filePreview" :tabindex="wrapperTabIndex" class="file-preview" - :class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }" + :class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor, 'file-preview--row-layout': rowLayout}" @click.exact="handleClick" @keydown.enter="handleClick"> <div v-if="!isLoading" @@ -63,8 +63,8 @@ </template> </Button> <ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" /> - <div class="name-container"> - <strong v-if="shouldShowFileDetail">{{ fileDetail }}</strong> + <div v-if="shouldShowFileDetail" class="name-container"> + {{ fileDetail }} </div> </file-preview> </template> @@ -203,6 +203,16 @@ export default { type: Boolean, default: false, }, + + rowLayout: { + type: Boolean, + default: false, + }, + + isSharedItemsTab: { + type: Boolean, + default: false, + }, }, data() { return { @@ -212,6 +222,9 @@ export default { }, computed: { shouldShowFileDetail() { + if (this.isSharedItemsTab && !this.rowLayout) { + return false + } // display the file detail below the preview if the preview // is not easily recognizable, when: return ( @@ -473,6 +486,7 @@ export default { .file-preview { position: relative; + min-width: 0; width: 100%; /* The file preview can not be a block; otherwise it would fill the whole width of the container and the loading icon would not be centered on the @@ -522,8 +536,7 @@ export default { } .image-container { - display: inline-block; - position: relative; + display: flex; &.playable { .preview { @@ -554,19 +567,11 @@ export default { } .name-container { - /* Ellipsis with 100% width */ - display: table; - table-layout: fixed; + font-weight: bold; width: 100%; - - strong { - /* As the file preview is an inline block the name is set as a block to - force it to be on its own line below the preview. */ - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } &:not(.file-preview--viewer-available) { @@ -589,6 +594,18 @@ export default { width: 100%; } } + + &--row-layout { + display: flex; + align-items: center; + height: 36px; + border-radius: var(--border-radius); + padding: 2px 4px; + + .name-container { + padding: 0 4px; + } + } } .remove-file { diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue index f2dc49aa0..390903ca3 100644 --- a/src/components/RightSidebar/SharedItems/SharedItems.vue +++ b/src/components/RightSidebar/SharedItems/SharedItems.vue @@ -21,23 +21,35 @@ <template> <div class="shared-items"> + <AppNavigationCaption :title="title" /> + <div class="files" :class="{'files__list' : isList}"> + <template v-for="file in filesToDisplay"> + <FilePreview :key="file.id" + :small-preview="isList" + :row-layout="isList" + :is-shared-items-tab="true" + v-bind="file.messageParameters.file" /> + </template> + </div> <Button type="tertiary" + class="shared-items__more" :wide="true" @click="handleCaptionClick"> - {{ title }} - </Button> - <div class="files"> - <template v-for="item in items"> - <FilePreview :key="item.id" - v-bind="item.messageParameters.file" /> + <template #icon> + <DotsHorizontal :size="20" + decorative + title="" /> </template> - </div> + Show all {{ title }} + </Button> </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' export default { name: 'SharedItems', @@ -45,6 +57,8 @@ export default { components: { Button, FilePreview, + DotsHorizontal, + AppNavigationCaption, }, props: { @@ -60,6 +74,10 @@ export default { }, computed: { + filesToDisplay() { + return Object.values(this.items).slice(0, 5) + }, + title() { switch (this.type) { case 'media': @@ -73,13 +91,28 @@ export default { case 'location': return t('spreed', 'Locations') case 'audio': - return t('spreed', 'Music') + return t('spreed', 'Audio') case 'other': return t('spreed', 'Other') default: return '' } }, + + isList() { + switch (this.type) { + case 'file': + return true + case 'voice': + return true + case 'audio': + return true + case 'other': + return true + default: + return false + } + }, }, methods: { @@ -91,13 +124,19 @@ export default { </script> <style lang="scss" scoped> -.shared-items { - margin-bottom: 8px; +.files { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + &__list { + display: flex; + flex-direction: column; + } } -::v-deep .button-vue--vue-tertiary { - justify-content: flex-start; - border-radius: var(--border-radius-large); - opacity: 1; +.shared-items { + margin-bottom: 16px; + &__more { + margin-top: 4px; + } } </style> diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue index d130a8288..1871bb8b5 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue @@ -21,10 +21,13 @@ <template> <div v-if="!loading && active"> - <SharedItems v-for="type in Object.keys(sharedItems)" - :key="type" - :type="type" - :items="sharedItems[type]" /> + <template v-for="type in sharedItemsOrder"> + <SharedItems v-if="sharedItems[type]" + :key="type" + :type="type" + :items="sharedItems[type]" /> + </template> + <AppNavigationCaption :title="t('spreed', 'Projects')" /> <CollectionList v-if="getUserId && token" :id="token" type="room" @@ -35,6 +38,7 @@ <script> import { CollectionList } from 'nextcloud-vue-collections' import SharedItems from './SharedItems' +import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption' export default { @@ -43,6 +47,7 @@ export default { components: { SharedItems, CollectionList, + AppNavigationCaption, }, props: { @@ -73,6 +78,11 @@ export default { sharedItems() { return this.$store.getters.sharedItems(this.token) }, + + // Defines the order of the sections + sharedItemsOrder() { + return ['media', 'file', 'voice', 'audio', 'location', 'deckcard', 'other'] + }, }, watch: { diff --git a/src/store/conversationSharedItemsStore.js b/src/store/conversationSharedItemsStore.js index 88db08531..9ea68d9c9 100644 --- a/src/store/conversationSharedItemsStore.js +++ b/src/store/conversationSharedItemsStore.js @@ -28,9 +28,9 @@ import { getSharedItemsOverview, getSharedItems } from '../services/conversation // media: {}, // file: {}, // voice: {}, +// audio: {}, // location: {} // deckcard: {}, -// audio: {}, // other: {}, const state = () => ({ |