MultiSelectToolbar.vue refactoring

This commit is contained in:
Peter Papp
2021-08-21 11:19:03 +02:00
parent a6e60d2efa
commit 1f529ae7e0
11 changed files with 222 additions and 169 deletions

View File

@@ -36,18 +36,18 @@
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac",
"/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a547f8b4e9a83935a777",
"/chunks/files.js": "/chunks/files.js?id=81cbccaead082c6468b0",
"/chunks/files.js": "/chunks/files.js?id=5678aec50204dfafee5a",
"/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared/file-browser~d426c4eb.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared/file-browser~d426c4eb.js?id=c6ab649e67651e0b9f18",
"/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~9a5728b1.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~9a5728b1.js?id=4f10f893c25e398f40bc",
"/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~aaaa339d.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~aaaa339d.js?id=593b877c4ab874ceccfe",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~5df0355d.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~5df0355d.js?id=00e9511436f16aa2fb9f",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/s~b80f3c10.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/s~b80f3c10.js?id=b8f5bee79fa82cda17e2",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js?id=c26fb3aed50304a2e885",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js?id=29e780fa7c0ba1b0621c",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
"/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=a5b0819b57321599f235",
"/chunks/invoices.js": "/chunks/invoices.js?id=f0360ddfb0f1e1a9058b",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ad31f749fcbdf5e626d6",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=bc5785e11ec2e215229b",
"/chunks/not-found.js": "/chunks/not-found.js?id=8e5c99340188c2a7b215",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=3d194f15e25dec1c54d3",
"/chunks/pages.js": "/chunks/pages.js?id=bfd9a2e2c52e60ed025e",
@@ -57,14 +57,14 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
"/chunks/plans.js": "/chunks/plans.js?id=5a3c28288952fcad96e5",
"/chunks/platform.js": "/chunks/platform.js?id=0c8536f2a097294531d3",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=f34a9d8dfe3fa1dd3075",
"/chunks/platform.js": "/chunks/platform.js?id=f7160dbc4da21f48e763",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=1d9973665b52418010a8",
"/chunks/platform~chunks/shared/file-browser.js": "/chunks/platform~chunks/shared/file-browser.js?id=40ad3638485c345cced0",
"/chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=6ba92eab6a45cbab3af5",
"/chunks/profile.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=4b176796d100a2b24d71",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=6ee4a8e37883d62f19be",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=808b27b4d0bf98bf5ed7",
"/chunks/settings.js": "/chunks/settings.js?id=a1e5e739768b788a043a",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0656db2b76eaa0de2c58",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=29fbd676788295256ffe",
@@ -74,7 +74,7 @@
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=51b246c660e78c9263b5",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=680f99e2021f19ff1af8",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=8a499266af9527039582",
"/chunks/shared.js": "/chunks/shared.js?id=cbce7fa19a7914c15626",
"/chunks/shared.js": "/chunks/shared.js?id=580b344c45d867c2e48a",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=30b0b0d1930a1952648a",
"/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=02bb2b1a5518a1f73b2a",
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=b733dc84cd8e05a8f6f3",
@@ -84,7 +84,7 @@
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=2802cde66f7d12ec8442",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5dbfd83cfacad270a636",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=721e855dff920e5e6996",
"/chunks/trash.js": "/chunks/trash.js?id=286a0245cc4d75836686",
"/chunks/trash.js": "/chunks/trash.js?id=16d5b490b6ca3924e977",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=8879f5c458f08648405a",
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=e365ae16373be9dbd458",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=fc8183dc546683a9b60f",
@@ -233,5 +233,37 @@
"/chunks/my-shared-items.9c32e0067313b1b3b718.hot-update.js": "/chunks/my-shared-items.9c32e0067313b1b3b718.hot-update.js",
"/chunks/platform.9c32e0067313b1b3b718.hot-update.js": "/chunks/platform.9c32e0067313b1b3b718.hot-update.js",
"/chunks/recent-uploads.9c32e0067313b1b3b718.hot-update.js": "/chunks/recent-uploads.9c32e0067313b1b3b718.hot-update.js",
"/chunks/trash.9c32e0067313b1b3b718.hot-update.js": "/chunks/trash.9c32e0067313b1b3b718.hot-update.js"
"/chunks/trash.9c32e0067313b1b3b718.hot-update.js": "/chunks/trash.9c32e0067313b1b3b718.hot-update.js",
"/chunks/files.e8c6612ed344bb895034.hot-update.js": "/chunks/files.e8c6612ed344bb895034.hot-update.js",
"/chunks/platform.e8c6612ed344bb895034.hot-update.js": "/chunks/platform.e8c6612ed344bb895034.hot-update.js",
"/chunks/platform~chunks/shared.e8c6612ed344bb895034.hot-update.js": "/chunks/platform~chunks/shared.e8c6612ed344bb895034.hot-update.js",
"/chunks/shared.e8c6612ed344bb895034.hot-update.js": "/chunks/shared.e8c6612ed344bb895034.hot-update.js",
"/chunks/shared.1c345f819577d095288f.hot-update.js": "/chunks/shared.1c345f819577d095288f.hot-update.js",
"/js/main.e5098c69d2f71860e451.hot-update.js": "/js/main.e5098c69d2f71860e451.hot-update.js",
"/chunks/files.e5098c69d2f71860e451.hot-update.js": "/chunks/files.e5098c69d2f71860e451.hot-update.js",
"/chunks/files~chunks/shared.js": "/chunks/files~chunks/shared.js?id=176fac278aed7180d670",
"/chunks/shared.e5098c69d2f71860e451.hot-update.js": "/chunks/shared.e5098c69d2f71860e451.hot-update.js",
"/js/main.a38418be99392ba398ba.hot-update.js": "/js/main.a38418be99392ba398ba.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/shared.js": "/chunks/files~chunks/my-shared-items~chunks/shared.js?id=b34794995c158067c00b",
"/chunks/my-shared-items.a38418be99392ba398ba.hot-update.js": "/chunks/my-shared-items.a38418be99392ba398ba.hot-update.js",
"/js/main.4000eebdc5aaf8564572.hot-update.js": "/js/main.4000eebdc5aaf8564572.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/shared~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/shared~chunks/trash.js?id=c592873306181b534e27",
"/chunks/shared.4000eebdc5aaf8564572.hot-update.js": "/chunks/shared.4000eebdc5aaf8564572.hot-update.js",
"/chunks/trash.4000eebdc5aaf8564572.hot-update.js": "/chunks/trash.4000eebdc5aaf8564572.hot-update.js",
"/js/main.826ae74de9e577406f1f.hot-update.js": "/js/main.826ae74de9e577406f1f.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.js?id=a78c3fdb03833338ce21",
"/chunks/recent-uploads.826ae74de9e577406f1f.hot-update.js": "/chunks/recent-uploads.826ae74de9e577406f1f.hot-update.js",
"/chunks/files.8752415e0c994d41e29f.hot-update.js": "/chunks/files.8752415e0c994d41e29f.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.8752415e0c994d41e29f.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.8752415e0c994d41e29f.hot-update.js",
"/chunks/my-shared-items.8752415e0c994d41e29f.hot-update.js": "/chunks/my-shared-items.8752415e0c994d41e29f.hot-update.js",
"/chunks/recent-uploads.8752415e0c994d41e29f.hot-update.js": "/chunks/recent-uploads.8752415e0c994d41e29f.hot-update.js",
"/chunks/trash.8752415e0c994d41e29f.hot-update.js": "/chunks/trash.8752415e0c994d41e29f.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.edbb5f38684dee314721.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.edbb5f38684dee314721.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.87e0e1f28b1012071767.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.87e0e1f28b1012071767.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.22bb5798cf152beb6ca2.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.22bb5798cf152beb6ca2.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.b4e5e9ba78ce99883247.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.b4e5e9ba78ce99883247.hot-update.js",
"/chunks/platform~chunks/shared.c49cc3ac2887e0b0f8f9.hot-update.js": "/chunks/platform~chunks/shared.c49cc3ac2887e0b0f8f9.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.d7af9825fbd47b62828d.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.d7af9825fbd47b62828d.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.6257308dc31d7129c2e5.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.6257308dc31d7129c2e5.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.84c7f1b75310acf0bf1f.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared~chunks/trash.84c7f1b75310acf0bf1f.hot-update.js"
}

View File

@@ -73,9 +73,9 @@ export default {
let VerticalOffsetArea = nodesSameClass.length * 50
let HorizontalOffsetArea = 190
let container = document.getElementById('files-view')
let container = document.getElementById('file-view')
var offset = container.getClientRects()[0]
let offset = container.getClientRects()[0]
let x = event.clientX - offset.left
let y = event.clientY - offset.top

View File

@@ -1,28 +1,24 @@
<template>
<transition name="context-menu">
<div class="multiselect-actions" v-if="mobileMultiSelect">
<ToolbarButton class="action-btn" v-if="!$isThisLocation(['trash', 'trash-root' , 'shared', 'latest']) && $checkPermission('master') || $checkPermission('editor')" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" @click.native="moveItem" />
<div v-if="mobileMultiSelect" class="multiselect-actions">
<slot v-if="$slots.default" />
<slot v-if="$slots.editor" name="editor"></slot>
<slot v-if="$slots.visitor" name="visitor"></slot>
<ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared']) && $checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem" />
<ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared'])" source="download" :action="$t('actions.delete')" @click.native="downloadItem" />
<ToolbarButton class="action-btn" source="shared-off" @click.native="shareCancel" v-if="$isThisLocation(['shared'])" />
<ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting" />
<ToolbarButton @click.native="closeSelecting" class="action-btn close-icon" source="close" :action="$t('actions.close')" />
</div>
</transition>
</template>
<script>
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
export default {
name: 'MultiSelectToolbarMobile',
name: 'MultiSelectToolbar',
components: {
ToolbarButton
ToolbarButton,
},
computed: {
...mapGetters([
@@ -35,29 +31,9 @@ export default {
}
},
methods: {
shareCancel() {
this.$store.dispatch('shareCancel')
this.closeSelecting()
},
closeSelecting() {
events.$emit('mobileSelecting:stop')
},
downloadItem() {
if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
this.$store.dispatch('downloadZip')
else {
this.$downloadFile(this.clipboard[0].file_url, this.clipboard[0].name + '.' + this.clipboard[0].mimetype)
}
this.closeSelecting()
},
moveItem() {
// Open move item popup
events.$emit('popup:open', {name: 'move', item: [this.clipboard[0]]})
},
deleteItem() {
this.$store.dispatch('deleteItem')
this.closeSelecting()
}
},
created() {
events.$on('mobileSelecting:start', () => this.mobileMultiSelect = true)

View File

@@ -3,38 +3,39 @@
<!--Title-->
<PopupHeader :title="$t('popup_move_item.title')" icon="move" />
<!--Content-->
<!--Content-->
<PopupContent type="height-limited" v-if="pickedItem">
<!--Show Spinner when loading folders-->
<Spinner v-if="isLoadingTree" />
<!--Folder tree-->
<!--Folder tree-->
<div v-if="! isLoadingTree && navigation">
<ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" />
<TitlePreview class="multiple-selected"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
v-if="clipboard.length > 1 && !isSelectedItem" />
icon="check-square"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
v-if="clipboard.length > 1 && !isSelectedItem" />
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
</div>
</PopupContent>
<!--Actions-->
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
>{{ $t('popup_move_item.submit') }}
class="popup-button"
@click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'"
>{{ $t('popup_move_item.submit') }}
</ButtonBase>
</PopupActions>
</PopupWrapper>
@@ -42,119 +43,119 @@
<script>
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import Spinner from '/resources/js/components/FilesView/Spinner'
import TreeMenu from '/resources/js/components/Others/TreeMenu'
import {isArray, isNull} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import Spinner from '/resources/js/components/FilesView/Spinner'
import TreeMenu from '/resources/js/components/Others/TreeMenu'
import {isArray, isNull} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
export default {
name: 'MoveItemPopup',
components: {
ThumbnailItem,
TitlePreview,
PopupWrapper,
PopupActions,
PopupContent,
PopupHeader,
ButtonBase,
TreeMenu,
Spinner,
},
computed: {
...mapGetters([
'clipboard',
'navigation',
]),
},
data() {
return {
selectedFolder: undefined,
pickedItem: undefined,
isLoadingTree: true,
isSelectedItem: false
}
},
methods: {
moveItem() {
// Prevent empty submit
if (!this.selectedFolder) return
export default {
name: 'MoveItemPopup',
components: {
ThumbnailItem,
TitlePreview,
PopupWrapper,
PopupActions,
PopupContent,
PopupHeader,
ButtonBase,
TreeMenu,
Spinner,
},
computed: {
...mapGetters([
'navigation',
'clipboard',
]),
},
data() {
return {
selectedFolder: undefined,
pickedItem: undefined,
isLoadingTree: true,
isSelectedItem: false
}
},
methods: {
moveItem() {
// Prevent empty submit
if (!this.selectedFolder) return
// Prevent to move items to the same parent
if ( isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.id)) return
// Prevent to move items to the same parent
if (isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.id)) return
// Move item
if (!this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: null})
}
// Move item
if (!this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: null})
}
if (this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
}
if (this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
}
// Close popup
events.$emit('popup:close')
// Close popup
events.$emit('popup:close')
// If is mobile, close the selecting mod after done the move action
if (this.$isMobile())
events.$emit('mobileSelecting:stop')
},
},
mounted() {
events.$on('pick-folder', folder => {
// If is mobile, close the selecting mod after done the move action
if (this.$isMobile())
events.$emit('mobileSelecting:stop')
},
},
mounted() {
events.$on('pick-folder', folder => {
if (folder.id === this.pickedItem.id) {
this.selectedFolder = undefined
if (folder.id === this.pickedItem.id) {
this.selectedFolder = undefined
} else if ( ! folder.id && folder.location === 'base') {
this.selectedFolder = 'base'
} else if (!folder.id && folder.location === 'base') {
this.selectedFolder = 'base'
} else {
this.selectedFolder = folder
}
})
} else {
this.selectedFolder = folder
}
})
// Show Move item popup
events.$on('popup:open', args => {
// Show Move item popup
events.$on('popup:open', args => {
if (args.name !== 'move') return
if (args.name !== 'move') return
// Show tree spinner
this.isLoadingTree = true
// Show tree spinner
this.isLoadingTree = true
// Get folder tree and hide spinner
this.$store.dispatch('getFolderTree').then(() => {
this.isLoadingTree = false
})
// Get folder tree and hide spinner
this.$store.dispatch('getFolderTree').then(() => {
this.isLoadingTree = false
})
// Store picked item
if (!this.clipboard.includes(args.item[0])) {
this.pickedItem = args.item[0]
this.isSelectedItem = true
}
// Store picked item
if (!this.clipboard.includes(args.item[0])) {
this.pickedItem = args.item[0]
this.isSelectedItem = true
}
if (this.clipboard.includes(args.item[0])) {
this.pickedItem = this.clipboard[0]
this.isSelectedItem = false
}
})
if (this.clipboard.includes(args.item[0])) {
this.pickedItem = this.clipboard[0]
this.isSelectedItem = false
}
})
// Close popup
events.$on('popup:close', () => {
// Close popup
events.$on('popup:close', () => {
// Clear selected folder
setTimeout(() => {
this.selectedFolder = undefined
}, 150)
})
}
}
// Clear selected folder
setTimeout(() => {
this.selectedFolder = undefined
}, 150)
})
}
}
</script>
<style scoped lang="scss">
@@ -162,11 +163,11 @@
@import '/resources/sass/vuefilemanager/_mixins';
.item-thumbnail {
margin-bottom: 20px;
margin-bottom: 20px;
}
.multiple-selected {
padding: 0 20px;;
margin-bottom: 20px;
padding: 0 20px;;
margin-bottom: 20px;
}
</style>

View File

@@ -60,7 +60,6 @@
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -92,14 +91,22 @@
</ButtonUpload>
</template>
</FileBrowser>
<MultiSelectToolbar>
<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</MultiSelectToolbar>
</div>
</template>
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -110,10 +117,11 @@
export default {
name: 'Files',
components: {
MobileContextMenu,
MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
ButtonUpload,
OptionGroup,
FileBrowser,

View File

@@ -48,7 +48,6 @@
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -69,13 +68,20 @@
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</template>
</FileBrowser>
<MultiSelectToolbar>
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
</MultiSelectToolbar>
</div>
</template>
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -88,7 +94,9 @@
components: {
MobileActionButtonUpload,
MobileActionButton,
MultiSelectToolbar,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,

View File

@@ -39,7 +39,6 @@
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -59,13 +58,20 @@
</MobileActionButton>
</template>
</FileBrowser>
<MultiSelectToolbar>
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</MultiSelectToolbar>
</div>
</template>
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -77,8 +83,10 @@
name: 'RecentUploads',
components: {
MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,

View File

@@ -42,7 +42,6 @@
</OptionGroup>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -66,13 +65,20 @@
<h1 class="title">{{ $t('empty_page.title') }}</h1>
</template>
</FileBrowser>
<MultiSelectToolbar>
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</MultiSelectToolbar>
</div>
</template>
<script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -84,8 +90,10 @@
name: 'Trash',
components: {
MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton,
MobileContextMenu,
ToolbarButton,
OptionGroup,
FileBrowser,
ContextMenu,

View File

@@ -58,7 +58,6 @@
</template>
</MobileContextMenu>
<!--Show files & folders-->
<FileBrowser>
<template v-if="$checkPermission('editor')" v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -102,10 +101,25 @@
</ButtonUpload>
</template>
</FileBrowser>
<MultiSelectToolbar>
<template v-slot:visitor>
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
<template v-slot:editor>
<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
</template>
</MultiSelectToolbar>
</div>
</template>
<script>
import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -120,6 +134,8 @@
export default {
name: 'Files',
components: {
MultiSelectToolbar,
ToolbarButton,
MobileActionButtonUpload,
MobileActionButton,
MobileContextMenu,

View File

@@ -25,8 +25,6 @@
<CreateListMobile />
<MultiSelectToolbarMobile />
<!--Navigations-->
<MobileNavigation />
<SidebarNavigation />
@@ -45,7 +43,6 @@
</template>
<script>
import MultiSelectToolbarMobile from '/resources/js/components/FilesView/MultiSelectToolbarMobile'
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import FileFilterMobile from '/resources/js/components/FilesView/FileFilterMobile'
@@ -69,7 +66,6 @@
export default {
name: 'Platform',
components: {
MultiSelectToolbarMobile,
CreateTeamFolderPopup,
CreateFolderPopup,
FileSortingMobile,

View File

@@ -19,7 +19,7 @@
<FileSortingMobile />
<MobileContextMenu />
<MultiSelectToolbarMobile />
<MultiSelectToolbar />
<!--Others-->
<Vignette />
@@ -31,7 +31,7 @@
</template>
<script>
import MultiSelectToolbarMobile from '/resources/js/components/FilesView/MultiSelectToolbarMobile'
import MultiSelectToolbar from '/resources/js/components/FilesView/MultiSelectToolbar'
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
@@ -49,7 +49,7 @@
export default {
name: 'Platform',
components: {
MultiSelectToolbarMobile,
MultiSelectToolbar,
CreateFolderPopup,
FileSortingMobile,
ProcessingPopup,