upd: separate menu and change
This commit is contained in:
Marie
parent
daa449152d
commit
58f2ab6c8b
1 changed files with 90 additions and 151 deletions
|
|
@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps_m">
|
||||
<div class="_panel">
|
||||
<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.backgroundEdit" @click="changeBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
|
||||
<MkButton primary rounded :class="$style.bannerEdit" @click="changeOrRemoveBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
<MkButton primary rounded :class="$style.backgroundEdit" @click="changeOrRemoveBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -249,34 +249,88 @@ 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.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');
|
||||
});
|
||||
}
|
||||
|
||||
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: async () => {
|
||||
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.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');
|
||||
});
|
||||
},
|
||||
action: () => changeAvatar(ev),
|
||||
}, {
|
||||
text: i18n.ts._profile.removeAvatar,
|
||||
action: async () => {
|
||||
|
|
@ -289,62 +343,15 @@ function changeAvatar(ev) {
|
|||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
} else {
|
||||
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.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');
|
||||
});
|
||||
changeAvatar(ev);
|
||||
}
|
||||
}
|
||||
|
||||
function changeBanner(ev) {
|
||||
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 () => {
|
||||
|
|
@ -357,61 +364,15 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
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 () => {
|
||||
|
|
@ -424,29 +385,7 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue