feat: add custom avatar functionality (#248)

Co-authored-by: Dante Bradshaw <plansuperior@gmail.com>
This commit is contained in:
Miguel Ribeiro
2024-03-24 16:12:44 +01:00
committed by GitHub
co-authored by Dante Bradshaw
parent 40bcf3485e
commit 1dbebd3918
22 changed files with 387 additions and 41 deletions
+23 -14
View File
@@ -13,31 +13,40 @@
<header>
<h2><?= translate('user_details', $i18n) ?></h2>
</header>
<form action="endpoints/user/saveuser.php" method="post" id="userForm">
<form action="endpoints/user/saveuser.php" method="post" id="userForm" enctype="multipart/form-data">
<div class="user-form">
<div class="fields">
<div>
<div class="user-avatar">
<img src="images/avatars/<?= $userData['avatar'] ?>.svg" alt="avatar" class="avatar" id="avatarImg" onClick="toggleAvatarSelect()"/>
<img src="<?= $userData['avatar'] ?>" alt="avatar" class="avatar" id="avatarImg" onClick="toggleAvatarSelect()"/>
<span class="edit-avatar" onClick="toggleAvatarSelect()">
<img src="images/siteicons/editavatar.png" title="Change avatar" />
</span>
</div>
<input type="hidden" name="avatar" value="<?= $userData['avatar'] ?>" id="avatarUser"/>
<div class="avatar-select" id="avatarSelect">
<div class="avatar-list">
<img src="images/avatars/0.svg" onClick="changeAvatar(0)" />
<img src="images/avatars/1.svg" onClick="changeAvatar(1)" />
<img src="images/avatars/2.svg" onClick="changeAvatar(2)" />
<img src="images/avatars/3.svg" onClick="changeAvatar(3)" />
<img src="images/avatars/4.svg" onClick="changeAvatar(4)" />
<img src="images/avatars/5.svg" onClick="changeAvatar(5)" />
<img src="images/avatars/6.svg" onClick="changeAvatar(6)" />
<img src="images/avatars/7.svg" onClick="changeAvatar(7)" />
<img src="images/avatars/8.svg" onClick="changeAvatar(8)" />
<img src="images/avatars/9.svg" onClick="changeAvatar(9)" />
<?php foreach (scandir('images/avatars') as $index => $image) :?>
<?php if (! str_starts_with($image, '.')) :?>
<img src="images/avatars/<?=$image?>" alt="<?=$image?>" class="avatar-option" data-src="images/avatars/<?=$image?>"/>
<?php endif ?>
<?php endforeach ?>
<?php foreach (scandir('images/uploads/logos/avatars') as $index => $image) :?>
<?php if (! str_starts_with($image, '.')) :?>
<div class="avatar-container" data-src="<?=$image?>">
<img src="images/uploads/logos/avatars/<?=$image?>" alt="<?=$image?>" class="avatar-option" data-src="images/uploads/logos/avatars/<?=$image?>"/>
<div class="remove-avatar" onclick="deleteAvatar('<?=$image?>')" title="Delete avatar">
<i class="fa-solid fa-xmark"></i>
</div>
</div>
<?php endif ?>
<?php endforeach ?>
<label for="profile_pic" class="add-avatar" title="<?= translate('upload_avatar', $i18n) ?>">
<i class="fa-solid fa-arrow-up-from-bracket"></i>
</label>
</div>
<input type="file" id="profile_pic"class="hidden-input" name="profile_pic" accept="image/jpeg, image/png, image/gif, image/webp" onChange="successfulUpload(this, '<?= translate('file_type_error', $i18n) ?>')" />
</div>
</div>
<div class="grow">
@@ -619,4 +628,4 @@
<?php
require_once 'includes/footer.php';
?>
?>