From 0397a5046d4aec5d8a377b230ec2de0008c1a845 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 13 May 2025 17:44:59 +0900 Subject: [PATCH] wip --- .../src/components/MkCropperDialog.vue | 2 - .../components/MkUserSetupDialog.Profile.vue | 47 ++++--- .../frontend/src/pages/settings/profile.vue | 118 ++++++++++++------ 3 files changed, 105 insertions(+), 62 deletions(-) diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue index 06f3886253..5c3ca4ba51 100644 --- a/packages/frontend/src/components/MkCropperDialog.vue +++ b/packages/frontend/src/components/MkCropperDialog.vue @@ -71,8 +71,6 @@ const ok = async () => { }); }); - os.promiseDialog(promise); - const f = await promise; emit('ok', f); diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue index a0d7376c8e..c6e54dc376 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue @@ -67,33 +67,32 @@ watch(description, () => { }); }); -function setAvatar(ev) { - os.chooseFileFromPc({ multiple: false }).then(async (files) => { - const file = files[0]; +async function setAvatar(ev) { + const files = await os.chooseFileFromPc({ multiple: false }); + const file = files[0]; - let originalOrCropped = file; + let originalOrCropped = file; - const { canceled } = await os.confirm({ - type: 'question', - text: i18n.ts.cropImageAsk, - okText: i18n.ts.cropYes, - cancelText: i18n.ts.cropNo, - }); - - if (!canceled) { - originalOrCropped = await os.cropImageFile(file, { - aspectRatio: 1, - }); - } - - const driveFile = (await os.launchUploader([originalOrCropped], {}))[0]; - - const i = await os.apiWithDialog('i/update', { - avatarId: driveFile.id, - }); - $i.avatarId = i.avatarId; - $i.avatarUrl = i.avatarUrl; + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.cropImageAsk, + okText: i18n.ts.cropYes, + cancelText: i18n.ts.cropNo, }); + + if (!canceled) { + originalOrCropped = await os.cropImageFile(file, { + aspectRatio: 1, + }); + } + + const driveFile = (await os.launchUploader([originalOrCropped], {}))[0]; + + const i = await os.apiWithDialog('i/update', { + avatarId: driveFile.id, + }); + $i.avatarId = i.avatarId; + $i.avatarUrl = i.avatarUrl; } diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index 6ef93d36c0..3057cde76e 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -257,54 +257,100 @@ function save() { } function changeAvatar(ev) { - selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => { - let originalOrCropped = file; - - const { canceled } = await os.confirm({ - type: 'question', - text: i18n.ts.cropImageAsk, - okText: i18n.ts.cropYes, - cancelText: i18n.ts.cropNo, - }); - - if (!canceled) { - originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, { - aspectRatio: 1, - }); - } - + async function done(driveFile) { const i = await os.apiWithDialog('i/update', { - avatarId: originalOrCropped.id, + avatarId: driveFile.id, }); $i.avatarId = i.avatarId; $i.avatarUrl = i.avatarUrl; claimAchievement('profileFilled'); - }); + } + + os.popupMenu([{ + text: i18n.ts.avatar, + type: 'label', + }, { + text: i18n.ts.upload, + icon: 'ti ti-upload', + action: async () => { + const files = await os.chooseFileFromPc({ multiple: false }); + const file = files[0]; + + let originalOrCropped = file; + + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.cropImageAsk, + okText: i18n.ts.cropYes, + cancelText: i18n.ts.cropNo, + }); + + if (!canceled) { + originalOrCropped = await os.cropImageFile(file, { + aspectRatio: 1, + }); + } + + const driveFile = (await os.launchUploader([originalOrCropped], {}))[0]; + done(driveFile); + }, + }, { + text: i18n.ts.fromDrive, + icon: 'ti ti-cloud', + action: () => { + os.selectDriveFile(false).then(files => { + done(files[0]); + }); + }, + }], ev.currentTarget ?? ev.target); } function changeBanner(ev) { - selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => { - let originalOrCropped = file; - - const { canceled } = await os.confirm({ - type: 'question', - text: i18n.ts.cropImageAsk, - okText: i18n.ts.cropYes, - cancelText: i18n.ts.cropNo, - }); - - if (!canceled) { - originalOrCropped = await os.createCroppedImageDriveFileFromImageDriveFile(file, { - aspectRatio: 2, - }); - } - + async function done(driveFile) { const i = await os.apiWithDialog('i/update', { - bannerId: originalOrCropped.id, + bannerId: driveFile.id, }); $i.bannerId = i.bannerId; $i.bannerUrl = i.bannerUrl; - }); + } + + os.popupMenu([{ + text: i18n.ts.banner, + type: 'label', + }, { + text: i18n.ts.upload, + icon: 'ti ti-upload', + action: async () => { + const files = await os.chooseFileFromPc({ multiple: false }); + const file = files[0]; + + let originalOrCropped = file; + + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.cropImageAsk, + okText: i18n.ts.cropYes, + cancelText: i18n.ts.cropNo, + }); + + if (!canceled) { + originalOrCropped = await os.cropImageFile(file, { + aspectRatio: 2, + }); + } + + const driveFile = (await os.launchUploader([originalOrCropped], {}))[0]; + done(driveFile); + }, + }, { + text: i18n.ts.fromDrive, + icon: 'ti ti-cloud', + action: () => { + os.selectDriveFile(false).then(files => { + done(files[0]); + }); + }, + }], ev.currentTarget ?? ev.target); } const headerActions = computed(() => []);