mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
Sidebar desktop navigation refactoring
This commit is contained in:
Čarodej
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -17,53 +17,22 @@
|
||||
<SidebarNavigation/>
|
||||
|
||||
<ContentSidebar>
|
||||
<ContentGroup v-for="(menu, i) in nav" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="false">
|
||||
<router-link v-for="(item, i) in menu.groupLinks" :key="i" :to="{name: item.route}" class="flex items-center py-2.5" :class="{'router-link-active': item.linkActivation && item.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
|
||||
<box-icon v-if="item.icon === 'box'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<users-icon v-if="item.icon === 'users'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<settings-icon v-if="item.icon === 'settings'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<monitor-icon v-if="item.icon === 'monitor'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<globe-icon v-if="item.icon === 'globe'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<credit-card-icon v-if="item.icon === 'card'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<database-icon v-if="item.icon === 'database'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<dollar-sign-icon v-if="item.icon === 'dollar'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<file-text-icon v-if="item.icon === 'file-text'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
|
||||
<!--Admin-->
|
||||
<ContentGroup :title="$t('global.admin')" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link v-for="(menu, i) in admin" :key="i" :to="{name: menu.route}" class="menu-list-item link" :class="{'router-link-active': menu.linkActivation && menu.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
|
||||
<div class="icon text-theme">
|
||||
<box-icon v-if="menu.icon === 'box'" size="17" />
|
||||
<users-icon v-if="menu.icon === 'users'" size="17" />
|
||||
<settings-icon v-if="menu.icon === 'settings'" size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ menu.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Content-->
|
||||
<ContentGroup :title="$t('Content')" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link v-for="(menu, i) in content" :key="i" :to="{name: menu.route}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<monitor-icon v-if="menu.icon === 'monitor'" size="17" />
|
||||
<globe-icon v-if="menu.icon === 'globe'" size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ menu.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!-- Assets -->
|
||||
<ContentGroup :title="$t('Subscription')" v-if="config.isSaaS" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link v-for="(menu, i) in assetMenu" :key="i" :to="{name: menu.route}" class="menu-list-item link" :class="{'router-link-active': menu.linkActivation && menu.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
|
||||
<div class="icon text-theme">
|
||||
<credit-card-icon v-if="menu.icon === 'card'" size="17" />
|
||||
<database-icon v-if="menu.icon === 'database'" size="17" />
|
||||
<dollar-sign-icon v-if="menu.icon === 'dollar'" size="17" />
|
||||
<file-text-icon v-if="menu.icon === 'file-text'" size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ menu.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<b class="font-bold text-xs text-active">
|
||||
{{ item.title }}
|
||||
</b>
|
||||
</router-link>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
@@ -90,8 +59,8 @@
|
||||
'isVisibleNavigationBars',
|
||||
'config',
|
||||
]),
|
||||
assetMenu() {
|
||||
return {
|
||||
nav() {
|
||||
let subscriptionLinks = {
|
||||
metered: [
|
||||
{
|
||||
title: this.$t('Payments'),
|
||||
@@ -138,44 +107,56 @@
|
||||
},
|
||||
],
|
||||
}[this.config.subscriptionType]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
admin: [
|
||||
|
||||
return [
|
||||
{
|
||||
title: this.$t('admin_menu.dashboard'),
|
||||
route: 'Dashboard',
|
||||
icon: 'box',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.users'),
|
||||
route: 'Users',
|
||||
icon: 'users',
|
||||
linkActivation: [
|
||||
'users', 'user'
|
||||
groupCollapsable: false,
|
||||
groupTitle: this.$t('global.admin'),
|
||||
groupLinks: [
|
||||
{
|
||||
title: this.$t('admin_menu.dashboard'),
|
||||
route: 'Dashboard',
|
||||
icon: 'box',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.users'),
|
||||
route: 'Users',
|
||||
icon: 'users',
|
||||
linkActivation: [
|
||||
'users', 'user'
|
||||
],
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.settings'),
|
||||
route: 'AppSettings',
|
||||
icon: 'settings',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.settings'),
|
||||
route: 'AppSettings',
|
||||
icon: 'settings',
|
||||
},
|
||||
],
|
||||
content: [
|
||||
{
|
||||
title: this.$t('admin_menu.pages'),
|
||||
route: 'Pages',
|
||||
icon: 'monitor',
|
||||
groupCollapsable: false,
|
||||
groupTitle: this.$t('Content'),
|
||||
groupLinks: [
|
||||
{
|
||||
title: this.$t('admin_menu.pages'),
|
||||
route: 'Pages',
|
||||
icon: 'monitor',
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.languages'),
|
||||
route: 'Language',
|
||||
icon: 'globe',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: this.$t('admin_menu.languages'),
|
||||
route: 'Language',
|
||||
icon: 'globe',
|
||||
groupCollapsable: false,
|
||||
groupTitle: this.$t('Subscription'),
|
||||
groupLinks: subscriptionLinks,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
FilePreview,
|
||||
Spotlight,
|
||||
|
||||
@@ -1,94 +1,55 @@
|
||||
<template>
|
||||
<ContentSidebar class="relative" v-if="isVisibleNavigationBars">
|
||||
<ContentSidebar v-if="isVisibleNavigationBars" class="relative">
|
||||
|
||||
<!--Full screen button-->
|
||||
<div @click="toggleNavigationBars" class="inline-block absolute top-2.5 right-0 p-3 cursor-pointer transition-all duration-200 hover:opacity-70 opacity-0">
|
||||
<chevrons-left-icon size="18"/>
|
||||
</div>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('sidebar.locations_title')">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link @click.native="resetData" :to="{name: 'Files'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<home-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.home') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link @click.native="resetData" :to="{name: 'RecentUploads'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<upload-cloud-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.latest') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link @click.native="resetData" :to="{name: 'MySharedItems'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<link-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.my_shared') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link @click.native="resetData" :to="{name: 'Trash'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<trash2-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('locations.trash') }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
<ContentGroup v-for="(menu, i) in nav" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="menu.groupCollapsable">
|
||||
<router-link v-for="(item, i) in menu.groupLinks" :key="i" @click.native="resetData" :to="{name: item.route}" class="flex items-center py-2.5">
|
||||
<home-icon v-if="item.icon === 'home'" size="17" class="mr-2.5 vue-feather icon-active"/>
|
||||
<upload-cloud-icon v-if="item.icon === 'upload-cloud'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<link-icon v-if="item.icon === 'link'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<trash2-icon v-if="item.icon === 'trash'" size="17" class="mr-2.5 vue-feather icon-active" />
|
||||
<users-icon size="17" v-if="item.icon === 'users'" class="mr-2.5 vue-feather icon-active" />
|
||||
<user-check-icon size="17" v-if="item.icon === 'user-check'" class="mr-2.5 vue-feather icon-active" />
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('Collaboration')" slug="collaboration" :can-collapse="true">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link @click.native="resetData" :to="{name: 'TeamFolders'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Team Folders') }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link @click.native="resetData" :to="{name: 'SharedWithMe'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<user-check-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Shared with Me') }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<b class="font-bold text-xs text-active">
|
||||
{{ item.title }}
|
||||
</b>
|
||||
</router-link>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup v-if="user" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
|
||||
<span v-if="tree.length === 0" class="empty-note navigator">
|
||||
{{ $t('sidebar.folders_empty') }}
|
||||
</span>
|
||||
<TreeMenuNavigator v-if="navigation" class="folder-tree" :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
|
||||
<ContentGroup v-if="navigation" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true">
|
||||
<small v-if="tree.length === 0" class="text-xs font-bold text-gray-500">
|
||||
{{ $t("There isn't any folder.") }}
|
||||
</small>
|
||||
<TreeMenuNavigator :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Favourites-->
|
||||
<ContentGroup v-if="user" :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
|
||||
|
||||
<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{ 'is-dragenter': area }" class="menu-list-wrapper vertical favourites">
|
||||
<transition-group tag="div" class="menu-list" name="folder">
|
||||
<span v-if="favourites.length === 0" class="empty-note favourites" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</span>
|
||||
<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{'border-theme': area }" class="border-2 border-transparent border-dashed">
|
||||
|
||||
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="menu-list-item folder-item">
|
||||
<div class="text-theme flex">
|
||||
<folder-icon size="17" class="folder-icon" />
|
||||
<span class="label text-theme">{{ folder.data.attributes.name }}</span>
|
||||
</div>
|
||||
<x-icon @click.stop="$removeFavourite(folder)" size="17" class="delete-icon" />
|
||||
<!--Empty message-->
|
||||
<small v-if="favourites.length === 0" class="text-xs font-bold text-gray-500 favourites" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</small>
|
||||
|
||||
<!--Folder item-->
|
||||
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex items-center justify-between py-2.5 cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': $route.params.id === folder.data.id}" />
|
||||
<span class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
|
||||
{{ folder.data.attributes.name }}
|
||||
</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
<x-icon @click.stop="$removeFavourite(folder)" size="12" class="mr-5 group-hover:opacity-100 opacity-0" />
|
||||
</div>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
@@ -148,6 +109,50 @@ export default {
|
||||
return {
|
||||
draggedItem: undefined,
|
||||
area: false,
|
||||
nav: [
|
||||
{
|
||||
groupCollapsable: false,
|
||||
groupTitle: this.$t('sidebar.locations_title'),
|
||||
groupLinks: [
|
||||
{
|
||||
icon: 'home',
|
||||
route: 'Files',
|
||||
title: this.$t('sidebar.home'),
|
||||
},
|
||||
{
|
||||
icon: 'upload-cloud',
|
||||
route: 'RecentUploads',
|
||||
title: this.$t('sidebar.latest'),
|
||||
},
|
||||
{
|
||||
icon: 'link',
|
||||
route: 'MySharedItems',
|
||||
title: this.$t('sidebar.my_shared'),
|
||||
},
|
||||
{
|
||||
icon: 'trash',
|
||||
route: 'Trash',
|
||||
title: this.$t('locations.trash'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupCollapsable: true,
|
||||
groupTitle: this.$t('Collaboration'),
|
||||
groupLinks: [
|
||||
{
|
||||
icon: 'users',
|
||||
route: 'TeamFolders',
|
||||
title: this.$t('Team Folders'),
|
||||
},
|
||||
{
|
||||
icon: 'user-check',
|
||||
route: 'SharedWithMe',
|
||||
title: this.$t('Shared with Me'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -203,50 +208,4 @@ export default {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-item {
|
||||
transition: all 300ms;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.folder-enter, .folder-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
.folder-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user