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

Shared pages refactoring part 2

Browse Source
This commit is contained in:
Čarodej
2022-02-08 12:58:47 +01:00
parent f04c057490
commit 7b0f9a19de
15 changed files with 273 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/js/views/FileView/Components/NavigationSharePanel.vue
View File

@@ -1,28 +1,45 @@
<template>
<ContentSidebar v-if="navigationTree && navigationTree.length >= 1">
<!--Locations-->
<ContentGroup :title="$t('sidebar.locations_title')">
<div class="menu-list-wrapper vertical">
<a class="menu-list-item link" @click="goHome">
<div class="icon">
<home-icon size="17" />
</div>
<div class="label">
{{ $t('Home') }}
</div>
</a>
</div>
</ContentGroup>
<ContentSidebar v-if="(navigationTree && navigationTree.length >= 1) && isVisibleNavigationBars" class="relative lg:!grid">
<!--Full screen button-->
<div @click="$store.dispatch('toggleNavigationBars')" class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70">
<chevrons-left-icon size="18" />
</div>
<div class="mb-auto">
<!--Locations-->
<ContentGroup :title="$t('Base')">
<b @click="goHome" class="flex items-center py-2.5 cursor-pointer" :class="{'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id}">
<home-icon size="17" class="vue-feather icon-active mr-2.5" />
<small class="text-active text-xs font-bold">
{{ $t('Home') }}
</small>
</b>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" can-collapse="true">
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
</ContentGroup>
</div>
<ContentGroup class="mt-auto">
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group">
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
<sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
<moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
</div>
<b class="text-xs group-hover-text-theme">
Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode
</b>
</div>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
</ContentGroup>
</ContentSidebar>
</template>
<script>
import { FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import { SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
@@ -35,7 +52,10 @@ export default {
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
SunIcon,
MoonIcon,
UploadCloudIcon,
ChevronsLeftIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
@@ -45,7 +65,7 @@ export default {
XIcon,
},
computed: {
...mapGetters(['sharedDetail', 'navigation', 'clipboard', 'config', 'user']),
...mapGetters(['sharedDetail', 'navigation', 'clipboard', 'config', 'user', 'isVisibleNavigationBars', 'isDarkMode']),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
},
@@ -113,60 +133,6 @@ export default {
created() {
// Listen for dragstart folder items
events.$on('dragstart', (item) => (this.draggedItem = item))
// Get folder tree
this.$store.dispatch('getFolderTree')
},
}
</script>
<style lang="scss" scoped>
.empty-note {
&.navigator {
padding: 5px 25px 10px;
}
&.favourites {
padding: 5px 23px 10px;
}
}
.navigator {
width: 100%;
overflow-x: auto;
}
@media only screen and (max-width: 1024px) {
.empty-note {
&.navigator {
padding: 5px 20px 10px;
}
&.favourites {
padding: 5px 18px 10px;
}
}
}
// Transition
.folder-item-move {
transition: all 300s ease;
}
.folder-item-enter-active {
transition: all 300ms ease;
}
.folder-item-leave-active {
transition: all 300ms;
}
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(30px);
}
.folder-item-leave-active {
position: absolute;
}
</style>