Skip to content

Create Edit Mode for Profile #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JSKitty merged 1 commit into from
Apr 5, 2026
Merged

Create Edit Mode for Profile #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/icons/add-photo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/icons/edit-x.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/icons/save.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 59 additions & 36 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,60 +546,83 @@ <h4>Recent Activity</h4>
<div class="profile-header-info">
<div class="profile-header-name-row">
<div id="profile-header-avatar-container"></div>
<h3 id="profile-name" class="cutoff chat-contact-with-status btn"></h3>
<h3 id="profile-name" class="cutoff chat-contact-with-status"></h3>
</div>
<span id="profile-status" class="cutoff chat-contact-status"></span>
</div>
<div id="profile-edit-bar" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; padding: 0 20px; background-color: rgba(22,22,22,0.95);">
<div id="profile-edit-cancel-btn">
<span class="icon icon-edit-x"></span>
<span>Exit</span>
</div>
<span id="profile-edit-mode-label" style="font-size: 12px; opacity: 0.6; position: absolute; left: 50%; transform: translateX(-50%);">Edit Mode is enabled.</span>
<div id="profile-edit-save-btn">
<span class="icon icon-save"></span>
<span>Save</span>
</div>
<span id="profile-status" class="cutoff chat-contact-status btn"></span>
</div>
</div>
<div class="profile-content">
<div style="position: relative;">
<div id="profile-banner-container" style="position: relative;">
<img id="profile-banner" class="profile-banner">
<div class="profile-banner-edit btn">
<span class="icon icon-edit"></span>
<div id="profile-edit-btn" class="profile-banner-edit profile-share-btn profile-option btn">
<span class="icon icon-edit navbar-icon"></span>
<p class="navbar-text">Edit</p>
</div>
<div id="profile-share-btn" class="profile-share-btn profile-option btn">
<span class="icon icon-share navbar-icon"></span>
<p class="navbar-text">Share</p>
</div>
<div class="profile-avatar-container">
<img id="profile-avatar" class="profile-avatar">
<div class="profile-avatar-edit btn">
<span class="icon icon-plus-circle"></span>
</div>
</div>
</div>
<div>
<h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
<span id="profile-secondary-status" class="cutoff chat-contact-status btn" style="width: 90%;"></span>
<div id="profile-badges" style="margin-top: 5px;"><img id="profile-badge-invites" src="./icons/vector_badge_hex_placeholder.svg" class="btn" style="height: 30px; width: 30px; display: none;"><img id="profile-badge-fawkes" src="./icons/fawkes_mask.svg" class="btn" style="height: 30px; width: 30px; margin-left: 5px; display: none;"></div>
<div id="profile-option-list" class="profile-options">
<div id="profile-option-message" class="profile-option">
<span class="icon icon-message navbar-icon"></span>
<p class="navbar-text">Message</p>
</div>
<div id="profile-option-mute" class="profile-option">
<span class="icon icon-volume-mute navbar-icon"></span>
<p class="navbar-text">Mute</p>
</div>
<div id="profile-option-share" class="profile-option">
<span class="icon icon-share navbar-icon"></span>
<p class="navbar-text">Share</p>
</div>
<div id="profile-option-more" class="profile-option btn" style="position: relative;">
<span class="icon icon-dots-horizontal navbar-icon"></span>
<p class="navbar-text">More</p>
<div id="profile-more-dropdown" class="profile-more-dropdown" style="display: none;">
<div id="profile-option-nickname" class="profile-more-item">
<span>Nickname</span>
<span class="icon icon-edit" style="width: 18px; height: 18px; background-color: white;"></span>
</div>
<div id="profile-option-block" class="profile-more-item">
<span style="color: #ff4444;">Block</span>
<span class="icon icon-x-user" style="width: 18px; height: 18px; background-color: #ff4444;"></span>
</div>
<h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
<span id="profile-secondary-status" class="cutoff chat-contact-status btn" style="width: 90%;"></span>
<div id="profile-edit-fields" style="display: none; flex-direction: column; gap: 12px; width: 90%; margin: 16px auto 0;">
<label class="profile-edit-label">Username</label>
<div class="profile-edit-field-wrapper">
<div id="profile-edit-name" class="profile-edit-field-text"></div>
</div>
<label class="profile-edit-label">Status</label>
<div class="profile-edit-field-wrapper">
<div id="profile-edit-status" class="profile-edit-field-text"></div>
</div>
<label class="profile-edit-label">Bio</label>
<div class="profile-edit-field-wrapper profile-edit-field-bio">
<div id="profile-edit-bio" class="profile-edit-field-text"></div>
</div>
</div>
<div id="profile-badges" style="margin-top: 5px;"><img id="profile-badge-invites" src="./icons/vector_badge_hex_placeholder.svg" class="btn" style="height: 30px; width: 30px; display: none;"><img id="profile-badge-fawkes" src="./icons/fawkes_mask.svg" class="btn" style="height: 30px; width: 30px; margin-left: 5px; display: none;"></div>
<div id="profile-option-list" class="profile-options">
<div id="profile-option-message" class="profile-option">
<span class="icon icon-message navbar-icon"></span>
<p class="navbar-text">Message</p>
</div>
<div id="profile-option-mute" class="profile-option">
<span class="icon icon-volume-mute navbar-icon"></span>
<p class="navbar-text">Mute</p>
</div>
<div id="profile-option-share" class="profile-option">
<span class="icon icon-share navbar-icon"></span>
<p class="navbar-text">Share</p>
</div>
<div id="profile-option-more" class="profile-option btn" style="position: relative;">
<span class="icon icon-dots-horizontal navbar-icon"></span>
<p class="navbar-text">More</p>
<div id="profile-more-dropdown" class="profile-more-dropdown" style="display: none;">
<div id="profile-option-nickname" class="profile-more-item">
<span>Nickname</span>
<span class="icon icon-edit" style="width: 18px; height: 18px; background-color: white;"></span>
</div>
<div id="profile-option-block" class="profile-more-item">
<span style="color: #ff4444;">Block</span>
<span class="icon icon-x-user" style="width: 18px; height: 18px; background-color: #ff4444;"></span>
</div>
</div>
</div>
</div>
<span id="profile-description" class="chat-contact-status" style="width: 90%; white-space: pre-line; overflow-wrap: break-word; font-style: normal; margin-top: 10px; text-align: center; display: block;"></span>
<textarea id="profile-description-editor" class="chat-contact-status profile-description-editor" style="display: none; margin-top: 10px;"></textarea>
<div style="margin: 40px 0 0 0; width: 90%; padding-left: 5%;">
Expand Down
Loading
Loading