mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 12:36:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

upd: separate menu and change

Browse source
This commit is contained in:
Marie 2025-03-05 21:14:46 +01:00
parent daa449152d
commit 58f2ab6c8b
No known key found for this signature in database
GPG key ID: 7ADF6C9CD9A28555
1 changed files with 90 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

201
packages/frontend/src/pages/settings/profile.vue
View file

@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<div class="_panel"> <div class="_panel">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> <div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton> <MkButton primary rounded :class="$style.bannerEdit" @click="changeOrRemoveBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
<MkButton primary rounded :class="$style.backgroundEdit" @click="changeBackground">{{ i18n.ts._profile.changeBackground }}</MkButton> <MkButton primary rounded :class="$style.backgroundEdit" @click="changeOrRemoveBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
</div> </div>
<div :class="$style.avatarContainer"> <div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeAvatar"/> <MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeOrRemoveAvatar"/>
<div class="_buttonsCenter"> <div class="_buttonsCenter">
<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton> <MkButton primary rounded @click="changeOrRemoveAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton> <MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton>
</div> </div>
</div> </div>
@ -249,10 +249,6 @@ function save() {
} }
function changeAvatar(ev) { function changeAvatar(ev) {
if ($i.avatarId) {
os.popupMenu([{
text: i18n.ts._profile.updateAvatar,
action: async () => {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => { selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
let originalOrCropped = file; let originalOrCropped = file;
@ -276,7 +272,65 @@ function changeAvatar(ev) {
$i.avatarUrl = i.avatarUrl; $i.avatarUrl = i.avatarUrl;
globalEvents.emit('requestClearPageCache'); globalEvents.emit('requestClearPageCache');
}); });
}, }
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: 2,
});
}
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, text: i18n.ts._profile.removeAvatar,
action: async () => { action: async () => {
@ -289,62 +343,15 @@ function changeAvatar(ev) {
}, },
}], ev.currentTarget ?? ev.target); }], ev.currentTarget ?? ev.target);
} else { } else {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => { changeAvatar(ev);
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', {
avatarId: originalOrCropped.id,
});
$i.avatarId = i.avatarId;
$i.avatarUrl = i.avatarUrl;
globalEvents.emit('requestClearPageCache');
claimAchievement('profileFilled');
});
} }
} }
function changeBanner(ev) { function changeOrRemoveBanner(ev) {
if ($i.bannerId) { if ($i.bannerId) {
os.popupMenu([{ os.popupMenu([{
text: i18n.ts._profile.updateBanner, text: i18n.ts._profile.updateBanner,
action: async () => { action: () => 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');
});
},
}, { }, {
text: i18n.ts._profile.removeBanner, text: i18n.ts._profile.removeBanner,
action: async () => { action: async () => {
@ -357,61 +364,15 @@ function changeBanner(ev) {
}, },
}], ev.currentTarget ?? ev.target); }], ev.currentTarget ?? ev.target);
} else { } else {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => { changeBanner(ev);
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) { function changeOrRemoveBackground(ev) {
if ($i.backgroundId) { if ($i.backgroundId) {
os.popupMenu([{ os.popupMenu([{
text: i18n.ts._profile.updateBackground, text: i18n.ts._profile.updateBackground,
action: async () => { action: () => 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');
});
},
}, { }, {
text: i18n.ts._profile.removeBackground, text: i18n.ts._profile.removeBackground,
action: async () => { action: async () => {
@ -424,29 +385,7 @@ function changeBackground(ev) {
}, },
}], ev.currentTarget ?? ev.target); }], ev.currentTarget ?? ev.target);
} else { } else {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).then(async (file) => { changeBackground(ev);
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');
});
} }
} }