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

Sidebar desktop navigation refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-21 18:23:27 +01:00
parent e2cfdd5345
commit ba05cdde83
6 changed files with 337 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div>
<div
@click="goToFolder"
class="flex items-center py-2 rounded-lg border-2 border-transparent border-dashed cursor-pointer"
class="flex items-center py-2.5 rounded-lg border-2 border-transparent border-dashed cursor-pointer"
:class="{'border-theme': area, 'pointer-events-none opacity-50': disabledFolder || disabled && draggedItem.length > 0 }"
:style="indent"
@dragover.prevent="dragEnter"
@@ -18,7 +18,7 @@
</div>
<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': isSelected}" />
<b
class="font-bold text-sm max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
:class="{'text-theme': isSelected}"
>
{{ nodes.name }}
@@ -82,9 +82,7 @@
let offset = window.innerWidth <= 1024 ? 14 : 18;
let value = this.depth === 0 ? offset : offset + (this.depth * 18);
return {paddingLeft: value + 'px'}
return {paddingLeft: this.depth === 0 ? 0 : offset * this.depth + 'px'}
},
},
data() {

78
resources/js/components/Sidebar/ContentGroup.vue
View File

@@ -1,16 +1,13 @@
<template>
<div class="content-group" :class="{'is-collapsed': ! isVisible, 'collapsable': canCollapse}">
<div class="group-title" @click="hideGroup">
<TextLabel class="title">{{ title }}</TextLabel>
<chevron-up-icon v-if="canCollapseWrapper" size="12" class="icon" />
<div class="ml-6 mb-6" :class="{'is-collapsed': ! isVisible, 'collapsable': canCollapse}">
<div @click="hideGroup" class="flex items-center justify-between mb-2">
<small class="text-xs font-bold dark:text-gray-700 text-gray-400">
{{ title }}
</small>
<chevron-up-icon v-if="canCollapseWrapper" size="12" class="mr-5 cursor-pointer vue-feather text-gray-300 transform" :class="{'rotate-180': ! isVisible}" />
</div>
<transition name="list">
<div class="wrapper" v-show="isVisible">
<slot></slot>
</div>
</transition>
<slot v-if="isVisible" />
</div>
</template>
@@ -20,7 +17,11 @@
export default {
name: 'ContentGroup',
props: ['title', 'canCollapse', 'slug'],
props: [
'canCollapse',
'title',
'slug'
],
components: {
ChevronUpIcon,
TextLabel,
@@ -52,58 +53,3 @@
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_mixins';
.content-group {
margin-bottom: 15px;
transition: all 300ms;
.group-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.title {
margin-bottom: 0;
}
.icon {
margin-right: 19px;
opacity: 0.25;
@include transition;
}
}
&.collapsable {
.group-title {
cursor: pointer;
}
}
&.is-collapsed {
margin-bottom: 15px;
.icon {
@include transform(rotate(180deg));
}
}
}
.list-enter,
.list-leave-to {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.list-enter-active,
.list-leave-active {
transition: all 300ms;
}
</style>