Gather consecutive messages from same sender

This commit is contained in:
Matéo Duparc 2021-05-04 11:51:08 +02:00
parent ede47d9574
commit 51acdff7b4
Signed by: hardcoresushi
GPG Key ID: 007F84120107191E
2 changed files with 43 additions and 35 deletions

View File

@ -87,7 +87,7 @@ input[type="file"] {
.popup section {
font-weight: bold;
display: block;
margin-bottom: 1em;
margin-bottom: 20px;
}
.popup input {
display: block;
@ -209,7 +209,7 @@ input[type="file"] {
content: url("/static/imgs/icons/warning/FF3C00");
display: inline-block;
width: 1em;
margin-left: .3em;
margin-left: 5px;
vertical-align: middle;
}
#left_panel ul li.is_contact p::after {
@ -219,10 +219,10 @@ input[type="file"] {
content: url("/static/imgs/icons/verified/FF3C00");
}
#left_panel ul li .not_seen_marker {
width: .8em;
height: .8em;
width: 5px;
height: 5px;
background-color: var(--accent);
border-radius: 1em;
border-radius: 5px;
}
#refresher {
position: relative;
@ -230,7 +230,7 @@ input[type="file"] {
#refresher button {
position: absolute;
right: 10px;
top: 1em;
top: 15px;
z-index: 1;
}
#refresher button::after {
@ -262,7 +262,7 @@ input[type="file"] {
display: inline-block;
width: 1.2em;
vertical-align: middle;
padding-left: .3em;
margin-left: 10px;
}
#chat_header.is_contact p::after {
content: unset;
@ -296,7 +296,7 @@ input[type="file"] {
}
#message_input {
border: unset;
padding: 1em;
padding: 20px;
font-size: 1.1em;
}
#file_transfer {
@ -319,7 +319,7 @@ input[type="file"] {
}
#file_cancel::after {
background-color: unset;
width: 1.2em;
width: 20px;
content: url("/static/imgs/icons/cancel/FF3C00");
}
#file_progress {
@ -342,7 +342,7 @@ input[type="file"] {
}
#file_progress_bar {
flex-grow: 1;
height: 1.5em;
height: 25px;
}
#file_progress_bar div {
height: 100%;
@ -357,20 +357,22 @@ input[type="file"] {
overflow-y: scroll;
white-space: pre;
}
#msg_log li>div:first-of-type { /*message header*/
#msg_log p {
margin: 0;
}
#msg_log li .header {
display: flex;
align-items: center;
margin-top: 15px;
}
#msg_log p.name {
margin: 0;
#msg_log li .header p {
color: var(--accent);
font-weight: bold;
}
#msg_log li>div:last-of-type { /*message content container*/
#msg_log li .content {
margin-left: 2em;
}
#msg_log li p {
margin-top: 0;
margin-top: 5px;
margin-bottom: 10px;
}
#msg_log a {
color: #238cf5;
@ -378,10 +380,8 @@ input[type="file"] {
#msg_log .file {
display: flex;
align-items: end;
margin-bottom: 1em;
border-left: 3px solid var(--accent);
padding-left: .5em;
margin-top: .5em;
padding-left: 15px;
}
#msg_log .file div { /*title and filename container*/
display: flex;
@ -391,14 +391,13 @@ input[type="file"] {
margin: 0;
}
#msg_log .file p {
margin: 0;
color: var(--accent);
}
#msg_log .file a::after {
content: url("/static/imgs/icons/download/FF3C00");
display: block;
width: 2em;
margin-left: 1em;
margin-left: 15px;
}
#message_box, #chat_header, #msg_log {
display: none;

View File

@ -1,6 +1,5 @@
"use strict";
const ENTER_KEY_CODE = 13;
let identityName = undefined;
let socket = null;
let notificationAllowed = false;
@ -20,20 +19,20 @@ function onClickSession(event) {
}
displaySessions();
displayHeader();
dislayHistory();
displayChatBottom();
dislayHistory();
}
}
let ip_input = document.getElementById("ip_input");
ip_input.addEventListener("keyup", function(event) {
if (event.keyCode === ENTER_KEY_CODE) {
if (event.key === "Enter") {
socket.send("connect "+ip_input.value);
ip_input.value = "";
}
});
let message_input = document.getElementById("message_input");
message_input.addEventListener("keyup", function(event) {
if (event.keyCode === ENTER_KEY_CODE) {
if (event.key === "Enter") {
socket.send("send "+currentSessionId+" "+message_input.value);
message_input.value = "";
}
@ -797,8 +796,8 @@ function generateSession(sessionId, session) {
function generateMsgHeader(name) {
let p = document.createElement("p");
p.appendChild(document.createTextNode(name));
p.classList.add("name");
let div = document.createElement("div");
div.classList.add("header");
div.appendChild(generateAvatar(name));
div.appendChild(p);
return div;
@ -807,15 +806,19 @@ function generateMessage(name, msg) {
let p = document.createElement("p");
p.appendChild(document.createTextNode(msg));
let div = document.createElement("div");
div.classList.add("content");
div.appendChild(linkifyElement(p));
let li = document.createElement("li");
li.appendChild(generateMsgHeader(name))
if (typeof name !== "undefined") {
li.appendChild(generateMsgHeader(name));
}
li.appendChild(div);
return li;
}
function generateFile(name, outgoing, file_info) {
let div1 = document.createElement("div");
div1.classList.add("file");
div1.classList.add("content");
let div2 = document.createElement("div");
let h4 = document.createElement("h4");
if (outgoing) {
@ -833,7 +836,9 @@ function generateFile(name, outgoing, file_info) {
a.target = "_blank";
div1.appendChild(a);
let li = document.createElement("li");
if (typeof name !== "undefined") {
li.appendChild(generateMsgHeader(name));
}
li.appendChild(div1);
return li;
}
@ -905,14 +910,18 @@ function displayChatBottom(speed = undefined) {
function dislayHistory(scrollToBottom = true) {
msg_log.style.display = "block";
msg_log.innerHTML = "";
let previousOutgoing = undefined;
msgHistory.get(currentSessionId).forEach(entry => {
let name;
let name = undefined;
if (previousOutgoing != entry[0]) {
previousOutgoing = entry[0];
if (entry[0]) { //outgoing msg
name = identityName;
} else {
name = sessionsData.get(currentSessionId).name;
}
if (entry[1]){ //is file
}
if (entry[1]) { //is file
msg_log.appendChild(generateFile(name, entry[0], entry[2]));
} else {
msg_log.appendChild(generateMessage(name, entry[2]));