nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-operations make new MobileMultiSelectMenu component, add multi dwonload

Browse Source
This commit is contained in:
Milos Holba
2020-11-22 16:21:51 +01:00
parent a3dd817e7a
commit 0df03f1d32
14 changed files with 345 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+27 -15
View File
@@ -74,8 +74,8 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="multiSelectContextMenu">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
@@ -132,8 +132,8 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail" v-if="item">
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item && multiSelectContextMenu">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
@@ -141,7 +141,7 @@
{{ $t('context_menu.detail') }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<li class="menu-option" @click="downloadItem" v-if="!isFolder ">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
@@ -209,8 +209,8 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<ul class="menu-option-group" v-if="item ">
<li class="menu-option" @click="ItemDetail" v-if="multiSelectContextMenu">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
@@ -259,8 +259,8 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item && multiSelectContextMenu ">
<li class="menu-option" @click="ItemDetail">
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="multiSelectContextMenu">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
@@ -283,8 +283,8 @@
<div v-if="
$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview
" id="menu-list" class="menu-options">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="multiSelectContextMenu">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
@@ -432,10 +432,22 @@ export default {
},
downloadItem() {
// Download file
this.$downloadFile(
this.item.file_url,
this.item.name + '.' + this.item.mimetype
)
//Download no selected item
if(!this.fileInfoDetail.includes(this.item)) {
this.$downloadFile(
this.item.file_url,
this.item.name + '.' + this.item.mimetype
)
}
//Download all selected items
if(this.fileInfoDetail.includes(this.item)) {
this.fileInfoDetail.forEach(item => {
this.$downloadFile(
item.file_url,
item.name + '.' + item.mimetype
)
})
}
},
ItemDetail() {
// Dispatch load file info detail
resources/js/components/FilesView/FileItemList.vue
-1
View File
@@ -177,7 +177,6 @@ export default {
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){
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+6 -23
View File
@@ -3,7 +3,7 @@
<div class="name-wrapper">
<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
<div class="name-count-wrapper">
<p class="title">{{ formatedName }}</p>
<p class="title">{{ fileInfoDetail[0].name }}</p>
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
</div>
<span id="fast-preview-menu" class="fast-menu-icon" @click="menuOpen" v-if="$checkPermission(['master', 'editor'])">
@@ -54,27 +54,6 @@ export default {
})
return activeIndex
},
formatedName() {
//Name length handling
let name = this.fileInfoDetail[0].name
let windowWidth = window.innerWidth
let nameLength
if (windowWidth < 410) {
nameLength = 18
} else {
nameLength = 27
}
if (name.lastIndexOf('.') > -1) {
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
length: nameLength
})
} else {
return _.truncate(name, {
length: nameLength
})
}
},
canShareInView() {
return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
}
@@ -155,6 +134,7 @@ export default {
}
.title {
@include font-size(15);
max-width: 250px;
line-height: 1;
font-weight: 700;
overflow: hidden;
@@ -164,7 +144,10 @@ export default {
color: $text;
}
@media (max-width: 570px) {
.title,
.title{
max-width: 180px;
@include font-size(17);
}
.file-count {
@include font-size(17);
}
resources/js/components/FilesView/MobileActions.vue
+3
View File
@@ -35,6 +35,9 @@
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
{{ $t('context_menu.select') }}
</MobileMultiSelectButton>
</div>
<!--Upload Progressbar-->
resources/js/components/FilesView/MobileMenu.vue
+10 -80
View File
@@ -1,5 +1,5 @@
<template>
<div class="options-wrapper" :class="{'mobile-selected-menu-wrapper' : mobileMultiSelect}">
<div class="options-wrapper">
<transition name="context-menu">
<div
v-if="isVisible"
@@ -10,32 +10,8 @@
<div class="menu-wrapper">
<div class="mobile-selected-menu" v-if="mobileMultiSelect">
<ToolbarButton
v-if="
!$isThisLocation(['trash', 'trash-root']) &&
$checkPermission('master') || $checkPermission('editor')
"
source="move"
:action="$t('actions.move')"
class="move-icon"
@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-->
<ThumbnailItem
v-if="!mobileMultiSelect"
class="item-thumbnail"
:item="fileInfoDetail[0]"
info="metadata"
@@ -45,7 +21,7 @@
<div
v-if="
$isThisLocation(['trash', 'trash-root']) &&
$checkPermission('master') && !mobileMultiSelect
$checkPermission('master')
"
class="menu-options"
>
@@ -90,7 +66,7 @@
<!--Mobile for Base location-->
<div
v-if="$isThisLocation(['shared']) && $checkPermission('master') && !mobileMultiSelect"
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
class="menu-options"
>
<ul class="menu-option-group">
@@ -163,7 +139,7 @@
<div
v-if="
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
$checkPermission('master') && !mobileMultiSelect
$checkPermission('master')
"
class="menu-options"
>
@@ -240,7 +216,7 @@
<!--Mobile for Base location with EDITOR permission-->
<div
v-if="
$isThisLocation(['base', 'public']) && $checkPermission('editor') && !mobileMultiSelect
$isThisLocation(['base', 'public']) && $checkPermission('editor')
"
class="menu-options"
>
@@ -286,7 +262,7 @@
<!--Mobile for Base location with VISITOR permission-->
<div
v-if="
$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !mobileMultiSelect
$isThisLocation(['base', 'public']) && $checkPermission('visitor')
"
class="menu-options"
>
@@ -306,7 +282,7 @@
</transition>
<transition name="fade">
<div
v-show="isVisible && !mobileMultiSelect"
v-show="isVisible"
class="vignette"
@click="closeAndResetContextMenu"
></div>
@@ -316,7 +292,7 @@
<script>
import ThumbnailItem from "@/components/Others/ThumbnailItem";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import {
CornerDownRightIcon,
DownloadCloudIcon,
@@ -338,7 +314,6 @@ export default {
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
ToolbarButton,
ThumbnailItem,
LifeBuoyIcon,
Trash2Icon,
@@ -377,26 +352,11 @@ export default {
return {
isVisible: false,
showFromMediaPreview: false,
mobileMultiSelect:false
};
},
methods: {
closeSelecting() {
events.$emit('mobileSelecting-stop')
},
moveItem() {
// Open move item popup
//Move item if is not selected
if(!this.mobileMultiSelect) {
let item = this.fileInfoDetail[0]
this.$store.commit('CLEAR_FILEINFO_DETAIL')
events.$emit('popup:open', { name: 'move', item: [item] })
}
//Move all selected items
if(this.mobileMultiSelect) {
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
}
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
},
shareItem() {
if (this.fileInfoDetail[0].shared) {
@@ -432,14 +392,7 @@ export default {
);
},
deleteItem() {
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");
}
this.$store.dispatch("deleteItem");
},
renameItem() {
let itemName = prompt(
@@ -464,27 +417,11 @@ export default {
},
closeAndResetContextMenu() {
//If emit to show menu coming from MediaFullPreview dont reset data
if (this.showFromMediaPreview) {
this.isVisible = false;
this.showFromMediaPreview = false;
} else {
if(!this.mobileMultiSelect) {
this.isVisible = false;
events.$emit("fileItem:deselect");
}
}
},
},
created() {
events.$on('mobileSelecting-start' , () => {
this.mobileMultiSelect = true
this.isVisible = true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileMultiSelect = false
this.isVisible = false
})
// Show context menu
events.$on("mobileMenu:show", (showFromMedia) => {
//If emit come from MediaFullPreview
@@ -508,13 +445,6 @@ export default {
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.mobile-selected-menu-wrapper {
z-index: 1;
.options {
z-index: 1;
}
}
.mobile-selected-menu {
display: flex;
margin-left: 15px;
resources/js/components/FilesView/MobileMultiSelectButton.vue
+6 -11
View File
@@ -1,6 +1,6 @@
<template>
<button class="mobile-action-button">
<div class="flex" :class="{'active' : mobileSelectingActive}">
<button class="mobile-action-button" :class="{'active' : mobileSelectingActive}">
<div class="flex" >
<CheckSquareIcon size="15" class="icon"></CheckSquareIcon>
<span class="label">
<slot></slot>
@@ -71,22 +71,17 @@
font-weight: 700;
color: $text;
}
.active {
// @include transform(scale(0.95));
// background: rgba($theme, 0.1);
}
.active {
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
stroke: $theme !important;
}
}
.label {
color: $theme;
color: $theme !important;
}
}
}
@media (prefers-color-scheme: dark) {
resources/js/components/FilesView/MobileMultiSelectMenu.vue
+179
View File
@@ -0,0 +1,179 @@
<template>
<div class='mobile-selected-menu-wrapper' >
<transition name="context-menu">
<div
v-if="mobileMultiSelect"
ref="contextmenu"
class="options"
>
<div class="menu-wrapper">
<div class="mobile-selected-menu">
<ToolbarButton
v-if="
!$isThisLocation(['trash', 'trash-root']) &&
$checkPermission('master') || $checkPermission('editor')
"
source="move"
:action="$t('actions.move')"
:class="{'is-inactive' : fileInfoDetail.length < 1}"
@click.native="moveItem"/>
<ToolbarButton
v-if="$checkPermission('master') || $checkPermission('editor')"
source="trash"
:class="{'is-inactive' : fileInfoDetail.length < 1}"
:action="$t('actions.delete')"
@click.native="deleteItem"/>
<ToolbarButton
source="download"
:class="{'is-inactive' : fileInfoDetail.length < 1}"
:action="$t('actions.delete')"
@click.native="downloadItem"/>
<ToolbarButton
source="close"
:action="$t('actions.close')"
class="close-icon"
@click.native="closeSelecting"/>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import { events } from "@/bus";
import { mapGetters } from "vuex";
export default {
name:"MobileMultiSelectMenu",
components: {ToolbarButton},
computed: {
...mapGetters(['fileInfoDetail'])
},
data () {
return {
mobileMultiSelect:false
}
},
methods: {
closeSelecting() {
events.$emit('mobileSelecting-stop')
},
downloadItem() {
this.fileInfoDetail.forEach(item => {
this.$downloadFile(
item.file_url,
item.name + '.' + item.mimetype
)
})
},
moveItem() {
// Open move item popup
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
},
deleteItem() {
this.$store.dispatch("deleteItem");
},
},
created () {
events.$on('mobileSelecting-start' , () => {
this.mobileMultiSelect = true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileMultiSelect = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.mobile-selected-menu-wrapper {
z-index: 1;
.options {
z-index: 1;
}
}
.is-inactive {
opacity: 0.25 !important;
pointer-events: none !important;
}
.mobile-selected-menu {
display: flex;
margin-left: 15px;
margin-right: 15px;
.close-icon {
margin-left: auto !important;
}
}
.menu-option {
display: flex;
align-items: center;
}
.options {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
overflow: hidden;
background: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
&.is-active {
opacity: 1 !important;
pointer-events: initial !important;
}
}
@media (prefers-color-scheme: dark) {
.options {
background: $dark_mode_background;
}
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 200ms;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 200ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-leave-active {
position: absolute;
}
</style>