nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 01:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/FilesView/DesktopToolbar.vue
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([

15
resources/js/components/FilesView/FileBrowser.vue
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;

224
resources/js/components/FilesView/FileItemGrid.vue
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 {

29
resources/js/components/FilesView/FileItemList.vue
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 {

2
resources/js/components/FilesView/FilePreviewActions.vue
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)
}
})

22
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
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() {

23
resources/js/components/FilesView/MediaFullPreview.vue
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
}
})

45
resources/js/components/FilesView/MobileActions.vue
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;

84
resources/js/components/FilesView/MobileMenu.vue
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;

8
resources/js/components/FilesView/MobileMultiSelectButton.vue
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 {

1
resources/js/components/FilesView/MobileToolbar.vue
View File

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

3
resources/js/components/FilesView/ToolbarButton.vue
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,