Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: profile backgrounds

Browse source
This commit is contained in:
Mar0xy 2023-10-06 02:32:09 +02:00
parent 6dd0b88050
commit 4e64397635
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
14 changed files with 205 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,9 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
<MkButton primary rounded :class="$style.backgroundEdit" @click="changeBackground">Change Background</MkButton>
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manualSave>
<template #label>{{ i18n.ts._profile.name }}</template>
</MkInput>
@ -254,6 +256,31 @@ function changeBanner(ev) {
});
}
function changeBackground(ev) {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
let originalOrCropped = file;
const { canceled } = await os.confirm({
type: 'question',
text: i18n.t('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;
});
}
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
@ -292,6 +319,11 @@ definePageMetadata({
top: 16px;
right: 16px;
}
.backgroundEdit {
position: absolute;
top: 103px;
right: 16px;
}
.metadataRoot {
container-type: inline-size;