mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 08:32:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,55 +1,48 @@
|
||||
<template>
|
||||
<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 class="ml-6 mb-6" :class="{ 'is-collapsed': !isVisible, collapsable: canCollapse }">
|
||||
<div @click="hideGroup" class="mb-2 flex items-center justify-between">
|
||||
<small class="text-xs font-bold text-gray-400 dark:text-gray-700">
|
||||
{{ title }}
|
||||
</small>
|
||||
<chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" />
|
||||
</div>
|
||||
|
||||
<slot v-if="isVisible" />
|
||||
<slot v-if="isVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TextLabel from "../Others/TextLabel";
|
||||
import { ChevronUpIcon } from 'vue-feather-icons'
|
||||
import TextLabel from '../Others/TextLabel'
|
||||
import { ChevronUpIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'ContentGroup',
|
||||
props: [
|
||||
'canCollapse',
|
||||
'title',
|
||||
'slug'
|
||||
],
|
||||
components: {
|
||||
ChevronUpIcon,
|
||||
TextLabel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: true,
|
||||
canCollapseWrapper: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideGroup() {
|
||||
if (! this.canCollapseWrapper)
|
||||
return
|
||||
|
||||
this.isVisible = !this.isVisible
|
||||
localStorage.setItem('panel-group-' + this.slug, this.isVisible)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
if (this.canCollapse) {
|
||||
|
||||
let savedVisibility = localStorage.getItem('panel-group-' + this.slug)
|
||||
|
||||
this.isVisible = savedVisibility ? !!JSON.parse(String(savedVisibility).toLowerCase()) : true
|
||||
this.canCollapseWrapper = true
|
||||
}
|
||||
export default {
|
||||
name: 'ContentGroup',
|
||||
props: ['canCollapse', 'title', 'slug'],
|
||||
components: {
|
||||
ChevronUpIcon,
|
||||
TextLabel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: true,
|
||||
canCollapseWrapper: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideGroup() {
|
||||
if (!this.canCollapseWrapper) return
|
||||
|
||||
this.isVisible = !this.isVisible
|
||||
localStorage.setItem('panel-group-' + this.slug, this.isVisible)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.canCollapse) {
|
||||
let savedVisibility = localStorage.getItem('panel-group-' + this.slug)
|
||||
|
||||
this.isVisible = savedVisibility ? !!JSON.parse(String(savedVisibility).toLowerCase()) : true
|
||||
this.canCollapseWrapper = true
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
|
||||
<section class="content-sidebar z-10 hidden w-52 flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block xl:w-56" id="content-sidebar">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContentSidebar',
|
||||
}
|
||||
export default {
|
||||
name: 'ContentSidebar',
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,184 +1,182 @@
|
||||
<template>
|
||||
<nav v-if="isVisibleNavigationBars" class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden z-10">
|
||||
<nav v-if="isVisibleNavigationBars" class="menu-bar z-10 hidden w-16 flex-none select-none bg-light-background pt-7 dark:bg-dark-foreground lg:grid xl:w-20">
|
||||
<!--Navigation-->
|
||||
<div v-if="user" class="mb-auto text-center">
|
||||
<MemberAvatar class="mx-auto inline-block" :size="44" :is-border="false" :member="user" />
|
||||
|
||||
<!--Navigation-->
|
||||
<div v-if="user" class="mb-auto text-center">
|
||||
<!--Usage-->
|
||||
<div v-if="config.subscriptionType === 'metered'" class="mt-1 text-center leading-3">
|
||||
<b class="text-theme block text-xs font-bold leading-3">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ $t('usage') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<MemberAvatar
|
||||
class="mx-auto inline-block"
|
||||
:size="44"
|
||||
:is-border="false"
|
||||
:member="user"
|
||||
/>
|
||||
<!--Navigation-->
|
||||
<div class="mt-7">
|
||||
<router-link
|
||||
v-for="(item, i) in navigation"
|
||||
:to="{ name: item.route }"
|
||||
:key="i"
|
||||
:title="item.title"
|
||||
:class="[{ 'router-link-active': isSection(item.section) }, item.icon]"
|
||||
class="mb-1.5 block"
|
||||
>
|
||||
<div class="button-icon text-theme inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
|
||||
<hard-drive-icon v-if="item.icon === 'home'" size="20" />
|
||||
<settings-icon v-if="item.icon === 'settings'" size="20" />
|
||||
<user-icon v-if="item.icon === 'user'" size="20" />
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!--Usage-->
|
||||
<div v-if="config.subscriptionType === 'metered'" class="text-center leading-3 mt-1">
|
||||
<b class="text-xs font-bold leading-3 block text-theme">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ $t('usage') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Navigation-->
|
||||
<div class="mt-7">
|
||||
<router-link
|
||||
v-for="(item, i) in navigation"
|
||||
:to="{name: item.route}"
|
||||
:key="i"
|
||||
:title="item.title"
|
||||
:class="[{'router-link-active': isSection(item.section)}, item.icon]"
|
||||
class="block mb-1.5"
|
||||
>
|
||||
<div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 text-theme rounded-xl">
|
||||
<hard-drive-icon v-if="item.icon === 'home'" size="20" />
|
||||
<settings-icon v-if="item.icon === 'settings'" size="20" />
|
||||
<user-icon v-if="item.icon === 'user'" size="20" />
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!--Toggle Dark/Light mode-->
|
||||
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="block mt-6">
|
||||
<div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 rounded-xl">
|
||||
<sun-icon v-if="isDarkMode" size="20" />
|
||||
<moon-icon v-if="! isDarkMode" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
<!--Toggle Dark/Light mode-->
|
||||
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="mt-6 block">
|
||||
<div class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
|
||||
<sun-icon v-if="isDarkMode" size="20" />
|
||||
<moon-icon v-if="!isDarkMode" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Logout-->
|
||||
<!--Logout-->
|
||||
<div class="mt-auto text-center">
|
||||
<div @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 rounded-xl">
|
||||
<power-icon size="20" />
|
||||
</div>
|
||||
<div
|
||||
@click="$store.dispatch('logOut')"
|
||||
:title="$t('locations.logout')"
|
||||
class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
|
||||
>
|
||||
<power-icon size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MemberAvatar from "../FilesView/MemberAvatar";
|
||||
import {mapGetters} from 'vuex'
|
||||
import {
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
UserIcon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import MemberAvatar from '../FilesView/MemberAvatar'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { MoonIcon, SunIcon, HardDriveIcon, SettingsIcon, Trash2Icon, UserIcon, PowerIcon, ShareIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'SidebarNavigation',
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
UserIcon,
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isVisibleNavigationBars',
|
||||
'isDarkMode',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
navigation() {
|
||||
if (this.user.data.attributes.role === 'admin') {
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'user',
|
||||
},
|
||||
{
|
||||
route: 'Dashboard',
|
||||
section: 'Admin',
|
||||
title: this.$t('locations.settings'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
}
|
||||
export default {
|
||||
name: 'SidebarNavigation',
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
UserIcon,
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isVisibleNavigationBars', 'isDarkMode', 'config', 'user']),
|
||||
navigation() {
|
||||
if (this.user.data.attributes.role === 'admin') {
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'user',
|
||||
},
|
||||
{
|
||||
route: 'Dashboard',
|
||||
section: 'Admin',
|
||||
title: this.$t('locations.settings'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSection(section) {
|
||||
return this.$route.matched[0].name === section
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isSection(section) {
|
||||
return this.$route.matched[0].name === section
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
|
||||
.menu-bar {
|
||||
//background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
|
||||
}
|
||||
.menu-bar {
|
||||
//background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
.router-link-active {
|
||||
&.home .button-icon {
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.home .button-icon {
|
||||
path, line, polyline, rect, circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&.trash .button-icon {
|
||||
background: rgba($red, 0.1);
|
||||
|
||||
&.trash .button-icon {
|
||||
background: rgba($red, 0.1);
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
&.settings .button-icon {
|
||||
background: rgba($purple, 0.1);
|
||||
|
||||
&.settings .button-icon {
|
||||
background: rgba($purple, 0.1);
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
&.user .button-icon {
|
||||
background: rgba($pink, 0.1);
|
||||
|
||||
&.user .button-icon {
|
||||
background: rgba($pink, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,28 @@
|
||||
<template>
|
||||
<div class="flex items-center leading-none">
|
||||
<MemberAvatar
|
||||
:size="52"
|
||||
:is-border="false"
|
||||
:member="user"
|
||||
/>
|
||||
<MemberAvatar :size="52" :is-border="false" :member="user" />
|
||||
<div class="pl-4">
|
||||
<b class="block font-bold mb-1 leading-none">
|
||||
{{ user.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="text-theme font-semibold text-sm leading-none">
|
||||
{{ user.data.attributes.email }}
|
||||
</span>
|
||||
<b class="mb-1 block font-bold leading-none">
|
||||
{{ user.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="text-theme text-sm font-semibold leading-none">
|
||||
{{ user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MemberAvatar from "../FilesView/MemberAvatar"
|
||||
import { mapGetters } from 'vuex'
|
||||
import MemberAvatar from '../FilesView/MemberAvatar'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UserHeadline',
|
||||
components: {
|
||||
MemberAvatar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
]),
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'UserHeadline',
|
||||
components: {
|
||||
MemberAvatar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user