usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MkUploaderDialog.vue

This commit is contained in:
syuilo 2025-05-14 15:40:49 +09:00
parent 0f789a519f
commit 36725b3e8c
1 changed files with 74 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/frontend/src/components/MkUploaderDialog.vue
View File

@ -15,7 +15,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-upload"></i> {{ i18n.tsx.uploadNFiles({ n: files.length }) }} <i class="ti ti-upload"></i> {{ i18n.tsx.uploadNFiles({ n: files.length }) }}
</template> </template>
<div :class="$style.root" class="_gaps_s"> <div :class="$style.root">
<div :class="[$style.overallProgress, canRetry ? $style.overallProgressError : null]" :style="{ '--op': `${overallProgress}%` }"></div>
<div :class="$style.main" class="_gaps_s">
<div :class="$style.items" class="_gaps_s"> <div :class="$style.items" class="_gaps_s">
<div <div
v-for="ctx in items" v-for="ctx in items"
@ -63,6 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div> <div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div>
</div> </div>
</div>
<template #footer> <template #footer>
<div class="_buttonsCenter"> <div class="_buttonsCenter">
@ -149,6 +153,16 @@ const firstUploadAttempted = ref(false);
const isUploading = computed(() => items.value.some(item => item.uploading)); const isUploading = computed(() => items.value.some(item => item.uploading));
const canRetry = computed(() => firstUploadAttempted.value && !items.value.some(item => item.uploading || item.waiting) && items.value.some(item => item.uploaded == null)); const canRetry = computed(() => firstUploadAttempted.value && !items.value.some(item => item.uploading || item.waiting) && items.value.some(item => item.uploaded == null));
const canDone = computed(() => items.value.some(item => item.uploaded != null)); const canDone = computed(() => items.value.some(item => item.uploaded != null));
const overallProgress = computed(() => {
const max = items.value.length;
if (max === 0) return 0;
const v = items.value.reduce((acc, item) => {
if (item.uploaded) return acc + 1;
if (item.progress) return acc + (item.progress.value / item.progress.max);
return acc;
}, 0);
return Math.round((v / max) * 100);
});
const compressionLevel = ref<0 | 1 | 2 | 3>(2); const compressionLevel = ref<0 | 1 | 2 | 3>(2);
const compressionSettings = computed(() => { const compressionSettings = computed(() => {
@ -324,6 +338,25 @@ onMounted(() => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: relative;
}
.overallProgress {
position: absolute;
top: 0;
left: 0;
width: var(--op);
height: 4px;
background: var(--MI_THEME-accent);
border-radius: 0 999px 999px 0;
transition: width 0.2s ease;
&.overallProgressError {
background: var(--MI_THEME-warn);
}
}
.main {
padding: 12px; padding: 12px;
} }