nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-29 19:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend update

Browse Source
This commit is contained in:
carodej
2020-06-03 10:58:44 +02:00
parent 331ee52ea3
commit ca14838212
60 changed files with 1871 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Profile.vue
+170
View File
@@ -0,0 +1,170 @@
<template>
<div id="single-page">
<div id="page-content" class="medium-width" v-if="! isLoading">
<MobileHeader :title="$router.currentRoute.meta.title"/>
<PageHeader :title="$router.currentRoute.meta.title"/>
<div class="content-page">
<!--User thumbnail-->
<div class="user-thumbnail">
<div class="avatar">
<UserImageInput
v-model="avatar"
:avatar="profile.data.attributes.avatar"
/>
</div>
<div class="info">
<b class="name">{{ profile.data.attributes.name }}</b>
<span class="email">{{ profile.data.attributes.email }}</span>
</div>
</div>
<!--Page Tab links-->
<div class="menu-list-wrapper horizontal">
<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
<div class="icon">
<user-icon size="17"></user-icon>
</div>
<div class="label">
{{ $t('menu.profile') }}
</div>
</router-link>
<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon">
<hard-drive-icon size="17"></hard-drive-icon>
</div>
<div class="label">
{{ $t('menu.storage') }}
</div>
</router-link>
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
<div class="icon">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
Invoices
</div>
</router-link>
<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
<div class="icon">
<lock-icon size="17"></lock-icon>
</div>
<div class="label">
{{ $t('menu.password') }}
</div>
</router-link>
<!--<router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name" class="menu-list-item link">
<div class="icon">
<trash2-icon size="17"></trash2-icon>
</div>
<div class="label">
{{ $t('admin_page_user.tabs.delete') }}
</div>
</router-link>-->
</div>
<!--Router Content-->
<router-view :user="profile" />
</div>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
</div>
</template>
<script>
import UserImageInput from '@/components/Others/UserImageInput'
import MobileHeader from '@/components/Mobile/MobileHeader'
import PageHeader from '@/components/Others/PageHeader'
import Spinner from '@/components/FilesView/Spinner'
import axios from 'axios'
import {
HardDriveIcon,
FileTextIcon,
UserIcon,
LockIcon,
} from 'vue-feather-icons'
export default {
name: 'Settings',
components: {
UserImageInput,
FileTextIcon,
MobileHeader,
PageHeader,
Spinner,
HardDriveIcon,
UserIcon,
LockIcon,
},
data() {
return {
avatar: undefined,
profile: undefined,
isLoading: true,
}
},
created() {
axios.get('/api/profile')
.then(response => {
this.profile = response.data
this.isLoading = false
})
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.user-thumbnail {
display: flex;
align-items: center;
cursor: pointer;
.avatar {
margin-right: 20px;
img {
line-height: 0;
width: 62px;
height: 62px;
border-radius: 12px;
}
}
.info {
.name {
display: block;
@include font-size(17);
line-height: 1;
}
.email {
color: $text-muted;
@include font-size(14);
}
}
}
@media (prefers-color-scheme: dark) {
.user-thumbnail {
.info {
.email {
color: $dark_mode_text_secondary;
}
}
}
}
</style>