135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<template>
|
|
<div class="mk-uploader _acrylic" :style="{ zIndex }">
|
|
<ol v-if="uploads.length > 0">
|
|
<li v-for="ctx in uploads" :key="ctx.id">
|
|
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
|
|
<div class="top">
|
|
<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
|
|
<p class="status">
|
|
<span v-if="ctx.progressValue === undefined" class="initing">{{ $ts.waiting }}<MkEllipsis/></span>
|
|
<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
|
|
<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
|
|
</p>
|
|
</div>
|
|
<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import * as os from '@/os';
|
|
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
uploads: os.uploads,
|
|
zIndex: os.claimZIndex(true),
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mk-uploader {
|
|
position: fixed;
|
|
right: 16px;
|
|
width: 260px;
|
|
top: 32px;
|
|
padding: 16px 20px;
|
|
pointer-events: none;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
}
|
|
.mk-uploader:empty {
|
|
display: none;
|
|
}
|
|
.mk-uploader > ol {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.mk-uploader > ol > li {
|
|
display: grid;
|
|
margin: 8px 0 0 0;
|
|
padding: 0;
|
|
height: 36px;
|
|
width: 100%;
|
|
border-top: solid 8px transparent;
|
|
grid-template-columns: 36px calc(100% - 44px);
|
|
grid-template-rows: 1fr 8px;
|
|
column-gap: 8px;
|
|
box-sizing: content-box;
|
|
}
|
|
.mk-uploader > ol > li:first-child {
|
|
margin: 0;
|
|
box-shadow: none;
|
|
border-top: none;
|
|
}
|
|
.mk-uploader > ol > li > .img {
|
|
display: block;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
grid-column: 1/2;
|
|
grid-row: 1/3;
|
|
}
|
|
.mk-uploader > ol > li > .top {
|
|
display: flex;
|
|
grid-column: 2/3;
|
|
grid-row: 1/2;
|
|
}
|
|
.mk-uploader > ol > li > .top > .name {
|
|
display: block;
|
|
padding: 0 8px 0 0;
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex-shrink: 1;
|
|
}
|
|
.mk-uploader > ol > li > .top > .name > i {
|
|
margin-right: 4px;
|
|
}
|
|
.mk-uploader > ol > li > .top > .status {
|
|
display: block;
|
|
margin: 0 0 0 auto;
|
|
padding: 0;
|
|
font-size: 0.8em;
|
|
flex-shrink: 0;
|
|
}
|
|
.mk-uploader > ol > li > .top > .status > .initing {
|
|
}
|
|
.mk-uploader > ol > li > .top > .status > .kb {
|
|
}
|
|
.mk-uploader > ol > li > .top > .status > .percentage {
|
|
display: inline-block;
|
|
width: 48px;
|
|
text-align: right;
|
|
}
|
|
.mk-uploader > ol > li > .top > .status > .percentage:after {
|
|
content: '%';
|
|
}
|
|
.mk-uploader > ol > li > progress {
|
|
display: block;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
grid-column: 2/3;
|
|
grid-row: 2/3;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 8px;
|
|
}
|
|
.mk-uploader > ol > li > progress::-webkit-progress-value {
|
|
background: var(--accent);
|
|
}
|
|
.mk-uploader > ol > li > progress::-webkit-progress-bar {
|
|
//background: var(--accentAlpha01);
|
|
background: transparent;
|
|
}
|
|
</style>
|