slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed unread dot in wrong place

Browse Source
This commit is contained in:
slawk0
2024-09-17 17:18:37 +02:00
parent d22e6e6fc6
commit a21dcd681e
2 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/js/chat.js
View File

@@ -104,7 +104,6 @@ async function initializeSocket() {
if (contactItem) { if (contactItem) {
const unreadIndicator = contactItem.querySelector('.unread-indicator'); const unreadIndicator = contactItem.querySelector('.unread-indicator');
unreadIndicator.style.display = 'inline'; unreadIndicator.style.display = 'inline';
unreadIndicator.textContent = '•'; // or any other indicator you prefer
} }
if (!addedContacts.has(username)) { if (!addedContacts.has(username)) {
socket.emit('contacts', username); socket.emit('contacts', username);
@@ -180,6 +179,13 @@ async function initializeSocket() {
const contact = document.createElement('li'); const contact = document.createElement('li');
contact.className = 'contact-item'; contact.className = 'contact-item';
const leftWrapper = document.createElement('div');
leftWrapper.className = 'left-wrapper';
const unreadIndicator = document.createElement('span');
unreadIndicator.className = 'unread-indicator';
unreadIndicator.textContent = '•';
const usernameSpan = document.createElement('span'); const usernameSpan = document.createElement('span');
usernameSpan.textContent = contactUsername; usernameSpan.textContent = contactUsername;
usernameSpan.className = 'contact-username'; usernameSpan.className = 'contact-username';
@@ -188,15 +194,11 @@ async function initializeSocket() {
removeButton.textContent = 'X'; removeButton.textContent = 'X';
removeButton.className = 'remove-contact'; removeButton.className = 'remove-contact';
const unreadIndicator = document.createElement('span');
unreadIndicator.className = 'unread-indicator';
if(status === "unread") { if(status === "unread") {
unreadIndicator.style.display = 'inline'; unreadIndicator.style.display = 'inline';
} else { } else {
unreadIndicator.style.display = 'none'; unreadIndicator.style.display = 'none';
} }
unreadIndicator.textContent = '•';
removeButton.addEventListener('click', (e) => { removeButton.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
@@ -206,9 +208,10 @@ async function initializeSocket() {
addedContacts.delete(contactUsername); addedContacts.delete(contactUsername);
}); });
leftWrapper.appendChild(unreadIndicator);
contact.appendChild(usernameSpan); contact.appendChild(usernameSpan);
contact.appendChild(leftWrapper);
contact.appendChild(removeButton); contact.appendChild(removeButton);
contact.appendChild(unreadIndicator);
contact.addEventListener('click', () => { contact.addEventListener('click', () => {
currentRecipient = contactUsername; currentRecipient = contactUsername;

34
frontend/stylesheet/chat.css
View File

@@ -147,10 +147,32 @@ button:hover {
color: red; color: red;
margin: 0 10px; margin: 0 10px;
} }
.unread {
height: 5px; .contact-item {
width: 5px; display: flex;
background-color: #bbb; align-items: center;
border-radius: 50%; justify-content: space-between;
display: inline-block; padding: 5px;
margin-bottom: 5px;
}
.contact-username {
flex-grow: 1;
margin-right: 10px; /* Increased space between username and remove button */
}
.remove-contact {
margin-right: 5px; /* Space between remove button and unread indicator */
}
.unread-indicator {
/*font-size: 20px;*/
display: flex;
align-items: center; /* Vertical centering */
height: 100%; /* Match height of parent */
}
.right-wrapper {
display: flex;
align-items: center;
} }