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

- navigator in shared folder page fix

Browse Source 
- fixed trash in MobileNavigation.vue
- MobileMultiSelectMenu.vue refactor
- frontend build
This commit is contained in:
Peter Papp
2020-12-03 20:19:21 +01:00
parent aff2594ef2
commit 10090b474a
60 changed files with 736 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
resources/js/components/FilesView/MobileMultiSelectMenu.vue
View File

@@ -1,64 +1,31 @@
<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="multiselect-actions" v-if="mobileMultiSelect">
<ToolbarButton class="action-btn" 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"/>
<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 class="action-btn" v-if="$checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/>
<ToolbarButton
v-if="$checkPermission('master') || $checkPermission('editor')"
source="trash"
:class="{'is-inactive' : fileInfoDetail.length < 1}"
:action="$t('actions.delete')"
@click.native="deleteItem"/>
<ToolbarButton class="action-btn" source="download" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="downloadItem"/>
<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>
<ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/>
</div>
</div>
</transition>
</div>
</template>
<script>
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import { events } from "@/bus";
import { mapGetters } from "vuex";
import ToolbarButton from '@/components/FilesView/ToolbarButton'
import { events } from '@/bus'
import { mapGetters } from 'vuex'
export default {
name:"MobileMultiSelectMenu",
components: {ToolbarButton},
name: 'MobileMultiSelectMenu',
components: { ToolbarButton },
computed: {
...mapGetters(['fileInfoDetail'])
},
data () {
data() {
return {
mobileMultiSelect:false
mobileMultiSelect: false
}
},
methods: {
@@ -68,32 +35,32 @@ export default {
downloadItem() {
this.fileInfoDetail.forEach(item => {
this.$downloadFile(
item.file_url,
item.name + '.' + item.mimetype
)
})
item.file_url,
item.name + '.' + item.mimetype
)
})
},
moveItem() {
// Open move item popup
// Open move item popup
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
},
deleteItem() {
//Delete items
this.$store.dispatch("deleteItem");
},
//Delete items
this.$store.dispatch('deleteItem')
}
},
created () {
events.$on('mobileSelecting-start' , () => {
created() {
events.$on('mobileSelecting-start', () => {
this.mobileMultiSelect = true
})
events.$on('mobileSelecting-stop' , () => {
this.mobileMultiSelect = false
})
})
events.$on('mobileSelecting-stop', () => {
this.mobileMultiSelect = false
})
}
}
</script>
@@ -101,80 +68,79 @@ 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;
.multiselect-actions {
display: flex;
padding: 10px 15px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
overflow: hidden;
background: white;
.action-btn {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
.close-icon {
margin-left: auto !important;
}
}
.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 {
&.is-active {
opacity: 1 !important;
pointer-events: initial !important;
}
}
}
.menu-option {
display: flex;
align-items: center;
}
@media (prefers-color-scheme: dark) {
.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;
}
.multiselect-actions {
background: $dark_mode_foreground;
}
}
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 200ms;
}
@media (prefers-color-scheme: dark) {
.context-menu-leave-active,
.fade-leave-active {
transition: all 200ms;
}
.options {
background: $dark_mode_background;
}
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 200ms;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.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;
}
.context-menu-leave-active {
position: absolute;
}
</style>