diff --git a/locales/index.d.ts b/locales/index.d.ts index 27c8a36842..f125a9fa53 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -9064,6 +9064,14 @@ export interface Locale extends ILocale { * フォローを承認制にしている場合、フォローリクエストを許可した時に表示されます。 */ "followedMessageDescriptionForLockedAccount": string; + /** + * Update avatar + */ + "updateAvatar": string; + /** + * Remove avatar + */ + "removeAvatar": string; /** * Update banner */ diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index 337cbfc532..67ba833c5c 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
- {{ i18n.ts._profile.changeBanner }} - {{ i18n.ts._profile.changeBackground }} + {{ i18n.ts._profile.changeBanner }} + {{ i18n.ts._profile.changeBackground }}
- +
- {{ i18n.ts._profile.changeAvatar }} + {{ i18n.ts._profile.changeAvatar }} {{ i18n.ts.decorate }}
@@ -271,39 +271,88 @@ function changeAvatar(ev) { $i.avatarId = i.avatarId; $i.avatarUrl = i.avatarUrl; globalEvents.emit('requestClearPageCache'); - claimAchievement('profileFilled'); }); } 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.cropImage(file, { + aspectRatio: 2, + }); + } + + const i = await os.apiWithDialog('i/update', { + bannerId: originalOrCropped.id, + }); + $i.bannerId = i.bannerId; + $i.bannerUrl = i.bannerUrl; + globalEvents.emit('requestClearPageCache'); + }); +} + +function changeBackground(ev) { + selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).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.cropImage(file, { + aspectRatio: 1, + }); + } + + const i = await os.apiWithDialog('i/update', { + backgroundId: originalOrCropped.id, + }); + $i.backgroundId = i.backgroundId; + $i.backgroundUrl = i.backgroundUrl; + globalEvents.emit('requestClearPageCache'); + }); +} + +function changeOrRemoveAvatar(ev) { + if ($i.avatarId) { + os.popupMenu([{ + text: i18n.ts._profile.updateAvatar, + action: () => changeAvatar(ev), + }, { + text: i18n.ts._profile.removeAvatar, + action: async () => { + const i = await os.apiWithDialog('i/update', { + avatarId: null, + }); + $i.avatarId = i.avatarId; + $i.avatarUrl = i.avatarUrl; + globalEvents.emit('requestClearPageCache'); + }, + }], ev.currentTarget ?? ev.target); + } else { + changeAvatar(ev); + claimAchievement('profileFilled'); + } +} + +function changeOrRemoveBanner(ev) { if ($i.bannerId) { os.popupMenu([{ text: i18n.ts._profile.updateBanner, - action: async () => { - 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.cropImage(file, { - aspectRatio: 2, - }); - } - - const i = await os.apiWithDialog('i/update', { - bannerId: originalOrCropped.id, - }); - $i.bannerId = i.bannerId; - $i.bannerUrl = i.bannerUrl; - globalEvents.emit('requestClearPageCache'); - }); - }, + action: () => changeBanner(ev), }, { text: i18n.ts._profile.removeBanner, action: async () => { @@ -316,61 +365,16 @@ function changeBanner(ev) { }, }], ev.currentTarget ?? ev.target); } else { - 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.cropImage(file, { - aspectRatio: 2, - }); - } - - const i = await os.apiWithDialog('i/update', { - bannerId: originalOrCropped.id, - }); - $i.bannerId = i.bannerId; - $i.bannerUrl = i.bannerUrl; - globalEvents.emit('requestClearPageCache'); - }); + changeBanner(ev); + claimAchievement('profileFilled'); } } -function changeBackground(ev) { +function changeOrRemoveBackground(ev) { if ($i.backgroundId) { os.popupMenu([{ text: i18n.ts._profile.updateBackground, - action: async () => { - selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).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.cropImage(file, { - aspectRatio: 1, - }); - } - - const i = await os.apiWithDialog('i/update', { - backgroundId: originalOrCropped.id, - }); - $i.backgroundId = i.backgroundId; - $i.backgroundUrl = i.backgroundUrl; - globalEvents.emit('requestClearPageCache'); - }); - }, + action: () => changeBackground(ev), }, { text: i18n.ts._profile.removeBackground, action: async () => { @@ -383,29 +387,8 @@ function changeBackground(ev) { }, }], ev.currentTarget ?? ev.target); } else { - selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).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.cropImage(file, { - aspectRatio: 1, - }); - } - - const i = await os.apiWithDialog('i/update', { - backgroundId: originalOrCropped.id, - }); - $i.backgroundId = i.backgroundId; - $i.backgroundUrl = i.backgroundUrl; - globalEvents.emit('requestClearPageCache'); - }); + changeBackground(ev); + claimAchievement('profileFilled'); } } diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml index 9a41a9d762..7be3022f24 100644 --- a/sharkey-locales/en-US.yml +++ b/sharkey-locales/en-US.yml @@ -278,6 +278,8 @@ _widgets: _poll: multiple: "Multiple choices" _profile: + updateAvatar: "Update avatar" + removeAvatar: "Remove avatar" updateBanner: "Update banner" removeBanner: "Remove banner" changeBackground: "Change background"