status-im
/
status-chat-widget
mirror of https://github.com/status-im/status-chat-widget.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

various css updates; don't display username again if message is from the same user

This commit is contained in:
Iuri Matias 2019-04-10 21:41:28 -04:00
parent 072b077017
commit 7e66f7b70f
3 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/statuswidget.js vendored
View File

File diff suppressed because one or more lines are too long

39
index.html
View File

@ -8,9 +8,13 @@
#status-chat-widget {
background-color: white;
width: 33%;
padding: 24px;
border-radius: 16px;
font-family: "Inter UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
background: url(https://status.im/img/status-logo-symbol.svg) 99% 3% no-repeat white;
background-size: 55px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
h3 {
@ -18,19 +22,44 @@
color: #4360df;
font-weight: 600;
font-size: 20px;
padding: 24px;
padding-bottom: 5px;
}
#chat {
height: 186px;
height: 218px;
overflow: auto;
padding: 24px;
border-top: 1px solid #ddd;
background-color: #eef2f5;
}
#post {
margin-top: 16px;
width: 100%;
height: 40px;
padding-left: 7px;
height: 60px;
padding-left: 30px;
border-radius: 0px 0px 10px 10px;
border: 0px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
.username {
color: #939ba1;
font-size: 14px;
}
.message {
background-color: white;
padding: 5px 10px;
border-radius: 10px;
border: 1px solid #eee;
display: block;
margin-top: 3px;
margin-bottom: 10px;
}
</style>
</head>
<body>

11
src/index.js
View File

@ -29,14 +29,21 @@ window.StatusWidget = function (channelName) {
const status = new StatusJS();
status.connectToProvider(server.provider, null);
var lastMessageUser = "";
status.joinChat(channelName, () => {
status.onMessage(channelName, (err, data) => {
const msg = JSON.parse(data.payload)[1][0];
const message = { username: data.username, message: msg, pubkey: data.data.sig, data };
let div = document.createElement('div');
div.innerHTML = message.username + "> " + message.message;
document.querySelectorAll("#chat")[0].append(div)
if (lastMessageUser === message.username) {
div.innerHTML = "<span class='message'>" + message.message + "</span>";
} else {
div.innerHTML = "<span class='username'>" + message.username + "</span><span class='message'>" + message.message + "</span>";
}
document.querySelectorAll("#chat")[0].append(div);
lastMessageUser = message.username;
var element = document.getElementById("chat");
element.scrollTop = element.scrollHeight;