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
+41 -9
View File
@@ -36,18 +36,18 @@
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac",
"/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749", "/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a547f8b4e9a83935a777", "/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/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~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/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/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/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/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
"/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61", "/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=a5b0819b57321599f235", "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=a5b0819b57321599f235",
"/chunks/invoices.js": "/chunks/invoices.js?id=f0360ddfb0f1e1a9058b", "/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/not-found.js": "/chunks/not-found.js?id=8e5c99340188c2a7b215",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=3d194f15e25dec1c54d3", "/chunks/page-edit.js": "/chunks/page-edit.js?id=3d194f15e25dec1c54d3",
"/chunks/pages.js": "/chunks/pages.js?id=bfd9a2e2c52e60ed025e", "/chunks/pages.js": "/chunks/pages.js?id=bfd9a2e2c52e60ed025e",
@@ -57,14 +57,14 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf", "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
"/chunks/plans.js": "/chunks/plans.js?id=5a3c28288952fcad96e5", "/chunks/plans.js": "/chunks/plans.js?id=5a3c28288952fcad96e5",
"/chunks/platform.js": "/chunks/platform.js?id=0c8536f2a097294531d3", "/chunks/platform.js": "/chunks/platform.js?id=f7160dbc4da21f48e763",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=f34a9d8dfe3fa1dd3075", "/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/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/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.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca", "/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/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.js": "/chunks/settings.js?id=a1e5e739768b788a043a",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0656db2b76eaa0de2c58", "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0656db2b76eaa0de2c58",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=29fbd676788295256ffe", "/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-subscription.js": "/chunks/settings-subscription.js?id=51b246c660e78c9263b5",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=680f99e2021f19ff1af8", "/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/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/authenticate.js": "/chunks/shared/authenticate.js?id=30b0b0d1930a1952648a",
"/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=02bb2b1a5518a1f73b2a", "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=02bb2b1a5518a1f73b2a",
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=b733dc84cd8e05a8f6f3", "/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/stripe-credentials.js": "/chunks/stripe-credentials.js?id=2802cde66f7d12ec8442",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5dbfd83cfacad270a636", "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5dbfd83cfacad270a636",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=721e855dff920e5e6996", "/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.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-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=e365ae16373be9dbd458",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=fc8183dc546683a9b60f", "/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/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/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/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"
} }
@@ -73,9 +73,9 @@ export default {
let VerticalOffsetArea = nodesSameClass.length * 50 let VerticalOffsetArea = nodesSameClass.length * 50
let HorizontalOffsetArea = 190 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 x = event.clientX - offset.left
let y = event.clientY - offset.top let y = event.clientY - offset.top
@@ -1,28 +1,24 @@
<template> <template>
<transition name="context-menu"> <transition name="context-menu">
<div class="multiselect-actions" v-if="mobileMultiSelect"> <div v-if="mobileMultiSelect" class="multiselect-actions">
<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" /> <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 @click.native="closeSelecting" class="action-btn close-icon" source="close" :action="$t('actions.close')" />
<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" />
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton' import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus' import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
export default { export default {
name: 'MultiSelectToolbarMobile', name: 'MultiSelectToolbar',
components: { components: {
ToolbarButton ToolbarButton,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
@@ -35,29 +31,9 @@ export default {
} }
}, },
methods: { methods: {
shareCancel() {
this.$store.dispatch('shareCancel')
this.closeSelecting()
},
closeSelecting() { closeSelecting() {
events.$emit('mobileSelecting:stop') 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() { created() {
events.$on('mobileSelecting:start', () => this.mobileMultiSelect = true) events.$on('mobileSelecting:start', () => this.mobileMultiSelect = true)
+114 -113
View File
@@ -3,38 +3,39 @@
<!--Title--> <!--Title-->
<PopupHeader :title="$t('popup_move_item.title')" icon="move" /> <PopupHeader :title="$t('popup_move_item.title')" icon="move" />
<!--Content--> <!--Content-->
<PopupContent type="height-limited" v-if="pickedItem"> <PopupContent type="height-limited" v-if="pickedItem">
<!--Show Spinner when loading folders--> <!--Show Spinner when loading folders-->
<Spinner v-if="isLoadingTree" /> <Spinner v-if="isLoadingTree" />
<!--Folder tree--> <!--Folder tree-->
<div v-if="! isLoadingTree && navigation"> <div v-if="! isLoadingTree && navigation">
<ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" /> <ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" />
<TitlePreview class="multiple-selected" <TitlePreview class="multiple-selected"
:title="$t('file_detail.selected_multiple')" icon="check-square"
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)" :title="$t('file_detail.selected_multiple')"
v-if="clipboard.length > 1 && !isSelectedItem" /> :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" /> <TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
</div> </div>
</PopupContent> </PopupContent>
<!--Actions--> <!--Actions-->
<PopupActions> <PopupActions>
<ButtonBase <ButtonBase
class="popup-button" class="popup-button"
@click.native="$closePopup()" @click.native="$closePopup()"
button-style="secondary" button-style="secondary"
>{{ $t('popup_move_item.cancel') }} >{{ $t('popup_move_item.cancel') }}
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
class="popup-button" class="popup-button"
@click.native="moveItem" @click.native="moveItem"
:button-style="selectedFolder ? 'theme' : 'secondary'" :button-style="selectedFolder ? 'theme' : 'secondary'"
>{{ $t('popup_move_item.submit') }} >{{ $t('popup_move_item.submit') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
</PopupWrapper> </PopupWrapper>
@@ -42,119 +43,119 @@
<script> <script>
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper' import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions' import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import TitlePreview from '/resources/js/components/FilesView/TitlePreview' import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent' import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader' import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem' import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import Spinner from '/resources/js/components/FilesView/Spinner' import Spinner from '/resources/js/components/FilesView/Spinner'
import TreeMenu from '/resources/js/components/Others/TreeMenu' import TreeMenu from '/resources/js/components/Others/TreeMenu'
import {isArray, isNull} from 'lodash' import {isArray, isNull} from 'lodash'
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus' import {events} from '/resources/js/bus'
export default { export default {
name: 'MoveItemPopup', name: 'MoveItemPopup',
components: { components: {
ThumbnailItem, ThumbnailItem,
TitlePreview, TitlePreview,
PopupWrapper, PopupWrapper,
PopupActions, PopupActions,
PopupContent, PopupContent,
PopupHeader, PopupHeader,
ButtonBase, ButtonBase,
TreeMenu, TreeMenu,
Spinner, Spinner,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'clipboard', 'navigation',
'navigation', 'clipboard',
]), ]),
}, },
data() { data() {
return { return {
selectedFolder: undefined, selectedFolder: undefined,
pickedItem: undefined, pickedItem: undefined,
isLoadingTree: true, isLoadingTree: true,
isSelectedItem: false isSelectedItem: false
} }
}, },
methods: { methods: {
moveItem() { moveItem() {
// Prevent empty submit // Prevent empty submit
if (!this.selectedFolder) return if (!this.selectedFolder) return
// Prevent to move items to the same parent // Prevent to move items to the same parent
if ( isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.id)) return if (isArray(this.selectedFolder) && this.clipboard.find(item => item.parent_id === this.selectedFolder.id)) return
// Move item // Move item
if (!this.isSelectedItem) { if (!this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: null}) this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: null})
} }
if (this.isSelectedItem) { if (this.isSelectedItem) {
this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem}) this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
} }
// Close popup // Close popup
events.$emit('popup:close') events.$emit('popup:close')
// If is mobile, close the selecting mod after done the move action // If is mobile, close the selecting mod after done the move action
if (this.$isMobile()) if (this.$isMobile())
events.$emit('mobileSelecting:stop') events.$emit('mobileSelecting:stop')
}, },
}, },
mounted() { mounted() {
events.$on('pick-folder', folder => { events.$on('pick-folder', folder => {
if (folder.id === this.pickedItem.id) { if (folder.id === this.pickedItem.id) {
this.selectedFolder = undefined this.selectedFolder = undefined
} else if ( ! folder.id && folder.location === 'base') { } else if (!folder.id && folder.location === 'base') {
this.selectedFolder = 'base' this.selectedFolder = 'base'
} else { } else {
this.selectedFolder = folder this.selectedFolder = folder
} }
}) })
// Show Move item popup // Show Move item popup
events.$on('popup:open', args => { events.$on('popup:open', args => {
if (args.name !== 'move') return if (args.name !== 'move') return
// Show tree spinner // Show tree spinner
this.isLoadingTree = true this.isLoadingTree = true
// Get folder tree and hide spinner // Get folder tree and hide spinner
this.$store.dispatch('getFolderTree').then(() => { this.$store.dispatch('getFolderTree').then(() => {
this.isLoadingTree = false this.isLoadingTree = false
}) })
// Store picked item // Store picked item
if (!this.clipboard.includes(args.item[0])) { if (!this.clipboard.includes(args.item[0])) {
this.pickedItem = args.item[0] this.pickedItem = args.item[0]
this.isSelectedItem = true this.isSelectedItem = true
} }
if (this.clipboard.includes(args.item[0])) { if (this.clipboard.includes(args.item[0])) {
this.pickedItem = this.clipboard[0] this.pickedItem = this.clipboard[0]
this.isSelectedItem = false this.isSelectedItem = false
} }
}) })
// Close popup // Close popup
events.$on('popup:close', () => { events.$on('popup:close', () => {
// Clear selected folder // Clear selected folder
setTimeout(() => { setTimeout(() => {
this.selectedFolder = undefined this.selectedFolder = undefined
}, 150) }, 150)
}) })
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -162,11 +163,11 @@
@import '/resources/sass/vuefilemanager/_mixins'; @import '/resources/sass/vuefilemanager/_mixins';
.item-thumbnail { .item-thumbnail {
margin-bottom: 20px; margin-bottom: 20px;
} }
.multiple-selected { .multiple-selected {
padding: 0 20px;; padding: 0 20px;;
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>
+10 -2
View File
@@ -60,7 +60,6 @@
</OptionGroup> </OptionGroup>
</MobileContextMenu> </MobileContextMenu>
<!--Show files & folders-->
<FileBrowser> <FileBrowser>
<template v-slot:file-actions-mobile> <template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search"> <MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -92,14 +91,22 @@
</ButtonUpload> </ButtonUpload>
</template> </template>
</FileBrowser> </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> </div>
</template> </template>
<script> <script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload' 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 MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu" import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload' 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 FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu' import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup' import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -110,10 +117,11 @@
export default { export default {
name: 'Files', name: 'Files',
components: { components: {
MobileContextMenu,
MobileActionButtonUpload, MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton, MobileActionButton,
MobileContextMenu, MobileContextMenu,
ToolbarButton,
ButtonUpload, ButtonUpload,
OptionGroup, OptionGroup,
FileBrowser, FileBrowser,
@@ -48,7 +48,6 @@
</OptionGroup> </OptionGroup>
</MobileContextMenu> </MobileContextMenu>
<!--Show files & folders-->
<FileBrowser> <FileBrowser>
<template v-slot:file-actions-mobile> <template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search"> <MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -69,13 +68,20 @@
<h1 class="title">{{ $t('shared.empty_shared') }}</h1> <h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</template> </template>
</FileBrowser> </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> </div>
</template> </template>
<script> <script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload' import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton' 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 MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser' import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu' import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup' import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -88,7 +94,9 @@
components: { components: {
MobileActionButtonUpload, MobileActionButtonUpload,
MobileActionButton, MobileActionButton,
MultiSelectToolbar,
MobileContextMenu, MobileContextMenu,
ToolbarButton,
OptionGroup, OptionGroup,
FileBrowser, FileBrowser,
ContextMenu, ContextMenu,
@@ -39,7 +39,6 @@
</OptionGroup> </OptionGroup>
</MobileContextMenu> </MobileContextMenu>
<!--Show files & folders-->
<FileBrowser> <FileBrowser>
<template v-slot:file-actions-mobile> <template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search"> <MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -59,13 +58,20 @@
</MobileActionButton> </MobileActionButton>
</template> </template>
</FileBrowser> </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> </div>
</template> </template>
<script> <script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload' import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton' 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 MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser' import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu' import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup' import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -77,8 +83,10 @@
name: 'RecentUploads', name: 'RecentUploads',
components: { components: {
MobileActionButtonUpload, MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton, MobileActionButton,
MobileContextMenu, MobileContextMenu,
ToolbarButton,
OptionGroup, OptionGroup,
FileBrowser, FileBrowser,
ContextMenu, ContextMenu,
+9 -1
View File
@@ -42,7 +42,6 @@
</OptionGroup> </OptionGroup>
</MobileContextMenu> </MobileContextMenu>
<!--Show files & folders-->
<FileBrowser> <FileBrowser>
<template v-slot:file-actions-mobile> <template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search"> <MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -66,13 +65,20 @@
<h1 class="title">{{ $t('empty_page.title') }}</h1> <h1 class="title">{{ $t('empty_page.title') }}</h1>
</template> </template>
</FileBrowser> </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> </div>
</template> </template>
<script> <script>
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload' import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton' 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 MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser' import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu' import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup' import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -84,8 +90,10 @@
name: 'Trash', name: 'Trash',
components: { components: {
MobileActionButtonUpload, MobileActionButtonUpload,
MultiSelectToolbar,
MobileActionButton, MobileActionButton,
MobileContextMenu, MobileContextMenu,
ToolbarButton,
OptionGroup, OptionGroup,
FileBrowser, FileBrowser,
ContextMenu, ContextMenu,
+17 -1
View File
@@ -58,7 +58,6 @@
</template> </template>
</MobileContextMenu> </MobileContextMenu>
<!--Show files & folders-->
<FileBrowser> <FileBrowser>
<template v-if="$checkPermission('editor')" v-slot:file-actions-mobile> <template v-if="$checkPermission('editor')" v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search"> <MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -102,10 +101,25 @@
</ButtonUpload> </ButtonUpload>
</template> </template>
</FileBrowser> </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> </div>
</template> </template>
<script> <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 MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload' import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton' import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -120,6 +134,8 @@
export default { export default {
name: 'Files', name: 'Files',
components: { components: {
MultiSelectToolbar,
ToolbarButton,
MobileActionButtonUpload, MobileActionButtonUpload,
MobileActionButton, MobileActionButton,
MobileContextMenu, MobileContextMenu,
-4
View File
@@ -25,8 +25,6 @@
<CreateListMobile /> <CreateListMobile />
<MultiSelectToolbarMobile />
<!--Navigations--> <!--Navigations-->
<MobileNavigation /> <MobileNavigation />
<SidebarNavigation /> <SidebarNavigation />
@@ -45,7 +43,6 @@
</template> </template>
<script> <script>
import MultiSelectToolbarMobile from '/resources/js/components/FilesView/MultiSelectToolbarMobile'
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile' import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation' import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import FileFilterMobile from '/resources/js/components/FilesView/FileFilterMobile' import FileFilterMobile from '/resources/js/components/FilesView/FileFilterMobile'
@@ -69,7 +66,6 @@
export default { export default {
name: 'Platform', name: 'Platform',
components: { components: {
MultiSelectToolbarMobile,
CreateTeamFolderPopup, CreateTeamFolderPopup,
CreateFolderPopup, CreateFolderPopup,
FileSortingMobile, FileSortingMobile,
+3 -3
View File
@@ -19,7 +19,7 @@
<FileSortingMobile /> <FileSortingMobile />
<MobileContextMenu /> <MobileContextMenu />
<MultiSelectToolbarMobile /> <MultiSelectToolbar />
<!--Others--> <!--Others-->
<Vignette /> <Vignette />
@@ -31,7 +31,7 @@
</template> </template>
<script> <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 FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup' import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup' import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
@@ -49,7 +49,7 @@
export default { export default {
name: 'Platform', name: 'Platform',
components: { components: {
MultiSelectToolbarMobile, MultiSelectToolbar,
CreateFolderPopup, CreateFolderPopup,
FileSortingMobile, FileSortingMobile,
ProcessingPopup, ProcessingPopup,