jormungandr-bite/src/client/ui/_common_/upload.vue

<template>
<div class="mk-uploader _acrylic">
	<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"><Fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
				<p class="status">
					<span class="initing" v-if="ctx.progressValue === undefined">{{ $t('waiting') }}<MkEllipsis/></span>
					<span class="kb" v-if="ctx.progressValue !== undefined">{{ 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 class="percentage" v-if="ctx.progressValue !== undefined">{{ 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 { faSpinner } from '@fortawesome/free-solid-svg-icons';
import * as os from '@/os';

export default defineComponent({
	data() {
		return {
			uploads: os.uploads,
			faSpinner
		};
	},
});
</script>

<style lang="scss" scoped>
.mk-uploader {
	position: fixed;
	z-index: 10000;
	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 > [data-icon] {
  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>