Hide user name on subsequent messages
This commit is contained in:
parent
9480c600f9
commit
819c16d02f
2 changed files with 25 additions and 17 deletions
|
|
@ -536,6 +536,9 @@ input:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: .4em;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
font-size: 0.92rem;
|
font-size: 0.92rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -582,7 +585,6 @@ input:focus {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-image-attachement {
|
.message-image-attachement {
|
||||||
|
|
|
||||||
34
ui.js
34
ui.js
|
|
@ -173,12 +173,18 @@ export const ui = {
|
||||||
generateMessage(msg, activeChatName, userID, chatId, isLocal = false) {
|
generateMessage(msg, activeChatName, userID, chatId, isLocal = false) {
|
||||||
const isOutgoing = msg.fromMe || msg.sender === 'me';
|
const isOutgoing = msg.fromMe || msg.sender === 'me';
|
||||||
|
|
||||||
|
function getPrevMessageElem() {
|
||||||
|
return elements.messagesContainer.lastElementChild;
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevMsgEl = getPrevMessageElem();
|
||||||
|
|
||||||
const groupDiv = document.createElement('div');
|
const groupDiv = document.createElement('div');
|
||||||
groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
|
groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
|
||||||
groupDiv.id = msg.id;
|
groupDiv.id = msg.id;
|
||||||
groupDiv.dataset.from = msg.participant || msg.from;
|
groupDiv.dataset.from = msg.participant || msg.from;
|
||||||
|
|
||||||
const senderName = isOutgoing ? userID : (msg._data.notifyName || activeChatName);
|
const senderName = isOutgoing ? userID : (msg._data.notifyName || msg.from);
|
||||||
const timeStr = formatTime(msg.timestamp || new Date());
|
const timeStr = formatTime(msg.timestamp || new Date());
|
||||||
|
|
||||||
let statusCheck = '';
|
let statusCheck = '';
|
||||||
|
|
@ -197,7 +203,15 @@ export const ui = {
|
||||||
const bubble = document.createElement('div');
|
const bubble = document.createElement('div');
|
||||||
bubble.className = 'message-bubble';
|
bubble.className = 'message-bubble';
|
||||||
|
|
||||||
if (!isOutgoing) {
|
let prevUid;
|
||||||
|
|
||||||
|
if (msg.participant) {
|
||||||
|
prevUid = msg.participant;
|
||||||
|
} else {
|
||||||
|
prevUid = msg.from;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isOutgoing && (!prevMsgEl || prevUid !== prevMsgEl.dataset.from)) {
|
||||||
const senderEl = document.createElement('span');
|
const senderEl = document.createElement('span');
|
||||||
senderEl.className = 'message-sender';
|
senderEl.className = 'message-sender';
|
||||||
senderEl.textContent = senderName;
|
senderEl.textContent = senderName;
|
||||||
|
|
@ -239,7 +253,8 @@ export const ui = {
|
||||||
const img = document.createElement('img');
|
const img = document.createElement('img');
|
||||||
img.classList.add('message-image-attachement');
|
img.classList.add('message-image-attachement');
|
||||||
img.src = objectUrl;
|
img.src = objectUrl;
|
||||||
a.appendChild(img);
|
bubble.after(img);
|
||||||
|
bubble.querySelector('.message-content').remove();
|
||||||
} else {
|
} else {
|
||||||
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
|
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
|
||||||
}
|
}
|
||||||
|
|
@ -261,13 +276,6 @@ export const ui = {
|
||||||
meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
|
meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
|
||||||
|
|
||||||
bubble.appendChild(meta);
|
bubble.appendChild(meta);
|
||||||
let uid = "";
|
|
||||||
|
|
||||||
function getPrevMessageElem() {
|
|
||||||
return elements.messagesContainer.lastElementChild;
|
|
||||||
}
|
|
||||||
|
|
||||||
const prevMsgEl = getPrevMessageElem();
|
|
||||||
|
|
||||||
if (isOutgoing) {
|
if (isOutgoing) {
|
||||||
if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
|
if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
|
||||||
|
|
@ -275,13 +283,11 @@ export const ui = {
|
||||||
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
||||||
}
|
}
|
||||||
} else if (msg.participant) {
|
} else if (msg.participant) {
|
||||||
uid = msg.participant;
|
if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
|
||||||
if (!prevMsgEl || uid !== prevMsgEl.dataset.from) {
|
|
||||||
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uid = msg.from;
|
if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
|
||||||
if (!prevMsgEl || uid !== prevMsgEl.dataset.from) {
|
|
||||||
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue