lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-05-06 01:20:41 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

feat: button to remove profile image #1245 (#1246)
Docker Image CI / build-and-push-image (push) Has been cancelled
Details
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
Details
release-please / release-please (push) Has been cancelled
Details
test / test (18.x) (push) Has been cancelled
Details
test / test (20.x) (push) Has been cancelled
Details
test / test (22.x) (push) Has been cancelled
Details

Browse Source 
* Restored and updated UITabAccount.js, style.css
* Update UITabAccount.js

Closes: 1245
This commit is contained in:
EvaNtziou
2025-04-04 23:00:53 +03:00
committed by GitHub
parent 80060e863d
commit dad72c5bd7
2 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Settings/UITabAccount.js
+36 -4
View File
@@ -34,11 +34,27 @@ export default {
// h += `<h1>${i18n('account')}</h1>`;
// profile picture
h += `<div style="overflow: hidden; display: flex; margin-bottom: 20px; flex-direction: column; align-items: center;">`;
h += `<div class="profile-picture change-profile-picture" style="background-image: url('${html_encode(window.user?.profile?.picture ?? window.icons['profile.svg'])}');">`;
h += `</div>`;
h += `</div>`;
h += `<div style="overflow: hidden; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;">`;
// Profile Picture at the top
// Check if the user has uploaded a valid profile picture
const profilePicture = window.user?.profile?.picture && window.user.profile.picture !== ''
? window.user.profile.picture
: window.icons['profile.svg']; // Fallback to default profile.svg
h += `<div class="profile-picture" style="background-image: url('${html_encode(profilePicture)}'); width: 150px; height: 150px; border-radius: 50%; background-size: cover; background-position: center; margin-bottom: 10px; cursor: default; display: inline-block;">`;
h += `</div>`;
h += `</div>`;
h += `<div style="width: 100%; margin-bottom: 50px; display: flex; justify-content: center; align-items: center; gap: 10px;">`;
// Change Profile Picture Button
h += `<button class="button change-profile-picture" style="font-size: 14px; padding: 8px 15px;
display: flex; align-items: center; justify-content: center;">${i18n('Change Profile Picture')}</button>`;
// Delete Profile Picture Button
h += `<button class="button button-danger delete_Profile_Picture" style="font-size: 14px; padding: 8px 15px;
display: flex; align-items: center; justify-content: center; background-color: #e74c3c;">${i18n('Remove Profile Picture')}</button>`;
h += `</div>`;
// change password button
if(!window.user.is_temp){
h += `<div class="settings-card">`;
@@ -150,6 +166,22 @@ export default {
});
})
$el_window.find('.delete_Profile_Picture').on('click', async function (e) {
// Update the profile picture in the UI (set to a default image or placeholder)
window.user.profile.picture = window.icons['profile.svg'];
const defaultPicture = window.icons['profile.svg'];
$el_window.find('.profile-picture').css('background-image', `url('${html_encode(defaultPicture)}')`);
// Update the profile picture displayed on the page
$('.profile-picture').css('background-image', `url('${html_encode(defaultPicture)}')`);
$('.profile-image').addClass('profile-image-has-picture');
// update the global profile image display
$('.profile-image').css('background-image', `url('${html_encode(defaultPicture)}')`);
$('.profile-image').addClass('profile-image-has-picture');
});
$el_window.on('file_opened', async function(e){
let selected_file = Array.isArray(e.detail) ? e.detail[0] : e.detail;
// set profile picture
src/gui/src/css/style.css
-4
View File
@@ -3964,10 +3964,6 @@ fieldset[name=number-code] {
background-color: #c5cdd4;
}
.profile-picture:hover {
background-color: #a6afb7;
}
.profile-image-has-picture {
border: 1px solid white;
}