nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-27 18:40:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring part 3

Browse Source
This commit is contained in:
Peter Papp
2021-08-23 16:31:25 +02:00
parent 42210233dc
commit 527a0790e3
12 changed files with 441 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Admin.vue
+16 -7
View File
@@ -1,5 +1,8 @@
<template>
<section id="viewport">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
<!--Mobile Navigation-->
<MobileNavigation />
@@ -20,7 +23,7 @@
<div class="menu-list-wrapper vertical">
<router-link :to="{name: 'Dashboard'}" class="menu-list-item link">
<div class="icon text-theme">
<box-icon size="17"></box-icon>
<box-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.dashboard') }}
@@ -28,7 +31,7 @@
</router-link>
<router-link :to="{name: 'Users'}" class="menu-list-item link">
<div class="icon text-theme">
<users-icon size="17"></users-icon>
<users-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.users') }}
@@ -36,7 +39,7 @@
</router-link>
<router-link :to="{name: 'AppOthers'}" class="menu-list-item link">
<div class="icon text-theme">
<settings-icon size="17"></settings-icon>
<settings-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.settings') }}
@@ -44,7 +47,7 @@
</router-link>
<router-link :to="{name: 'Pages'}" class="menu-list-item link">
<div class="icon text-theme">
<monitor-icon size="17"></monitor-icon>
<monitor-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.pages') }}
@@ -66,7 +69,7 @@
<div class="menu-list-wrapper vertical">
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
<div class="icon text-theme">
<database-icon size="17"></database-icon>
<database-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.plans') }}
@@ -74,7 +77,7 @@
</router-link>
<router-link :to="{name: 'Invoices'}" class="menu-list-item link">
<div class="icon text-theme">
<file-text-icon size="17"></file-text-icon>
<file-text-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('admin_menu.invoices') }}
@@ -89,6 +92,8 @@
</template>
<script>
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
@@ -101,9 +106,13 @@
export default {
name: 'Settings',
computed: {
...mapGetters(['config']),
...mapGetters([
'config'
]),
},
components: {
FilePreview,
Spotlight,
SidebarNavigation,
MobileNavigation,
CreateLanguage,
resources/js/views/FileView/Components/NavigationPanel.vue → resources/js/views/FileView/Components/PanelNavigationFiles.vue
+1 -1
View File
@@ -105,7 +105,7 @@
import {mapGetters} from "vuex";
export default {
name: "NavigationPanel",
name: "PanelNavigationFiles",
components: {
UpgradeSidebarBanner,
TreeMenuNavigator,
resources/js/views/Platform.vue
+6 -16
View File
@@ -26,13 +26,13 @@
<!--Navigations-->
<MobileNavigation />
<SidebarNavigation />
<!--Others-->
<DragUI />
<!--Sidebar-->
<NavigationPanel />
<!--2 col Sidebars-->
<SidebarNavigation />
<PanelNavigationFiles />
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
<DesktopToolbar/>
@@ -59,7 +59,7 @@
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import DragUI from '/resources/js/components/FilesView/DragUI'
import NavigationPanel from "./FileView/Components/NavigationPanel"
import PanelNavigationFiles from "./FileView/Components/PanelNavigationFiles"
import {events} from '/resources/js/bus'
export default {
@@ -74,7 +74,7 @@
MobileNavigation,
ShareCreatePopup,
ProcessingPopup,
NavigationPanel,
PanelNavigationFiles,
RenameItemPopup,
ShareEditPopup,
DesktopToolbar,
@@ -90,11 +90,6 @@
}
},
methods: {
spotlightListener(e) {
if (e.key === 'k' && e.metaKey) {
events.$emit('spotlight:show');
}
},
contextMenu(event, item) {
events.$emit('context-menu:show', event, item)
},
@@ -103,12 +98,7 @@
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
window.addEventListener("keydown", this.spotlightListener);
},
destroyed() {
window.removeEventListener("keydown", this.spotlightListener);
}
}
}
</script>
resources/js/views/Profile.vue
+18 -90
View File
@@ -1,74 +1,14 @@
<template>
<section id="viewport">
<ContentSidebar>
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
<!--Settings-->
<ContentGroup title="Menu" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
<div class="icon text-theme">
<user-icon size="17"></user-icon>
</div>
<div class="label text-theme">
{{ $t('menu.profile') }}
</div>
</router-link>
<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon text-theme">
<hard-drive-icon size="17"></hard-drive-icon>
</div>
<div class="label text-theme">
{{ $t('menu.storage') }}
</div>
</router-link>
<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
<div class="icon text-theme">
<lock-icon size="17"></lock-icon>
</div>
<div class="label text-theme">
{{ $t('menu.password') }}
</div>
</router-link>
</div>
</ContentGroup>
<!--Subscription-->
<ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
<div class="icon text-theme">
<cloud-icon size="17"></cloud-icon>
</div>
<div class="label text-theme">
{{ $t('menu.subscription') }}
</div>
</router-link>
<router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
<div class="icon text-theme">
<credit-card-icon size="17"></credit-card-icon>
</div>
<div class="label text-theme">
{{ $t('menu.payment_cards') }}
</div>
</router-link>
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
<div class="icon text-theme">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label text-theme">
{{ $t('menu.invoices') }}
</div>
</router-link>
</div>
</ContentGroup>
</ContentSidebar>
<SidebarNavigation />
<PanelNavigationUser />
<div v-if="user" id="single-page">
<div id="page-content" class="medium-width" v-if="! isLoading">
<div v-if="! isLoading" id="page-content" class="medium-width">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<div class="content-page">
@@ -132,63 +72,51 @@
</template>
<script>
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
import CreatePersonaTokenPopup from '/resources/js/components/Others/CreatePersonaTokenPopup'
import TwoFactorSetupPopup from '/resources/js/components/Others/TwoFactorSetupPopup'
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import PanelNavigationUser from "./User/Components/PanelNavigationUser"
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import PageHeader from '/resources/js/components/Others/PageHeader'
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import Spinner from '/resources/js/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
import {
CreditCardIcon,
HardDriveIcon,
FileTextIcon,
CloudIcon,
UserIcon,
LockIcon,
KeyIcon,
} from 'vue-feather-icons'
export default {
name: 'Settings',
components: {
FilePreview,
Spotlight,
TwoFactorRecoveryCodesPopup,
CreatePersonaTokenPopup,
PanelNavigationUser,
TwoFactorSetupPopup,
ContentSidebar,
CreditCardIcon,
SidebarNavigation,
UserImageInput,
HardDriveIcon,
FileTextIcon,
MobileHeader,
ContentGroup,
ButtonBase,
ColorLabel,
PageHeader,
CloudIcon,
UserIcon,
LockIcon,
Spinner,
InfoBox,
KeyIcon,
},
computed: {
...mapGetters(['user', 'config']),
...mapGetters([
'user',
'config'
]),
subscriptionStatus() {
return this.user.data.attributes.subscription ? this.$t('global.premium') : this.$t('global.free')
},
subscriptionColor() {
return this.user.data.attributes.subscription ? 'green' : 'purple'
},
canShowSubscriptionSettings() {
return this.config.isSaaS && this.config.app_payments_active
},
canShowUpgradeWarning() {
return this.config.storageLimit && this.user.data.attributes.storage.used > 95
},
resources/js/views/User/Components/PanelNavigationUser.vue
+111
View File
@@ -0,0 +1,111 @@
<template>
<ContentSidebar>
<!--Settings-->
<ContentGroup title="Menu" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
<div class="icon text-theme">
<user-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.profile') }}
</div>
</router-link>
<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon text-theme">
<hard-drive-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.storage') }}
</div>
</router-link>
<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
<div class="icon text-theme">
<lock-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.password') }}
</div>
</router-link>
</div>
</ContentGroup>
<!--Subscription-->
<ContentGroup v-if="canShowSubscriptionSettings" :title="$t('user_subscription.title')" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
<div class="icon text-theme">
<cloud-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.subscription') }}
</div>
</router-link>
<router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
<div class="icon text-theme">
<credit-card-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.payment_cards') }}
</div>
</router-link>
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
<div class="icon text-theme">
<file-text-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('menu.invoices') }}
</div>
</router-link>
</div>
</ContentGroup>
</ContentSidebar>
</template>
<script>
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
import {mapGetters} from "vuex"
import {
CreditCardIcon,
HardDriveIcon,
FileTextIcon,
CloudIcon,
UserIcon,
LockIcon,
KeyIcon,
} from 'vue-feather-icons'
export default {
name: "PanelNavigationUser",
components: {
ContentSidebar,
CreditCardIcon,
ContentGroup,
HardDriveIcon,
FileTextIcon,
CloudIcon,
UserIcon,
LockIcon,
KeyIcon,
},
computed: {
...mapGetters([
'config',
'user',
]),
canShowSubscriptionSettings() {
return this.config.isSaaS && this.config.app_payments_active
},
}
}
</script>
<style scoped>
</style>