From e3b1cabdd370b452a77c0a0248c69f0c292a9e72 Mon Sep 17 00:00:00 2001
From: marvin-borner@live.com
Date: Sat, 14 Apr 2018 12:17:22 +0200
Subject: Chat design improvements
---
assets/css/main.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++---
assets/js/chat.js | 35 +++++++++++++++++++++++++++++-----
assets/js/language.js | 2 +-
index.php | 6 +++---
4 files changed, 83 insertions(+), 12 deletions(-)
diff --git a/assets/css/main.css b/assets/css/main.css
index 47a8141..f84bcf5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,6 +32,11 @@ body {
height: 100%;
}
+::-webkit-scrollbar {
+ width: 0;
+ background: transparent;
+}
+
hr {
width: 100%;
display: block;
@@ -51,6 +56,7 @@ FLICKITY
.carousel-cell {
width: 100%;
+ height: calc(100vh - 75px);
height: -moz-calc(100vh - 75px);
height: -webkit-calc(100vh - 75px);
height: -o-calc(100vh - 75px);
@@ -100,11 +106,16 @@ CHAT WINDOW
**********/
.ChatWindow {
position: relative;
- margin: 5px;
height: 100%;
+ margin: 5px;
}
.ChatMessages {
+ overflow-y: scroll;
+ max-height: calc(100% - 135px); /* navbar + input + some margin*/
+ max-height: -moz-calc(100% - 135px);
+ max-height: -webkit-calc(100% - 135px);
+ max-height: -o-calc(100% - 135px);
height: 100%;
width: 100%;
}
@@ -112,17 +123,28 @@ CHAT WINDOW
.ChatMessage {
display: block;
position: relative;
- border-radius: 25px;
- min-width: 100px;
+ min-width: 50px;
max-width: 50%;
width: auto;
height: auto;
word-wrap: break-word;
+ text-align: center;
padding: 10px;
}
.ServerChatMessage {
+ display: inline-block;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
text-align: center;
+ padding: 5px;
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+ background: linear-gradient(to right, #ad4eff, #7c41f9);
+ color: #FFF;
+ font-size: x-small;
}
.MessageSent {
@@ -130,6 +152,30 @@ CHAT WINDOW
background-color: #12213b;
}
+.AloneMessage {
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+}
+
+.TopMessage {
+ -webkit-border-radius: 25px 25px 10px 10px;
+ -moz-border-radius: 25px 25px 10px 10px;
+ border-radius: 25px 25px 10px 10px;
+}
+
+.MiddleMessage {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+
+.BottomMessage {
+ -webkit-border-radius: 10px 10px 25px 25px;
+ -moz-border-radius: 10px 10px 25px 25px;
+ border-radius: 10px 10px 25px 25px;
+}
+
.MessageReceived {
float: left;
background-color: #13223c;
diff --git a/assets/js/chat.js b/assets/js/chat.js
index bf13a32..a037115 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -35,27 +35,52 @@ var SubscribeTextInput = $("#SubscribeTextInput");
var ChatMessages = $("#ChatMessages");
var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
+
WebSocket.onopen = function () {
console.log("Chat connection established!");
};
+
WebSocket.onmessage = function (e) {
+ var LastMessage = $(".ChatMessage:last");
var MessageObject = JSON.parse(e.data);
if (MessageObject.ServerMessage === false) {
if (MessageObject.WasHimself === true) { //MessageObject.Username
- ChatMessages.append("" + MessageObject.Message + "
");
+ if (!LastMessage.hasClass("MessageSent")) {
+ ChatMessages.append("" + MessageObject.Message + "
");
+ } else if (LastMessage.hasClass("MessageSent")) {
+ if (LastMessage.hasClass("AloneMessage")) {
+ LastMessage.removeClass("AloneMessage");
+ LastMessage.addClass("TopMessage");
+ } else if (LastMessage.hasClass("BottomMessage")) {
+ LastMessage.removeClass("BottomMessage");
+ LastMessage.addClass("MiddleMessage");
+ }
+ ChatMessages.append("" + MessageObject.Message + "
");
+ }
} else if (MessageObject.WasHimself === false) {
- ChatMessages.append("" + MessageObject.Message + "
");
+ if (!LastMessage.hasClass("MessageReceived")) {
+ ChatMessages.append("" + MessageObject.Message + "
");
+ } else if (LastMessage.hasClass("MessageReceived")) {
+ if (LastMessage.hasClass("AloneMessage")) {
+ LastMessage.removeClass("AloneMessage");
+ LastMessage.addClass("TopMessage");
+ } else if (LastMessage.hasClass("BottomMessage")) {
+ LastMessage.removeClass("BottomMessage");
+ LastMessage.addClass("MiddleMessage");
+ }
+ ChatMessages.append("" + MessageObject.Message + "
");
+ }
}
} else if (MessageObject.ServerMessage === true) {
if (MessageObject.ServerMessageType === "GroupJoin") {
if (MessageObject.WasHimself === false) {
- ChatMessages.append("" + MessageObject.Username + " .
");
+ ChatMessages.append("" + MessageObject.Username + " .
");
} else if (MessageObject.WasHimself === true) {
ChatMessages.empty();
- ChatMessages.append(" " + MessageObject.GroupName + ".
");
+ ChatMessages.append(" " + MessageObject.GroupName + ".
");
}
} else if (MessageObject.ServerMessageType === "UserDisconnect") {
- ChatMessages.append("" + MessageObject.Username + " .
");
+ ChatMessages.append("" + MessageObject.Username + " .
");
}
}
initiateLanguage(); // need further work (performance)
diff --git a/assets/js/language.js b/assets/js/language.js
index 9448ae3..abe6a65 100644
--- a/assets/js/language.js
+++ b/assets/js/language.js
@@ -20,7 +20,7 @@ function Translate() {
var key = elem.getAttribute(_self.attribute);
if (key != null) {
- console.log("Language initialized with language pack: " + _self.lng);
+ //console.log("Language initialized with language pack: " + _self.lng);
elem.innerHTML = LngObject[_self.lng][key];
}
}
diff --git a/index.php b/index.php
index 8da157a..3836cf8 100644
--- a/index.php
+++ b/index.php
@@ -57,10 +57,10 @@
--
cgit v1.2.3