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

Move item popup refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-02 08:13:09 +01:00
parent ffbf809b1e
commit 54167ae366
7 changed files with 225 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -150,7 +150,7 @@ export default {
}
.vue-feather {
path, circle, line, rect {
path, circle, line, rect, polyline {
color: inherit;
}
}

2
resources/js/components/Others/MoveItemPopup.vue
View File

@@ -4,7 +4,7 @@
<PopupHeader :title="$t('popup_move_item.title')" icon="move" />
<!--Content-->
<PopupContent type="height-limited" v-if="pickedItem">
<PopupContent v-if="pickedItem" class="sm:overflow-y-auto md:pb-0 sm:max-h-96 h-full pb-6">
<!--Show Spinner when loading folders-->
<Spinner v-if="isLoadingTree" />

7
resources/js/components/Others/Popup/PopupContent.vue
View File

@@ -17,13 +17,6 @@
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.popup-content {
&.height-limited {
height: 400px;
overflow-y: auto;
}
}
@media only screen and (max-width: 690px) {
.popup-content {
top: 57px;

274
resources/js/components/Others/TreeMenu.vue
View File

@@ -1,188 +1,134 @@
<template>
<!--Folder Icon-->
<div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.data.id === nodes.id || !disableId}">
<div :class="{'opacity-50 pointer-events-none': disabledById && disabledById.data.id === nodes.id || !disableId, 'mb-2.5': isRootDepth}">
<div @click="getFolder" :class="{'is-selected': isSelected, 'is-disabled-item': nodes.location === 'team-folders' || nodes.location === 'shared-with-me'}" :style="indent" class="folder-item text-theme dark-text-theme flex">
<chevron-right-icon @click.stop="showTree" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}" size="17" class="icon-arrow"/>
<div
:class="{'is-disabled-item': false}"
:style="indent"
class="relative flex items-center select-none py-2 px-1.5 cursor-pointer relative whitespace-nowrap transition-all duration-150"
>
<!--Arrow icon-->
<span @click.stop="showTree" class="p-2 -m-2">
<chevron-right-icon
:class="{'transform rotate-90': isVisible, 'text-theme dark-text-theme': isSelectedItem, 'opacity-100': nodes.folders.length !== 0}"
class="vue-feather transition-all duration-300 mr-2 opacity-0"
size="17"
/>
</span>
<hard-drive-icon v-if="nodes.location === 'files'" size="17" class="icon text-theme dark-text-theme"/>
<users-icon v-if="nodes.location === 'team-folders'" size="17" class="icon text-theme dark-text-theme"/>
<user-plus-icon v-if="nodes.location === 'shared-with-me'" size="17" class="icon text-theme dark-text-theme"/>
<folder-icon v-if="! nodes.location" size="17" class="icon text-theme dark-text-theme"/>
<span class="label">{{ nodes.name }}</span>
<!--Item icon-->
<hard-drive-icon v-if="nodes.location === 'files'" size="17" class="icon vue-feather" :class="{'text-theme dark-text-theme': isSelectedItem}" />
<users-icon v-if="nodes.location === 'team-folders'" size="17" class="icon vue-feather" :class="{'text-theme dark-text-theme': isSelectedItem}" />
<user-plus-icon v-if="nodes.location === 'shared-with-me'" size="17" class="icon vue-feather" :class="{'text-theme dark-text-theme': isSelectedItem}" />
<folder-icon v-if="! nodes.location" size="17" class="icon vue-feather" :class="{'text-theme dark-text-theme': isSelectedItem}" />
<!--Item label-->
<b
@click="getFolder"
class="text-sm font-bold whitespace-nowrap overflow-x-hidden overflow-ellipsis inline-block ml-3 transition-all duration-150"
:class="{'text-theme': isSelectedItem}"
>
{{ nodes.name }}
</b>
</div>
<TreeMenu :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
<!--Children-->
<TreeMenu
:disabled-by-id="disabledById"
:depth="depth + 1"
v-if="isVisible"
:nodes="item"
v-for="item in nodes.folders"
:key="item.id"
/>
</div>
</template>
<script>
import TreeMenu from '/resources/js/components/Others/TreeMenu'
import {FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon} from 'vue-feather-icons'
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
import {FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon} from 'vue-feather-icons'
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
export default {
name: 'TreeMenu',
props: [
export default {
name: 'TreeMenu',
props: [
'disabledById',
'nodes',
'nodes',
'depth',
],
components: {
ChevronRightIcon,
HardDriveIcon,
],
components: {
ChevronRightIcon,
HardDriveIcon,
UserPlusIcon,
FolderIcon,
FolderIcon,
UsersIcon,
TreeMenu,
},
computed: {
...mapGetters([
TreeMenu,
},
computed: {
...mapGetters([
'clipboard'
]),
indent() {
return { paddingLeft: this.depth * 20 + 'px' }
},
disableId() {
let canBeShow = true
indent() {
return {paddingLeft: this.depth * 20 + 'px'}
},
disableId() {
let canBeShow = true
if(this.clipboard.includes(this.disabledById)){
this.clipboard.map(item => {
if(item.data.id === this.nodes.id) {
canBeShow = false
}
})
}
return canBeShow
}
},
data() {
return {
isVisible: false,
isSelected: false,
isInactive: false
}
},
methods: {
getFolder() {
events.$emit('show-folder-item', this.nodes)
events.$emit('pick-folder', this.nodes)
},
showTree() {
this.isVisible = ! this.isVisible
}
},
mounted() {
if (this.clipboard.includes(this.disabledById)) {
this.clipboard.map(item => {
if (item.data.id === this.nodes.id) {
canBeShow = false
}
})
}
return canBeShow
},
isRootDepth() {
return this.depth === 1
},
isSelectedItem() {
return this.isSelected && this.nodes.isMovable || this.isSelected && !this.isRootDepth
}
},
data() {
return {
isVisible: false,
isSelected: false,
isInactive: false
}
},
methods: {
getFolder() {
if ((this.isRootDepth && this.nodes.isMovable) || !this.isRootDepth) {
events.$emit('show-folder-item', this.nodes)
events.$emit('pick-folder', this.nodes)
}
},
showTree() {
this.isVisible = !this.isVisible
}
},
mounted() {
// Show first location
if (this.depth === 1)
this.isVisible = true
// Show first location
if (this.depth === 1 && this.nodes.isOpen)
this.isVisible = true
// Select clicked folder
events.$on('pick-folder', node => {
this.isSelected = false
// Select clicked folder
events.$on('pick-folder', node => {
this.isSelected = false
if (this.nodes.id === node.id)
this.isSelected = true
})
if (this.nodes.id === node.id)
this.isSelected = true
})
// Select clicked folder
events.$on('show-folder-item', node => {
this.isSelected = false
// Select clicked folder
events.$on('show-folder-item', node => {
this.isSelected = false
if (this.nodes.id === node.id)
this.isSelected = true
})
}
}
if (this.nodes.id === node.id)
this.isSelected = true
})
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.is-inactive,
.is-disabled-item {
opacity: 0.5;
pointer-events: none;
}
.folder-item {
user-select: none;
padding: 8px 23px;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
.icon {
line-height: 0;
width: 15px;
margin-right: 9px;
vertical-align: middle;
margin-top: -1px;
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
.icon-arrow {
@include transition(300ms);
margin-right: 4px;
vertical-align: middle;
opacity: 0;
&.is-visible {
opacity: 1;
}
&.is-opened {
@include transform(rotate(90deg));
}
}
.label {
@include transition(150ms);
@include font-size(13);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
color: $text;
}
&:hover,
&.is-selected {
.icon {
path, line, polyline, rect, circle {
color: inherit !important;
}
}
.label {
color: inherit !important;
}
}
}
// Dark mode
.dark {
.folder-item {
.label {
color: $dark_mode_text_primary;
}
.is-selected .label {
color: inherit !important;
}
}
}
</style>