mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 01:12:14 +00:00
- File Filter implemented
This commit is contained in:
Peter Papp
@@ -1,8 +1,72 @@
|
||||
<template>
|
||||
<div id="mobile-actions-wrapper">
|
||||
|
||||
<!--Actions for trash location--->
|
||||
<div v-if="trashLocationMenu && ! multiSelectMode" class="mobile-actions">
|
||||
<!--Base location-->
|
||||
<div v-if="$isThisLocation(['base']) && $checkPermission(['master', 'editor']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Base location editor-->
|
||||
<div v-if="$isThisLocation('public') && $checkPermission('editor') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Base location visitor-->
|
||||
<div v-if="$isThisLocation('public') && $checkPermission('visitor') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Recent uploads location-->
|
||||
<div v-if="$isThisLocation('latest') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Trash location--->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
|
||||
{{ $t('context_menu.empty_trash') }}
|
||||
</MobileActionButton>
|
||||
@@ -14,52 +78,32 @@
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Actions for Base location-->
|
||||
<transition name="button">
|
||||
<div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Selecting buttons -->
|
||||
<transition name="button">
|
||||
<div v-if="multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="selectAll" icon="check-square">
|
||||
{{ $t('mobile_selecting.select_all') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="deselectAll" icon="x-square">
|
||||
{{ $t('mobile_selecting.deselect_all') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="disableMultiSelectMode" icon="check">
|
||||
{{ $t('mobile_selecting.done') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!--Actions for Base location in shared folder with visit permission-->
|
||||
<div v-if="baseLocationVisitorMenu && ! multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
<!--Shared location--->
|
||||
<div v-if="$isThisLocation(['shared', 'participant_uploads']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!-- Multi select mode -->
|
||||
<div v-if="isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="selectAll" icon="check-square">
|
||||
{{ $t('mobile_selecting.select_all') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="deselectAll" icon="x-square">
|
||||
{{ $t('mobile_selecting.deselect_all') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="disableMultiSelectMode" icon="check">
|
||||
{{ $t('mobile_selecting.done') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--Upload Progressbar-->
|
||||
<UploadProgress />
|
||||
</div>
|
||||
@@ -89,15 +133,6 @@
|
||||
? 'th'
|
||||
: 'th-list'
|
||||
},
|
||||
trashLocationMenu() {
|
||||
return this.$isThisLocation(['trash', 'trash-root']) && this.$checkPermission('master')
|
||||
},
|
||||
baseLocationMasterMenu() {
|
||||
return this.$isThisLocation(['base', 'public']) && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
baseLocationVisitorMenu() {
|
||||
return (this.$isThisLocation(['base', 'shared', 'public']) && this.$checkPermission('visitor')) || (this.$isThisLocation(['latest', 'shared']) && this.$checkPermission('master'))
|
||||
},
|
||||
filterLocationTitle() {
|
||||
return {
|
||||
'base': 'Files',
|
||||
@@ -112,12 +147,12 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
multiSelectMode: false,
|
||||
isSelectMode: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLocations() {
|
||||
|
||||
events.$emit('mobile-menu:show', 'file-filter')
|
||||
},
|
||||
selectAll() {
|
||||
this.$store.commit('SELECT_ALL_FILES')
|
||||
@@ -126,12 +161,12 @@
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
},
|
||||
enableMultiSelectMode() {
|
||||
this.multiSelectMode = true
|
||||
this.isSelectMode = true
|
||||
|
||||
events.$emit('mobileSelecting:start')
|
||||
},
|
||||
disableMultiSelectMode() {
|
||||
this.multiSelectMode = false
|
||||
this.isSelectMode = false
|
||||
|
||||
events.$emit('mobileSelecting:stop')
|
||||
},
|
||||
@@ -143,7 +178,7 @@
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('mobileSelecting:stop', () => this.multiSelectMode = false)
|
||||
events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
64
resources/js/components/FilesView/FileFilterMobile.vue
Normal file
64
resources/js/components/FilesView/FileFilterMobile.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<MenuMobile name="file-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" />
|
||||
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory'
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
flushBrowseHistory() {
|
||||
this.$store.commit('FLUSH_FOLDER_HISTORY')
|
||||
},
|
||||
goToFiles() {
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToLatest() {
|
||||
this.$store.dispatch('getLatest')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToTrash() {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToShared() {
|
||||
this.$store.dispatch('getShared', [{back: false, init: false}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,25 +1,28 @@
|
||||
<template>
|
||||
<li class="menu-option group">
|
||||
<div class="icon group-hover-text-theme">
|
||||
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme"/>
|
||||
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme"/>
|
||||
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme"/>
|
||||
<trash-2-icon v-if="icon === 'trash'" size="17" class="group-hover-text-theme"/>
|
||||
<life-buoy-icon v-if="icon === 'restore'" size="17" class="group-hover-text-theme"/>
|
||||
<trash-icon v-if="icon === 'empty-trash'" size="17" class="group-hover-text-theme"/>
|
||||
<eye-icon v-if="icon ==='detail'" size="17" class="group-hover-text-theme"/>
|
||||
<download-cloud-icon v-if="icon === 'download'" size="17" class="group-hover-text-theme"/>
|
||||
<edit2-icon v-if="icon === 'rename'" size="17" class="group-hover-text-theme"/>
|
||||
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="group-hover-text-theme"/>
|
||||
<link-icon v-if="icon === 'share'" size="17" class="group-hover-text-theme"/>
|
||||
<star-icon v-if="icon === 'favourites'" size="17" class="group-hover-text-theme"/>
|
||||
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme"/>
|
||||
<smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
|
||||
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
|
||||
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="group-hover-text-theme"/>
|
||||
<star-icon v-if="icon === 'star'" size="17" class="group-hover-text-theme"/>
|
||||
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<trash-2-icon v-if="icon === 'trash'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<life-buoy-icon v-if="icon === 'restore'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<trash-icon v-if="icon === 'empty-trash'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<eye-icon v-if="icon ==='detail'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<download-cloud-icon v-if="icon === 'download'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<edit2-icon v-if="icon === 'rename'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<link-icon v-if="icon === 'share'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<star-icon v-if="icon === 'favourites'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<star-icon v-if="icon === 'star'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<users-icon v-if="icon === 'users'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
</div>
|
||||
<div class="text-label group-hover-text-theme">
|
||||
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
|
||||
{{ title }}
|
||||
</div>
|
||||
</li>
|
||||
@@ -28,6 +31,9 @@
|
||||
<script>
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
import {
|
||||
UsersIcon,
|
||||
UploadCloudIcon,
|
||||
HardDriveIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
@@ -47,24 +53,31 @@ import {
|
||||
|
||||
export default {
|
||||
name: 'Option',
|
||||
props:['title' , 'icon'],
|
||||
props:[
|
||||
'isActive',
|
||||
'title',
|
||||
'icon'
|
||||
],
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
UploadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
HardDriveIcon,
|
||||
PaperclipIcon,
|
||||
LifeBuoyIcon,
|
||||
CalendarIcon,
|
||||
AlphabetIcon,
|
||||
Trash2Icon,
|
||||
SmileIcon,
|
||||
UsersIcon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
LinkIcon,
|
||||
StarIcon,
|
||||
EyeIcon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
CalendarIcon,
|
||||
EyeIcon,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user