bulk-operations v0.1 mobileSeleting finished, change FileFullPreview code

This commit is contained in:
Milos Holba
2020-11-16 17:57:43 +01:00
parent 26132e23a3
commit 9d9e07d0fa
19 changed files with 438 additions and 143 deletions

View File

@@ -29,7 +29,7 @@
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=405847df44edd86e301a",
"/chunks/files.js": "/chunks/files.js?id=e0e01c40a7c37f170270",
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/trash~chunks~3ea7670b.js?id=6cafd70cb9e5ae25f02a",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=195540d080e3889ca57f",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=3703e138e9d316a9d850",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=aba8c662fbc234892216",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=ecceaa6cdf5768826b36",
"/chunks/invoices.js": "/chunks/invoices.js?id=248503ac5967fe8370f9",
@@ -74,5 +74,80 @@
"/chunks/user-password.js": "/chunks/user-password.js?id=b036eeaa5ef8e798f6dd",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=a99910f95c3e39caa78b",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e8ea1e67f9ac0a835ed0",
"/chunks/users.js": "/chunks/users.js?id=cdba7af8fb0cd8e64c40"
"/chunks/users.js": "/chunks/users.js?id=cdba7af8fb0cd8e64c40",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c6be29fc8fb5f6066889.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c6be29fc8fb5f6066889.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ddb66a6efe5bcb01ed50.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ddb66a6efe5bcb01ed50.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7aeb3b63de0a18f158dd.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.7aeb3b63de0a18f158dd.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.80b31c9384d68ca81426.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.80b31c9384d68ca81426.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6bdf4bd28e383386a08f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6bdf4bd28e383386a08f.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c687d4d9a48b5bf55b6d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c687d4d9a48b5bf55b6d.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d658f6bebc345fd0748b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.d658f6bebc345fd0748b.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.62332b6c26a3a17243c9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.62332b6c26a3a17243c9.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32224af37576509ffc32.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.32224af37576509ffc32.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3f516bc5454ea15bb769.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3f516bc5454ea15bb769.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c37d7459aa7f09878c0a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.c37d7459aa7f09878c0a.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8c4daf554552aa20f374.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8c4daf554552aa20f374.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a8773e02004276bf57de.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a8773e02004276bf57de.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3dd73d1160e4595d5106.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3dd73d1160e4595d5106.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.68dcd7b1fc9b05db68f6.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.68dcd7b1fc9b05db68f6.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f19c3e219f01eccd8fb3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.f19c3e219f01eccd8fb3.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2eccbc694b11b2efbc63.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.2eccbc694b11b2efbc63.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.38f836026c4fc800e3c4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.38f836026c4fc800e3c4.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9dfaf9f542df321ba991.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9dfaf9f542df321ba991.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.73b7b39eefa288138dfc.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.73b7b39eefa288138dfc.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5751401aba1adb64a925.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.5751401aba1adb64a925.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.06c57069549acfea652d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.06c57069549acfea652d.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.52deb1b66739be132d70.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.52deb1b66739be132d70.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.985a286b1418248fc878.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.985a286b1418248fc878.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.cc7a2c5d70236867a163.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.cc7a2c5d70236867a163.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.0cb903ff08c25eb5d015.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.0cb903ff08c25eb5d015.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.90fb6e64be7464215f6f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.90fb6e64be7464215f6f.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6378f26bda11216c9d7a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.6378f26bda11216c9d7a.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fc9d458b9024171d896f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fc9d458b9024171d896f.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ebafe3c3d8c3ca24226f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.ebafe3c3d8c3ca24226f.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.204578bdb6eba7d9459d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.204578bdb6eba7d9459d.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b374bcefda7eea419a77.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.b374bcefda7eea419a77.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1297c60f82fcee404a0b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.1297c60f82fcee404a0b.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8bb631240ea107faeee1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8bb631240ea107faeee1.hot-update.js",
"/js/main.aa14968f01b581f22523.hot-update.js": "/js/main.aa14968f01b581f22523.hot-update.js",
"/chunks/dashboard.aa14968f01b581f22523.hot-update.js": "/chunks/dashboard.aa14968f01b581f22523.hot-update.js",
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-methods~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-methods~chunks/users.js?id=2bb9ebac09457d3b898e",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.aa14968f01b581f22523.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.aa14968f01b581f22523.hot-update.js",
"/chunks/invoices.aa14968f01b581f22523.hot-update.js": "/chunks/invoices.aa14968f01b581f22523.hot-update.js",
"/chunks/pages.aa14968f01b581f22523.hot-update.js": "/chunks/pages.aa14968f01b581f22523.hot-update.js",
"/chunks/plans.aa14968f01b581f22523.hot-update.js": "/chunks/plans.aa14968f01b581f22523.hot-update.js",
"/chunks/settings-payment-methods.aa14968f01b581f22523.hot-update.js": "/chunks/settings-payment-methods.aa14968f01b581f22523.hot-update.js",
"/chunks/users.aa14968f01b581f22523.hot-update.js": "/chunks/users.aa14968f01b581f22523.hot-update.js",
"/js/main.957105d51b4b371c02f7.hot-update.js": "/js/main.957105d51b4b371c02f7.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.957105d51b4b371c02f7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.957105d51b4b371c02f7.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.29c8874dfb2c94995650.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.29c8874dfb2c94995650.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fe60ff9d657992a1b3fc.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.fe60ff9d657992a1b3fc.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.39547a50bad3eaef19d5.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.39547a50bad3eaef19d5.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.49f90f3476114215e153.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.49f90f3476114215e153.hot-update.js",
"/js/main.b1e1c83f945ac034e4b6.hot-update.js": "/js/main.b1e1c83f945ac034e4b6.hot-update.js",
"/js/main.09d58bdcd52e76eea49a.hot-update.js": "/js/main.09d58bdcd52e76eea49a.hot-update.js",
"/js/main.0f77ad05525e6d1f485b.hot-update.js": "/js/main.0f77ad05525e6d1f485b.hot-update.js",
"/js/main.c7508405578e74d6d5d0.hot-update.js": "/js/main.c7508405578e74d6d5d0.hot-update.js",
"/js/main.03f879f9830de6d3b02d.hot-update.js": "/js/main.03f879f9830de6d3b02d.hot-update.js",
"/js/main.13df6330a44eda756456.hot-update.js": "/js/main.13df6330a44eda756456.hot-update.js",
"/js/main.a74beb7aef66d2190d52.hot-update.js": "/js/main.a74beb7aef66d2190d52.hot-update.js",
"/js/main.5cd5987df958d7bb7eec.hot-update.js": "/js/main.5cd5987df958d7bb7eec.hot-update.js",
"/js/main.3e7f55b2c44e25eb1164.hot-update.js": "/js/main.3e7f55b2c44e25eb1164.hot-update.js",
"/js/main.457b5d135de215ee357d.hot-update.js": "/js/main.457b5d135de215ee357d.hot-update.js",
"/js/main.9cbc62e607b82155c099.hot-update.js": "/js/main.9cbc62e607b82155c099.hot-update.js",
"/js/main.7a48fee0a61738f74542.hot-update.js": "/js/main.7a48fee0a61738f74542.hot-update.js",
"/js/main.c6167479106cf4d6528d.hot-update.js": "/js/main.c6167479106cf4d6528d.hot-update.js",
"/js/main.78b0f051b1396111d2f1.hot-update.js": "/js/main.78b0f051b1396111d2f1.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9a0fe6f8a67a58879bca.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9a0fe6f8a67a58879bca.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9b35209ca84faca947c0.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.9b35209ca84faca947c0.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a674fdf77aea80c0529b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.a674fdf77aea80c0529b.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.97d913769431b05cc7c2.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.97d913769431b05cc7c2.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8cf94a788280336dda73.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.8cf94a788280336dda73.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3af71b38ca39f36d99e4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.3af71b38ca39f36d99e4.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.401b03e61a5ab310bb94.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.401b03e61a5ab310bb94.hot-update.js",
"/js/main.6f45362ec6c423157bfe.hot-update.js": "/js/main.6f45362ec6c423157bfe.hot-update.js",
"/js/main.3644cc8d59343b060b54.hot-update.js": "/js/main.3644cc8d59343b060b54.hot-update.js",
"/js/main.946a09d801c105987d08.hot-update.js": "/js/main.946a09d801c105987d08.hot-update.js",
"/js/main.2558534849562d05fae1.hot-update.js": "/js/main.2558534849562d05fae1.hot-update.js",
"/js/main.9d6ddebbc75464578783.hot-update.js": "/js/main.9d6ddebbc75464578783.hot-update.js"
}

View File

@@ -149,7 +149,11 @@ export default {
return this.FilePreviewType === "list" ? "th" : "th-list";
},
canCreateFolderInView() {
return !this.$isThisLocation(["base", "public"]);
let location = !this.$isThisLocation(["base", "public"]);
if(location || this.fileInfoDetail.length >1) {
return true
}
},
canDeleteInView() {
return !this.$isThisLocation([
@@ -163,7 +167,10 @@ export default {
]);
},
canUploadInView() {
return !this.$isThisLocation(["base", "public"]);
let location = !this.$isThisLocation(["base", "public"]);
if(location || this.fileInfoDetail.length >1) {
return true
}
},
canMoveInView() {
return !this.$isThisLocation([

View File

@@ -8,7 +8,7 @@
<div
class="files-container"
ref="fileContainer"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() , 'mobile-multi-select' : mobileMultiSelect}"
@click.self="filesContainerClick"
>
<!--MobileToolbar-->
@@ -135,6 +135,7 @@
return {
draggingId: undefined,
isDragging: false,
mobileMultiSelect: false
}
},
methods: {
@@ -191,6 +192,14 @@
}
},
created() {
events.$on('mobileSelecting-start' , () => {
this.mobileMultiSelect =true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileMultiSelect = false
})
events.$on('fileItem:deselect', () =>
this.$store.commit('CLEAR_FILEINFO_DETAIL')
)
@@ -216,6 +225,10 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.mobile-multi-select {
bottom: 50px !important;
}
.button-upload {
display: block;
text-align: center;

View File

@@ -16,11 +16,18 @@
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
:class="{ 'is-clicked': this.isClicked, 'is-dragenter': area }"
>
:class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked, 'is-dragenter': area }"
>
<!--Thumbnail for item-->
<div class="icon-item">
<div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="mobileMultiSelect">
<div class="select-box" :class="{'select-box-active' : isClicked } ">
<!-- <p>|</p> -->
<CheckIcon v-if="isClicked" class="icon" size="17"/>
</div>
</div>
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">
{{ data.mimetype }}
@@ -71,7 +78,7 @@
</div>
<span @click.stop="showItemActions" class="show-actions"
v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder ) && canShowMobileOptions">
v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || mobileMultiSelect ) && canShowMobileOptions">
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
</span>
</div>
@@ -79,7 +86,7 @@
</template>
<script>
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import {debounce} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
@@ -89,6 +96,7 @@
props: ['data'],
components: {
UserPlusIcon,
CheckIcon,
LinkIcon,
},
computed: {
@@ -97,12 +105,12 @@
]),
...mapGetters({allData: 'data'}),
isClicked() {
if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
return true
}else {
return false
}
},
if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
return true
}else {
return false
}
},
isFolder() {
return this.data.type === 'folder'
},
@@ -147,12 +155,14 @@
data() {
return {
area: false,
itemName: undefined
itemName: undefined,
mobileMultiSelect:false
}
},
methods: {
showItemActions() {
// Load file info detail
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('mobileMenu:show')
@@ -168,61 +178,68 @@
clickedItem(e) {
events.$emit('contextMenu:hide')
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
}else {
console.log(this.data.name)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
console.log(this.allData[i].name)
}
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
console.log(this.allData[i].name)
}
}
this.fileInfoDetail.forEach(element => console.log(element.id ,element.name))
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
if(!this.$isMobile()) {
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
}else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) {
events.$emit('fileFullPreview:show')
if(!this.mobileMultiSelect && this.$isMobile()){
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('fileFullPreview:show')
}
}
}
if(this.mobileMultiSelect && this.$isMobile()) {
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
}else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}
// Get target classname
let itemClass = e.target.className
@@ -263,6 +280,16 @@
created() {
this.itemName = this.data.name
events.$on('mobileSelecting-start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('mobileSelecting-stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('fileItem:deselect', () => {
// Deselect file
this.$store.commit('CLEAR_FILEINFO_DETAIL')
@@ -280,6 +307,40 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.check-select {
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: -10px;
z-index: 5;
left: 0px;
}
.check-select-folder {
margin-right: 10px;
margin-left: 3px;
position: absolute;
top: 8px;
z-index: 5;
left: 10px;
}
.select-box {
width: 20px;
height: 20px;
background-color:$light_background;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
box-shadow: 0 3px 15px 2px hsla(220, 36%, 16%, 0.05);
}
.select-box-active {
background-color: $text !important;
.icon {
stroke: white;
}
}
.show-actions {
cursor: pointer;
padding: 4px 26px;
@@ -381,14 +442,22 @@
border-radius: 8px;
}
&.no-clicked {
background: white !important;
.item-name {
.name {
color: $text !important;
}
}
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background;
.item-name .name {
color: $theme;
}
color: $theme;
}
}
}
@@ -510,6 +579,17 @@
}
@media (prefers-color-scheme: dark) {
.select-box {
background-color: $dark_mode_foreground;
}
.select-box-active {
background-color: $dark_mode_text_primary !important;
.icon {
stroke: $text;
}
}
.file-wrapper {
.icon-item {
@@ -533,6 +613,22 @@
}
.file-item {
&.no-clicked {
background: $dark_mode_background !important;
.file-icon {
path {
fill: $dark_mode_foreground !important;
stroke: #2F3C54 !important;
}
}
.item-name {
.name {
color: $dark_mode_text_primary !important;
}
}
}
&:hover,
&.is-clicked {

View File

@@ -95,7 +95,6 @@ export default {
...mapGetters({allData: 'data'}),
isClicked() {
if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
console.log('som tu')
return true
}else {
return false
@@ -221,6 +220,7 @@ export default {
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('fileFullPreview:show')
}
}
@@ -229,7 +229,6 @@ export default {
if(this.mobileMultiSelect && this.$isMobile()) {
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
console.log(this.data)
}else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
@@ -270,7 +269,12 @@ export default {
this.itemName = this.data.name
events.$on('mobileSelecting-start', () => {
this.mobileMultiSelect = !this.mobileMultiSelect
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('mobileSelecting-stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
@@ -486,13 +490,17 @@ export default {
&.no-clicked {
background: white !important;
.item-name {
.name {
color: $text !important;
}
}
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background ;
.item-name .name {
color: $theme;
}
@@ -534,6 +542,19 @@ export default {
.file-item {
&.no-clicked {
background: $dark_mode_background !important;
.file-icon {
path {
fill: $dark_mode_foreground !important;
stroke: #2F3C54 !important;
}
}
.item-name {
.name {
color: $dark_mode_text_primary !important;
}
}
}
&:hover,
&.is-clicked {

View File

@@ -26,7 +26,7 @@ export default {
filteredFiles() {
let filteredData = []
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
if (element.type == this.fileInfoDetail[0].type) {
filteredData.push(element)
}
})

View File

@@ -1,5 +1,5 @@
<template>
<div class="navigation-panel" v-if="fileInfoDetail">
<div class="navigation-panel" v-if="fileInfoDetail[0]">
<div class="name-wrapper">
<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
<div class="name-count-wrapper">
@@ -12,13 +12,13 @@
</div>
<div class="created-at-wrapper">
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
<p>{{ fileInfoDetail[0].filesize }}, {{ fileInfoDetail[0].created_at }}</p>
</div>
<div class="navigation-icons">
<div class="navigation-tool-wrapper">
<ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
<ToolbarButton source="share" class="mobile-hide" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem" />
<ToolbarButton v-if="this.fileInfoDetail.type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
<ToolbarButton v-if="this.fileInfoDetail[0].type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
</div>
</div>
</div>
@@ -39,7 +39,7 @@ export default {
filteredFiles() {
let files = []
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
if (element.type == this.fileInfoDetail[0].type) {
files.push(element)
}
})
@@ -48,7 +48,7 @@ export default {
showingImageIndex() {
let activeIndex = ''
this.filteredFiles.filter((element, index) => {
if (element.unique_id == this.fileInfoDetail.unique_id) {
if (element.unique_id == this.fileInfoDetail[0].unique_id) {
activeIndex = index + 1
}
})
@@ -57,7 +57,7 @@ export default {
formatedName() {
//Name length handling
let name = this.fileInfoDetail.name
let name = this.fileInfoDetail[0].name
let windowWidth = window.innerWidth
let nameLength
if (windowWidth < 410) {
@@ -94,18 +94,18 @@ export default {
},
downloadItem() {
// Download file
this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
this.$downloadFile(this.fileInfoDetail[0].file_url, this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype)
},
shareItem() {
if (this.fileInfoDetail.shared) {
if (this.fileInfoDetail[0].shared) {
events.$emit('popup:open', {
name: 'share-edit',
item: this.fileInfoDetail
item: this.fileInfoDetail[0]
})
} else {
events.$emit('popup:open', {
name: 'share-create',
item: this.fileInfoDetail
item: this.fileInfoDetail[0]
})
}
},
@@ -113,7 +113,7 @@ export default {
if (this.$isMobile()) {
events.$emit('mobileMenu:show', 'showFromMediaPreview')
} else {
events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
events.$emit('showContextMenuPreview:show', this.fileInfoDetail[0])
}
},
closeFullPreview() {

View File

@@ -1,14 +1,13 @@
<template>
<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail">
<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail[0]">
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
<div class="file-wrapper">
<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
<img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail[0].type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
<img v-if="fileInfoDetail[0].type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
<div class="video-wrapper" v-if="fileInfoDetail[0].type === 'video' && currentFile.file_url">
<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
</div>
</div>
<!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
</div>
</div>
</template>
@@ -33,7 +32,7 @@ export default {
return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
},
isMedia() {
return this.fileInfoDetail === 'image' || 'video' || 'audio'
return this.fileInfoDetail[0] === 'image' || 'video' || 'audio'
},
canShareInView() {
@@ -57,7 +56,8 @@ export default {
},
currentFile() {
//Handle actual view image in fileInfoDetail
if (this.fileInfoDetail) {
if (this.fileInfoDetail[0]) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
events.$emit('actualShowingImage:ContextMenu', this.currentFile)
// this.loaded = false
@@ -65,7 +65,7 @@ export default {
},
fileInfoDetail() {
//File delete handling - show next image after delete one
if (!this.fileInfoDetail) {
if (!this.fileInfoDetail[0]) {
this.currentIndex = this.currentIndex - 1
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
this.sliderFile = []
@@ -83,18 +83,15 @@ export default {
methods: {
filteredFiles() {
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
if (element.type == this.fileInfoDetail[0].type) {
this.sliderFile.push(element)
}
})
this.choseActiveFile()
},
// onLoaded(event) {
// this.loaded = true
// },
choseActiveFile() {
this.sliderFile.forEach((element, index) => {
if (element.unique_id == this.fileInfoDetail.unique_id) {
if (element.unique_id == this.fileInfoDetail[0].unique_id) {
this.currentIndex = index
}
})

View File

@@ -6,6 +6,9 @@
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
Select
</MobileMultiSelectButton>
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
@@ -13,13 +16,13 @@
<!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
<MobileActionButton @click.native="createFolder" icon="folder-plus">
<MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : mobileMultiSelect}">
{{ $t('context_menu.add_folder') }}
</MobileActionButton>
<MobileActionButtonUpload>
<MobileActionButtonUpload :class="{'is-inactive' : mobileMultiSelect}">
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileMultiSelectButton @click.native="mobileSelecting">
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
Select
</MobileMultiSelectButton>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
@@ -65,12 +68,29 @@
return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
}
},
data () {
return {
mobileMultiSelect: false,
turnOff:false
}
},
watch: {
mobileMultiSelect () {
if(this.mobileMultiSelect ) {
events.$emit('mobileSelecting-start')
// this.mobileMultiSelect = true
}
if(!this.mobileMultiSelect) {
events.$emit('mobileSelecting-stop')
// this.mobileSelecting = false
}
}
},
methods: {
mobileSelecting() {
events.$emit('mobileSelecting-start')
},
switchPreview() {
this.$store.dispatch('changePreviewType')
events.$emit('mobileSelecting-stop')
},
createFolder() {
if (this.$isMobile()) {
@@ -84,6 +104,12 @@
this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
}
},
},
mounted () {
events.$on('mobileSelecting-stop', () => {
this.mobileMultiSelect = false
})
}
}
</script>
@@ -100,6 +126,13 @@
z-index: 3;
}
.mobile-action-button {
&.is-inactive {
opacity: 0.25;
pointer-events: none;
}
}
.mobile-actions {
padding-top: 10px;
padding-bottom: 10px;

View File

@@ -1,5 +1,5 @@
<template>
<div class="options-wrapper">
<div class="options-wrapper" :class="{'mobile-selected-menu-wrapper' : mobileMultiSelect}">
<transition name="context-menu">
<div
v-if="isVisible"
@@ -11,19 +11,26 @@
<div class="menu-wrapper">
<div class="mobile-selected-menu" v-if="mobileMultiSelect">
<ToolbarButton
source="move"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
v-if="
!$isThisLocation(['trash', 'trash-root']) &&
$checkPermission('master')
"
source="move"
:action="$t('actions.move')"
class="move-icon"
@click.native="moveItem"/>
<ToolbarButton
source="trash"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
source="trash"
:action="$t('actions.delete')"
@click.native="deleteItem"/>
<ToolbarButton
source="close"
:action="$t('actions.close')"
class="close-icon"
@click.native="closeSelecting"/>
</div>
<!--Item Thumbnail-->
@@ -374,13 +381,18 @@ export default {
};
},
methods: {
closeSelecting() {
events.$emit('mobileSelecting-stop')
},
moveItem() {
// Open move item popup
// Open move item popup
if(!this.mobileMultiSelect) {
events.$emit("popup:open", { name: "move", item: [this.fileInfoDetail[0]] });
let item = this.fileInfoDetail[0]
this.$store.commit('CLEAR_FILEINFO_DETAIL')
events.$emit('popup:open', { name: 'move', item: [item] })
}
if(this.mobileMultiSelect) {
events.$emit("popup:open", { name: "move", item: null });
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
}
},
shareItem() {
@@ -417,7 +429,14 @@ export default {
);
},
deleteItem() {
this.$store.dispatch("deleteItem", this.fileInfoDetail[0]);
if(!this.mobileMultiSelect) {
let item = this.fileInfoDetail[0]
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.dispatch("deleteItem", item);
}
if(this.mobileMultiSelect) {
this.$store.dispatch("deleteItem");
}
},
renameItem() {
let itemName = prompt(
@@ -446,18 +465,22 @@ export default {
this.isVisible = false;
this.showFromMediaPreview = false;
} else {
this.isVisible = false;
events.$emit("fileItem:deselect");
if(!this.mobileMultiSelect) {
this.isVisible = false;
events.$emit("fileItem:deselect");
}
}
// Close context menu
// this.isVisible = false;
},
},
created() {
events.$on('mobileSelecting-start' , () => {
this.mobileMultiSelect = !this.mobileMultiSelect
this.isVisible = !this.isVisible
this.mobileMultiSelect = true
this.isVisible = true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileMultiSelect = false
this.isVisible = false
})
// Show context menu
events.$on("mobileMenu:show", (showFromMedia) => {
@@ -482,6 +505,19 @@ export default {
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.mobile-selected-menu-wrapper {
z-index: 1;
}
.mobile-selected-menu {
display: flex;
margin-left: 15px;
margin-right: 15px;
.close-icon {
margin-left: auto !important;
}
}
.menu-option {
display: flex;
align-items: center;

View File

@@ -28,7 +28,11 @@
},
mounted() {
events.$on('mobileSelecting-start' , () => {
this.mobileSelectingActive = !this.mobileSelectingActive
this.mobileSelectingActive = true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileSelectingActive = false
})
}
}
@@ -70,7 +74,7 @@
.active {
// @include transform(scale(0.95));
background: rgba($theme, 0.1);
// background: rgba($theme, 0.1);
.icon {
path, line, polyline, rect, circle {

View File

@@ -52,6 +52,7 @@
methods: {
showMobileNavigation() {
events.$emit('show:mobile-navigation')
events.$emit('mobileSelecting-stop')
},
goBack() {

View File

@@ -19,6 +19,7 @@
<info-icon v-if="source === 'info'" size="19"></info-icon>
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
<link-icon v-if="source === 'share'" size="19"></link-icon>
<x-icon v-if="source === 'close'" size="19"></x-icon>
</button>
</template>
@@ -33,6 +34,7 @@ import {
CornerDownRightIcon,
LinkIcon,
DownloadCloudIcon,
XIcon,
PrinterIcon,
} from "vue-feather-icons";
@@ -47,6 +49,7 @@ export default {
Trash2Icon,
Edit2Icon,
ListIcon,
XIcon,
GridIcon,
InfoIcon,
LinkIcon,

View File

@@ -15,7 +15,7 @@
<MultiSelected class="multiple-selected" moveItem="true" v-if="fileInfoDetail.length > 1 && !noSelectedItem"/>
<TreeMenu :disabled-by-id="pickedItem.unique_id" :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
<TreeMenu :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
</div>
</PopupContent>
@@ -108,7 +108,6 @@
events.$on('popup:open', args => {
if (args.name !== 'move') return
// console.log(args.item[0])
// Show tree spinner
this.isLoadingTree = true
@@ -126,9 +125,6 @@
this.pickedItem = this.fileInfoDetail[0]
this.noSelectedItem = false
}
// this.pickedItem = args.item[0]
// this.totalItems = args.item
})
// Close popup

View File

@@ -1,6 +1,6 @@
<template>
<!--Folder Icon-->
<div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById === nodes.unique_id}">
<div class="folder-item-wrapper" :class="{'is-inactive': !disableId} ">
<div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
@@ -9,7 +9,7 @@
<span class="label">{{ nodes.name }}</span>
</div>
<TreeMenu :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.unique_id" />
<TreeMenu :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.unique_id" />
</div>
</template>
@@ -17,11 +17,12 @@
import TreeMenu from '@/components/Others/TreeMenu'
import {FolderIcon, ChevronRightIcon, HardDriveIcon} from 'vue-feather-icons'
import {events} from "@/bus"
import {mapGetters} from 'vuex'
export default {
name: 'TreeMenu',
props: [
'nodes', 'depth', 'disabledById'
'nodes', 'depth',
],
components: {
ChevronRightIcon,
@@ -30,9 +31,20 @@
TreeMenu,
},
computed: {
...mapGetters(['fileInfoDetail']),
indent() {
return { paddingLeft: this.depth * 20 + 'px' }
console.log(this.nodes )
},
disableId() {
let canBeShow = true
this.fileInfoDetail.map(item => {
if(item.unique_id === this.nodes.unique_id) {
canBeShow = false
}
})
return canBeShow
}
},
data() {
return {

View File

@@ -5,7 +5,8 @@
"move": "Move item",
"preview": "更改预览",
"share": "Share item",
"upload": "上传文件"
"upload": "上传文件",
"close": "Close"
},
"activation": {
"stripe": {

View File

@@ -7,7 +7,8 @@
"share": "Share item",
"upload": "Upload file",
"download": "Download item",
"print": "Print item"
"print": "Print item",
"close": "Close"
},
"activation": {
"stripe": {

View File

@@ -7,7 +7,8 @@
"share": "Zdieľať položku",
"upload": "Nahrať súbory",
"download": "Stiahnuť položku",
"print": "Vytlačiť položku"
"print": "Vytlačiť položku",
"close": "Zatvoriť"
},
"activation": {
"stripe": {

View File

@@ -25,8 +25,6 @@ const actions = {
})
})
console.log(items)
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/move/public' + router.currentRoute.params.token