mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
- MobileActions.vue refactoring
- added select all / deselect all buttons to mobile multi select mode
This commit is contained in:
Peter Papp
@@ -2,40 +2,53 @@
|
||||
<div id="mobile-actions-wrapper">
|
||||
|
||||
<!--Actions for trash location with MASTER permission--->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
|
||||
<div v-if="trashLocationMenu" class="mobile-actions">
|
||||
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
|
||||
{{ $t('context_menu.empty_trash') }}
|
||||
</MobileActionButton>
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--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" :class="{'is-inactive' : mobileMultiSelect}">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload :class="{'is-inactive' : mobileMultiSelect}">
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
<div v-if="baseLocationMasterMenu" class="mobile-actions">
|
||||
<div v-if="! multiSelectMode">
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
<div v-if="multiSelectMode">
|
||||
<MobileActionButton @click.native="selectAll" icon="check-square">
|
||||
Select All
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="deselectAll" icon="x-square">
|
||||
Deselect All
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="disableMultiSelectMode" icon="check">
|
||||
Done
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div v-if="($isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" class="mobile-actions">
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
<div v-if="baseLocationVisitorMenu" class="mobile-actions">
|
||||
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
@@ -51,7 +64,6 @@
|
||||
import MobileActionButton from '@/components/FilesView/MobileActionButton'
|
||||
import UploadProgress from '@/components/FilesView/UploadProgress'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
@@ -67,51 +79,54 @@
|
||||
previewIcon() {
|
||||
return this.FilePreviewType === 'list' ? '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'))
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mobileMultiSelect: false,
|
||||
multiSelectMode: false,
|
||||
mobileSortingAndPreview: false,
|
||||
turnOff:false,
|
||||
mobileSortingAndPreview: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mobileMultiSelect () {
|
||||
|
||||
if(this.mobileMultiSelect ) {
|
||||
events.$emit('mobileSelecting:start')
|
||||
}
|
||||
if(!this.mobileMultiSelect) {
|
||||
events.$emit('mobileSelecting:stop')
|
||||
}
|
||||
},
|
||||
mobileSortingAndPreview () {
|
||||
// TODO: co to
|
||||
if(this.mobileSortingAndPreview) {
|
||||
events.$emit('mobileSortingAndPreview' , true)
|
||||
events.$emit('mobileSortingAndPreviewVignette' , true)
|
||||
this.mobileMultiSelect = false
|
||||
}
|
||||
|
||||
if(!this.mobileSortingAndPreview) {
|
||||
events.$emit('mobileSortingAndPreview', false)
|
||||
events.$emit('mobileSortingAndPreviewVignette' , false)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectAll() {
|
||||
|
||||
},
|
||||
deselectAll() {
|
||||
|
||||
},
|
||||
enableMultiSelectMode() {
|
||||
this.multiSelectMode = true
|
||||
|
||||
events.$emit('mobileSelecting:start')
|
||||
},
|
||||
disableMultiSelectMode() {
|
||||
this.multiSelectMode = false
|
||||
|
||||
events.$emit('mobileSelecting:stop')
|
||||
},
|
||||
showViewOptions() {
|
||||
this.mobileSortingAndPreview = ! this.mobileSortingAndPreview
|
||||
|
||||
// Toggle mobile sorting
|
||||
events.$emit('mobileSortingAndPreview', this.mobileSortingAndPreview)
|
||||
events.$emit('mobileSortingAndPreviewVignette', this.mobileSortingAndPreview)
|
||||
},
|
||||
createFolder() {
|
||||
events.$emit('popup:open', {name: 'create-folder'})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.mobileMultiSelect = false
|
||||
})
|
||||
|
||||
events.$on('mobileSortingAndPreview', (state) => {
|
||||
this.mobileSortingAndPreview = state
|
||||
})
|
||||
events.$on('mobileSelecting:stop', () => this.multiSelectMode = false)
|
||||
events.$on('mobileSortingAndPreview', state => this.mobileSortingAndPreview = state)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -148,10 +163,10 @@
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin: 0 -15px;
|
||||
padding: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
Reference in New Issue
Block a user