From 51acdff7b440368bc6c602c59409e1837170a9ac Mon Sep 17 00:00:00 2001 From: Hardcore Sushi Date: Tue, 4 May 2021 11:51:08 +0200 Subject: [PATCH] Gather consecutive messages from same sender --- src/frontend/index.css | 43 +++++++++++++++++++++--------------------- src/frontend/index.js | 35 +++++++++++++++++++++------------- 2 files changed, 43 insertions(+), 35 deletions(-) diff --git a/src/frontend/index.css b/src/frontend/index.css index 705a206..f4ddcd7 100644 --- a/src/frontend/index.css +++ b/src/frontend/index.css @@ -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; diff --git a/src/frontend/index.js b/src/frontend/index.js index b91e83d..c76a3cc 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -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"); - li.appendChild(generateMsgHeader(name)); + 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; - if (entry[0]) { //outgoing msg - name = identityName; - } else { - name = sessionsData.get(currentSessionId).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]));