jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add initial profile background image handling

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-25 15:05:08 +01:00
parent 1f8cdbaf62
commit 23dd575ce1
6 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/ProfileView.vue
+18 -2
View File
@@ -117,6 +117,18 @@ async function onAvatarChanged(file) {
user.value.avatarUrl = u.toString();
}
async function onBackgroundChanged(file) {
await profileModel.setBackgroundImage(file);
await refreshProfile();
if (file) {
window.document.body.style.backgroundImage = `url('${user.value.backgroundImageUrl}')`;
window.document.body.classList.add('has-background');
} else {
window.document.body.style.backgroundImage = 'None';
window.document.body.classList.remove('has-background');
}
}
// Password changes
async function onPasswordChange() {
@@ -268,8 +280,12 @@ onMounted(async () => {
</template>
<div style="display: flex; flex-wrap: wrap">
<div style="width: 150px;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/appicon_fallback.png" size="512" @changed="onAvatarChanged" display-height="128px"/>
<div style="width: 150px; display: flex; flex-direction: column; justify-content: space-between;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" @changed="onAvatarChanged" display-width="128px"/>
<div>
<ImagePicker :src="user.backgroundImageUrl" fallback-src="/img/background-image-placeholder.svg" :max-size="1280" @changed="onBackgroundChanged" display-width="128px"/>
<div v-if="user.hasBackgroundImage" class="actionable" @click="onBackgroundChanged(null)">Clear</div>
</div>
</div>
<div style="flex-grow: 1;">
<SettingsItem>