hardcoresushi
/
AIRA
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/frontend/index.css
View File

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

35
src/frontend/index.js
View File

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