mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 19:10:40 +00:00
v1.5-alpha.10
This commit is contained in:
carodej
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user