nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +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

1017
resources/js/components/FilesView/FileItemGrid.vue
View File

File diff suppressed because it is too large Load Diff

9
resources/js/components/FilesView/FileItemList.vue
View File

@@ -289,9 +289,10 @@ export default {
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.check-select {
margin-right: 10px;
margin-left: 3px;
.check-select {
margin-right: 15px;
margin-left: 6px;
.select-box {
width: 20px;
height: 20px;
@@ -508,7 +509,7 @@ export default {
background-color: $dark_mode_foreground;
}
.select-box-active {
background-color: $dark_mode_text_primary ;
background-color: $theme;
.icon {
stroke: $text;
}

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>

6
resources/js/components/Others/MobileNavigation.vue
View File

@@ -58,7 +58,7 @@
{
icon: 'trash',
title: this.$t('menu.trash'),
routeName: 'Trash',
routeName: 'Files',
isVisible: true,
},
{
@@ -94,6 +94,10 @@
this.$store.dispatch('getLatest')
}
if (name === 'trash') {
this.$store.dispatch('getTrash')
}
if (name === 'hard-drive') {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
}

30
resources/js/components/Others/TreeMenuNavigator.vue
View File

@@ -2,12 +2,12 @@
<transition name="folder">
<div class="folder-item-wrapper" >
<div class="folder-item" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
<div class="folder-item" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
:style="indent" @click="getFolder"
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@drop="dragFinish()"
>
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
@@ -39,17 +39,17 @@
},
computed: {
...mapGetters(['fileInfoDetail']),
disabledFolder() {
let disableFolder = false
if(this.draggedItem.length > 0) {
this.draggedItem.forEach(item => {
//Disable the parent of the folder
//Disable the parent of the folder
if(item.type === "folder" && this.nodes.unique_id === item.parent_id){
disableFolder = true
}
//Disable the self folder with all children
//Disable the self folder with all children
if (this.nodes.unique_id === item.unique_id && item.type === 'folder') {
disableFolder = true
this.disableChildren = true
@@ -84,20 +84,21 @@
},
methods: {
dragFinish() {
// Move item
//Move no selected item
// Move no selected item
if(!this.fileInfoDetail.includes(this.draggedItem[0])) {
this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:this.draggedItem[0]})
this.draggedItem = []
}
//Move all selected items
// Move all selected items
if(this.fileInfoDetail.includes(this.draggedItem[0])) {
this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:null})
this.draggedItem = []
}
this.area = false
events.$emit('drop')
},
dragEnter() {
this.area = true
@@ -106,18 +107,21 @@
this.area = false
},
getFolder() {
events.$emit('show-folder', this.nodes)
// Get folder content
this.$store.dispatch('getFolder', [{folder: this.nodes, back: false, init: false}])
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.nodes, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.nodes, back: false, init: false }])
}
},
showTree() {
this.isVisible = !this.isVisible
}
},
created() {
events.$on('drop' , () => {
this.draggedItem = []
})

3
resources/js/views/Shared/SharedPage.vue
View File

@@ -9,8 +9,7 @@
<!--Move item setup-->
<MoveItem />
<!-- Mobile Menu for Multiselected items -->
<!-- Mobile Menu for Multi selected items -->
<MobileMultiSelectMenu/>
<!--Rename folder or file item-->

2
resources/sass/vue-file-manager/_variables.scss vendored
View File

@@ -23,7 +23,7 @@ $light_mode_vignette: rgba(255, 255, 255, 0.7);
// Dark Mode
$dark_mode_vignette: rgba(0, 0, 0, 0.3);
$dark_mode_background: #111314;
$dark_mode_background: #131414;
$dark_mode_foreground: #1e2024;
$dark_mode_text_primary: #bec6cf;
$dark_mode_text_secondary: #7d858c;