MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-30 20:23:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-progress

Browse Source
This commit is contained in:
pa
2026-01-13 11:14:00 +09:00
committed by Natsumi
parent 0daef0c220
commit f077fcfd51
10 changed files with 129 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -345,17 +345,9 @@
:disabled="avatarDialog.galleryLoading"
class="ml-1"
@click="displayAvatarGalleryUpload">
<Spinner v-if="avatarDialog.galleryLoading" />
<Upload v-else />
<Upload />
{{ t('dialog.screenshot_metadata.upload') }}
</Button>
<el-progress
v-if="avatarDialog.galleryLoading"
:show-text="false"
:indeterminate="true"
:percentage="100"
:stroke-width="3"
style="margin: 10px 0" />
<div class="mt-2 w-[80%] ml-20">
<Carousel v-if="avatarDialog.galleryImages.length" class="w-full">
<CarouselContent class="h-50">
@@ -543,7 +535,6 @@
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -1092,14 +1083,17 @@
try {
avatarDialog.value.galleryLoading = true;
const base64Body = btoa(r.result.toString());
avatarRequest
.uploadAvatarGalleryImage(base64Body, avatarDialog.value.id)
.then(async (args) => {
toast.success(t('message.avatar_gallery.uploaded'));
console.log(args);
avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
return args;
})
const uploadPromise = (async () => {
const args = await avatarRequest.uploadAvatarGalleryImage(base64Body, avatarDialog.value.id);
avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
return args;
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
uploadPromise
.catch((error) => {
console.error('Failed to upload image', error);
})

23
src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
View File

@@ -13,13 +13,6 @@
accept="image/*"
style="display: none"
@change="onFileChangeAvatarImage" />
<el-progress
v-if="changeAvatarImageDialogLoading"
:show-text="false"
:indeterminate="true"
:percentage="100"
:stroke-width="3"
style="margin-bottom: 12px" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button
@@ -27,8 +20,7 @@
size="icon-sm"
:disabled="changeAvatarImageDialogLoading"
@click="uploadAvatarImage">
<Spinner v-if="changeAvatarImageDialogLoading" />
<Upload v-else />
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
@@ -41,7 +33,6 @@
<script setup>
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { Upload } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
@@ -114,7 +105,7 @@
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
try {
const uploadPromise = (async () => {
const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
// 10MB
if (LINUX) {
@@ -124,6 +115,14 @@
return;
}
await initiateUploadLegacy(base64File, file);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
try {
await uploadPromise;
} catch (error) {
console.error('avatar image upload process failed:', error);
} finally {
@@ -286,7 +285,6 @@
function avatarImageSet(args) {
changeAvatarImageDialogLoading.value = false;
if (args.json.imageUrl === args.params.imageUrl) {
toast.success(t('message.avatar.image_changed'));
emit('update:previousImageUrl', args.json.imageUrl);
} else {
$throw(0, 'avatar image change failed', args.params.imageUrl);
@@ -305,7 +303,6 @@
const ref = applyAvatar(avatarArgs.json);
changeAvatarImageDialogLoading.value = false;
emit('update:previousImageUrl', ref.imageUrl);
toast.success(t('message.avatar.image_changed'));
// closeDialog();
}

4
src/components/dialogs/VRCXUpdateDialog.vue
View File

@@ -8,7 +8,8 @@
width="400px">
<div v-loading="checkingForVRCXUpdate" style="margin-top: 15px">
<template v-if="updateInProgress">
<el-progress :percentage="updateProgress" :format="updateProgressText"></el-progress>
<Progress :model-value="updateProgress" class="w-full" />
<div class="mt-2 text-xs" v-text="updateProgressText()"></div>
<br />
</template>
<template v-else>
@@ -73,6 +74,7 @@
<script setup>
import { nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

23
src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
View File

@@ -13,18 +13,10 @@
accept="image/*"
style="display: none"
@change="onFileChangeWorldImage" />
<el-progress
v-if="changeWorldImageDialogLoading"
:show-text="false"
:indeterminate="true"
:percentage="100"
:stroke-width="3"
style="margin-bottom: 12px" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
<Spinner v-if="changeWorldImageDialogLoading" />
<Upload v-else />
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
@@ -37,7 +29,6 @@
<script setup>
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { Upload } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
@@ -110,11 +101,19 @@
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
try {
const uploadPromise = (async () => {
const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
// 10MB
await initiateUploadLegacy(base64File, file);
// await initiateUpload(base64File);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
try {
await uploadPromise;
} catch (error) {
console.error('World image upload process failed:', error);
} finally {
@@ -277,7 +276,6 @@
function worldImageSet(args) {
changeWorldImageDialogLoading.value = false;
if (args.json.imageUrl === args.params.imageUrl) {
toast.success(t('message.world.image_changed'));
emit('update:previousImageUrl', args.json.imageUrl);
} else {
$throw(0, 'World image change failed', args.params.imageUrl);
@@ -296,7 +294,6 @@
const ref = applyWorld(worldArgs.json);
changeWorldImageDialogLoading.value = false;
emit('update:previousImageUrl', ref.imageUrl);
toast.success(t('message.world.image_changed'));
// closeDialog();
}