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

feat: identicon

This commit is contained in:
Richard Ramos 2019-04-10 22:52:31 -04:00
parent ce96f7f650
commit 0791d57afd
4 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -9,9 +9,10 @@
"license": "MIT",
"dependencies": {
"@babel/runtime-corejs2": "^7.3.1",
"identicon.js": "^2.3.3",
"murmur-client": "^0.3.8",
"null-loader": "^0.1.1",
"status-js-api": "^1.2.9",
"status-js-api": "^1.2.11",
"webpack": "^4.29.0",
"webpack-merge": "^4.2.1",
"webpack-node-externals": "^1.7.2"

13
src/index.js
View File

@ -1,5 +1,6 @@
import StatusJS from 'status-js-api';
import Murmur from 'murmur-client';
import Identicon from 'identicon.js';
window.StatusWidget = function (channelName, chatWidget) {
if (!channelName) { throw new Error("no channelName provider"); }
@ -45,11 +46,21 @@ window.StatusWidget = function (channelName, chatWidget) {
const msg = JSON.parse(data.payload)[1][0];
const message = { username: data.username, message: msg, pubkey: data.data.sig, data };
const options = {
background: [255, 255, 255, 255],
margin: 0.24,
size: 32,
format: 'svg'
};
const identicon = new Identicon(message.pubkey, options).toString();
let div = document.createElement('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>";
div.innerHTML = "<img class='identicon' width=40 height=40 src='data:image/svg+xml;base64," + identicon + "' /><span class='username'>" + message.username + "</span><span class='message'>" + message.message + "</span>";
}
chatBox.append(div);
lastMessageUser = message.username;

8
themes/status.css
View File

@ -38,9 +38,16 @@
font-size: 14px;
}
._status-chat-widget .identicon {
border-radius: 50%;
float: left;
margin-top: 10px;
}
._status-chat-widget .username {
color: #939ba1;
font-size: 14px;
margin-left: 20px;
}
._status-chat-widget .message {
@ -51,4 +58,5 @@
display: block;
margin-top: 3px;
margin-bottom: 10px;
margin-left: 60px;
}

13
yarn.lock
View File

@ -2665,6 +2665,11 @@ iconv-lite@^0.4.4:
dependencies:
safer-buffer ">= 2.1.2 < 3"
identicon.js@^2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/identicon.js/-/identicon.js-2.3.3.tgz#c505b8d60ecc6ea13bbd991a33964c44c1ad60a1"
integrity sha512-/qgOkXKZ7YbeCYbawJ9uQQ3XJ3uBg9VDpvHjabCAPp6aRMhjLaFAxG90+1TxzrhKaj6AYpVGrx6UXQfQA41UEA==
idna-uts46-hx@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/idna-uts46-hx/-/idna-uts46-hx-2.3.1.tgz#a1dc5c4df37eee522bf66d969cc980e00e8711f9"
@ -6123,10 +6128,10 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"
status-js-api@^1.2.9:
version "1.2.9"
resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.2.9.tgz#76cfc6e7ccb378c49fb38f6b67d1374259a3dbcb"
integrity sha512-Sn+Ivg3RjMrwVvc9cS2Yy87qBnZYhhhfcaVkvlNHWGcsBaEbvJ+RPzISumf+sjQUV3znhOSyb5KPRRM0+xtP+w==
status-js-api@^1.2.11:
version "1.2.11"
resolved "https://registry.yarnpkg.com/status-js-api/-/status-js-api-1.2.11.tgz#835a8be9b87ca7eb9e3107f92f6e4988b9ed374a"
integrity sha512-+lpfQsMdgCJusBLj6lWNA17z3vnfDfz7X5FawQzPy5+gGFC2UcTKwm+lwtqbQHv7K9Dkxr/FEBUgCG/2ce8+Xg==
dependencies:
bip39 "^2.5.0"
bourne "^1.1.2"