mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-24 21:54:42 +00:00
storage page refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="label">
|
||||
<span :class="['label-dot', color]"></span>
|
||||
<b class="label-title">
|
||||
{{ title }}
|
||||
</b>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DotLabel',
|
||||
props: [
|
||||
'color',
|
||||
'title',
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label-dot {
|
||||
margin-right: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
|
||||
&.success {
|
||||
background: #0ABB87;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: red;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="progress-wrapper">
|
||||
<div class="chart">
|
||||
<div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
|
||||
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
||||
<span :class="['chart-progress', chart.color]"></span>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" />
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DotLabel from "./DotLabel";
|
||||
|
||||
export default {
|
||||
name: 'ProgressLine',
|
||||
props: [
|
||||
'data',
|
||||
],
|
||||
components: {
|
||||
DotLabel
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.progress-wrapper {
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.chart-wrapper {
|
||||
|
||||
.label {
|
||||
justify-content: flex-end;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.offset-top {
|
||||
//@include transform(translateY(50px));
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.chart-progress {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-progress {
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
.chart-progress {
|
||||
border-bottom-right-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
display: block;
|
||||
|
||||
&.success {
|
||||
background: #0ABB87;
|
||||
box-shadow: 0 3px 10px rgba(#0ABB87, 0.5);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
<div class="form-label">
|
||||
<edit-2-icon v-if="!icon" size="22" class="icon text-theme dark-text-theme" />
|
||||
<settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme dark-text-theme" />
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="icon text-theme dark-text-theme" />
|
||||
<smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme dark-text-theme" />
|
||||
<key-icon v-if="icon === 'key'" size="22" class="icon text-theme dark-text-theme" />
|
||||
<b class="label">
|
||||
@@ -12,6 +13,7 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
HardDriveIcon,
|
||||
KeyIcon,
|
||||
Edit2Icon,
|
||||
SettingsIcon,
|
||||
@@ -25,6 +27,7 @@
|
||||
KeyIcon,
|
||||
Edit2Icon,
|
||||
SettingsIcon,
|
||||
HardDriveIcon,
|
||||
SmartphoneIcon,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
<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>
|
||||
<music-icon v-if="type == 'audios'" size="23"></music-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 '/resources/js/components/FilesView/ProgressBar'
|
||||
import { ImageIcon, VideoIcon, FileTextIcon, FileIcon, HardDriveIcon, MusicIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'StorageItemDetail',
|
||||
props: ['percentage', 'title', 'type', 'used'],
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
FileTextIcon,
|
||||
ProgressBar,
|
||||
MusicIcon,
|
||||
VideoIcon,
|
||||
ImageIcon,
|
||||
FileIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.detail-storage-item {
|
||||
margin-bottom: 35px;
|
||||
|
||||
&.disk {
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, polygon {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-progress {
|
||||
|
||||
/deep/ span {
|
||||
background: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.audios {
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, polygon {
|
||||
stroke: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-progress {
|
||||
|
||||
/deep/ span {
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.header-storage-item {
|
||||
.type {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.total-size {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-storage-item {
|
||||
|
||||
&.others, &.disk {
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, polygon {
|
||||
stroke: lighten($dark_mode_foreground, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.storage-progress {
|
||||
|
||||
/deep/ span {
|
||||
background: lighten($dark_mode_foreground, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user