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

v1.5-alpha.10

Browse Source
This commit is contained in:
carodej
2020-05-18 12:37:33 +02:00
parent dfe4991177
commit 633bef7660
13 changed files with 475 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+1 -1
View File
@@ -164,7 +164,7 @@
color: $dark_mode_text_primary;
img {
opacity: .8;
opacity: .95;
}
}
}
resources/js/components/Mobile/MenuItemList.vue
+6
View File
@@ -8,6 +8,8 @@
<power-icon v-if="link.icon === 'power'" size="17"></power-icon>
<settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
<upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
<user-icon v-if="link.icon === 'user'" size="17"></user-icon>
<lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
</div>
<b class="menu-link">
<span>{{ link.title }}</span>
@@ -26,6 +28,8 @@
Trash2Icon,
PowerIcon,
ShareIcon,
UserIcon,
LockIcon,
} from 'vue-feather-icons'
export default {
@@ -38,6 +42,8 @@
Trash2Icon,
PowerIcon,
ShareIcon,
LockIcon,
UserIcon,
},
props: [
'navigation'
resources/js/components/Others/SectionTitle.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<b class="text-label">
<slot></slot>
</b>
</template>
<script>
export default {
name: 'SectionTitle',
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.text-label {
@include font-size(12);
color: #AFAFAF;
font-weight: 700;
display: block;
margin-bottom: 20px;
}
@media only screen and (max-width: 1024px) {
}
@media (prefers-color-scheme: dark) {
.text-label {
color: $theme;
}
}
</style>
resources/js/components/Others/StorageitemDetail.vue
+184
View File
@@ -0,0 +1,184 @@
<template>
<article class="detail-storage-item" :class="type">
<div class="header-storage-item">
<div class="icon">
<image-icon v-if="type == 'images'" size="23"></image-icon>
<video-icon v-if="type == 'videos'" size="23"></video-icon>
<file-text-icon v-if="type == 'documents'" size="23"></file-text-icon>
<file-icon v-if="type == 'others'" size="23"></file-icon>
<hard-drive-icon v-if="type == 'disk'" size="23"></hard-drive-icon>
</div>
<div class="title">
<b class="type">{{ title }}</b>
<span class="total-size">{{ used }}</span>
</div>
</div>
<ProgressBar class="storage-progress" :progress="percentage" />
</article>
</template>
<script>
import ProgressBar from '@/components/FilesView/ProgressBar'
import { ImageIcon, VideoIcon, FileTextIcon, FileIcon, HardDriveIcon } from 'vue-feather-icons'
export default {
name: 'StorageItemDetail',
props: ['percentage', 'title', 'type', 'used'],
components: {
HardDriveIcon,
FileTextIcon,
ProgressBar,
VideoIcon,
ImageIcon,
FileIcon,
},
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.detail-storage-item {
margin-bottom: 35px;
&.disk {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: $theme;
}
}
.storage-progress {
/deep/ span {
background: $theme;
}
}
}
&.images {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: $purple;
}
}
.storage-progress {
/deep/ span {
background: $purple;
}
}
}
&.videos {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: $yellow;
}
}
.storage-progress {
/deep/ span {
background: $yellow;
}
}
}
&.documents {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: $red;
}
}
.storage-progress {
/deep/ span {
background: $red;
}
}
}
&.others {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: $text;
}
}
.storage-progress {
/deep/ span {
background: $text;
}
}
}
}
.header-storage-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
.icon {
width: 35px;
}
.type {
@include font-size(15);
color: $text;
}
.total-size {
@include font-size(10);
display: block;
color: $text-muted;
}
}
@media (prefers-color-scheme: dark) {
.header-storage-item {
.type {
color: $dark_mode_text_primary;
}
.total-size {
color: $dark_mode_text_secondary;
}
}
.detail-storage-item {
&.others {
.icon {
path, line, polyline, rect, circle, polygon {
stroke: lighten($dark_mode_foreground, 15%);
}
}
.storage-progress {
/deep/ span {
background: lighten($dark_mode_foreground, 15%);
}
}
}
}
}
</style>
resources/js/components/Sidebar/MenuBar.vue
+1 -1
View File
@@ -26,7 +26,7 @@
</div>
</router-link>
<router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password'])}" class="icon-navigation-item settings">
<router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password', 'Profile', 'Storage'])}" class="icon-navigation-item settings">
<div class="button-icon">
<settings-icon size="19"></settings-icon>
</div>
resources/js/router.js
Vendored
+10
View File
@@ -10,6 +10,7 @@ import CreateNewPassword from './views/Auth/CreateNewPassword'
import Settings from './views/Settings'
import Profile from './views/User/Profile'
import Storage from './views/User/Storage'
import Trash from './views/FilePages/Trash'
import Files from './views/FilePages/Files'
import Password from './views/User/Password'
@@ -120,6 +121,15 @@ const router = new Router({
title: 'Change Password'
},
},
{
name: 'Storage',
path: '/settings/storage',
component: Storage,
meta: {
requiresAuth: true,
title: 'Storage'
},
},
]
},
{
resources/js/views/Mobile/MobileSettings.vue
+7 -2
View File
@@ -25,15 +25,20 @@
return {
navigation: [
{
icon: 'hard-drive',
icon: 'user',
title: 'Profile Settings',
routeName: 'Profile',
},
{
icon: 'latest',
icon: 'lock',
title: 'Password',
routeName: 'Password',
},
{
icon: 'hard-drive',
title: 'Storage',
routeName: 'Storage',
},
]
}
},
resources/js/views/Settings.vue
+4 -2
View File
@@ -25,14 +25,14 @@
Password
</div>
</router-link>
<!--<router-link :to="{name: 'Profile'}" class="menu-list-item link">
<router-link :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon">
<hard-drive-icon size="17"></hard-drive-icon>
</div>
<div class="label">
Storage
</div>
</router-link>-->
</router-link>
</div>
</ContentGroup>
</ContentSidebar>
@@ -46,6 +46,7 @@
import ContentGroup from '@/components/Sidebar/ContentGroup'
import UserHeadline from '@/components/Sidebar/UserHeadline'
import {
HardDriveIcon,
UserIcon,
LockIcon,
} from 'vue-feather-icons'
@@ -54,6 +55,7 @@
name: 'Settings',
components: {
ContentSidebar,
HardDriveIcon,
UserHeadline,
ContentGroup,
UserIcon,
resources/js/views/User/Storage.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<div id="user-settings" v-if="app">
<MobileHeader/>
<PageHeader :title="$router.currentRoute.meta.title"/>
<div class="content-page">
<SectionTitle>Storage Capacity</SectionTitle>
<StorageItemDetail type="disk" :title="'Total used ' + storage.used" :percentage="storage.percentage" :used="storage.capacity"/>
<SectionTitle>Capacity Used Details</SectionTitle>
<StorageItemDetail type="images" title="Images" :percentage="storageDetails.images.percentage" :used="storageDetails.images.used" />
<StorageItemDetail type="videos" title="Videos" :percentage="storageDetails.videos.percentage" :used="storageDetails.videos.used" />
<StorageItemDetail type="documents" title="Documents" :percentage="storageDetails.documents.percentage" :used="storageDetails.documents.used" />
<StorageItemDetail type="others" title="Others" :percentage="storageDetails.others.percentage" :used="storageDetails.others.used" />
</div>
</div>
</template>
<script>
import StorageItemDetail from '@/components/Others/StorageItemDetail'
import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle'
import PageHeader from '@/components/Others/PageHeader'
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
name: 'Profile',
components: {
StorageItemDetail,
SectionTitle,
MobileHeader,
PageHeader,
},
computed: {
...mapGetters(['app']),
},
data() {
return {
storage: undefined,
storageDetails: undefined
}
},
created() {
axios.get('/api/user/storage')
.then(response => {
this.storage = response.data.data.attributes
this.storageDetails = response.data.data.relationships
})
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
#user-settings {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.content-page {
overflow-y: auto;
height: 100%;
padding-bottom: 100px;
max-width: 700px;
width: 100%;
margin: 0 auto;
}
}
@media only screen and (max-width: 960px) {
#user-settings {
.content-page {
padding-left: 15px;
padding-right: 15px;
}
}
}
@media (prefers-color-scheme: dark) {
}
</style>