4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

css_and_others_ok

Browse Source
This commit is contained in:
Pascal 2025-01-08 18:35:18 +01:00
parent b507d0b48b
commit 3b0f15fb5f
2 changed files with 27 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/style/chat.css
View File

@ -226,15 +226,9 @@ body {
} }
.message-container { .message-container {
max-width: 100%;
border-radius: 5px;
overflow-wrap: break-word;
word-wrap: break-word;
background-color: #f1f1f1;
display: flex; display: flex;
flex-direction: column; margin: 8px;
} }
.message-container .message { .message-container .message {
align-self: flex-start; align-self: flex-start;
} }
@ -246,27 +240,26 @@ body {
} }
.message { .message {
padding: 12px 18px;
background-color: #e1e1e1;
border-radius: 15px;
max-width: 70%; max-width: 70%;
font-size: 16px; padding: 10px;
line-height: 1.4; border-radius: 12px;
margin-bottom: 0%; background:var(--secondary-color);
white-space: pre-wrap; margin: 2px 0;
word-wrap: break-word;
position: relative;
display: inline-block;
} }
/* Messages de l'utilisateur */ /* Messages de l'utilisateur */
.message.user { .message.user {
background-color: #3498db; background: #2196f3;
color: white; color: white;
align-self: flex-end;
text-align: right;
} }
.message-time {
font-size: 0.8em;
opacity: 0.8;
margin-left: 8px;
}
/* Amélioration de l'esthétique des messages */ /* Amélioration de l'esthétique des messages */
/* .message.user:before { /* .message.user:before {
content: ''; content: '';

26
src/pages/chat/chat.ts
View File

@ -23,7 +23,6 @@ import Database from '../../services/database.service';
const storageUrl = `/storage`; const storageUrl = `/storage`;
interface LocalNotification { interface LocalNotification {
memberId: string; memberId: string;
text: string; text: string;
@ -495,24 +494,27 @@ class ChatElement extends HTMLElement {
for (const message of memberMessages.messages) { for (const message of memberMessages.messages) {
const messageElement = document.createElement('div'); const messageElement = document.createElement('div');
messageElement.className = 'message-container'; messageElement.className = 'message-container';
// Ajouter le style pour aligner les messages
if (message.sender === myAddresses[0]) {
messageElement.style.justifyContent = 'flex-end';
} else {
messageElement.style.justifyContent = 'flex-start';
}
const messageContent = document.createElement('div'); const messageContent = document.createElement('div');
messageContent.className = 'message'; messageContent.className = 'message';
if (message.sender === myAddresses[0]) { if (message.sender === myAddresses[0]) {
messageContent.classList.add('user'); messageContent.classList.add('user');
}
if (message.type === 'file') {
messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
} else {
const senderDisplay = message.sender === myAddresses[0]
? "Me"
: await addressToEmoji(memberAddress);
messageContent.innerHTML = ` messageContent.innerHTML = `
<strong>${senderDisplay}</strong>: ${message.text} ${message.text}
<span style="float: right;">${message.time}</span> <span class="message-time">${message.time}</span>
`;
} else {
messageContent.innerHTML = `
<strong>${await addressToEmoji(memberAddress)}</strong>: ${message.text}
<span class="message-time">${message.time}</span>
`; `;
} }