diff --git a/components/chat.js b/components/chat.js
index 6504bec..cf387be 100644
--- a/components/chat.js
+++ b/components/chat.js
@@ -10,6 +10,7 @@ const defaultValue = require('default-value')
const Event = require('./events/Event.js')
const Info = require('./info.js')
const Input = require('./input.js')
+const User = require('./events/user.js')
jdenticon.config = {
lightness: {
@@ -150,7 +151,7 @@ let EventGroup = create({
return
{this.state.avatar}
-
{this.state.user.displayName}
+
{events}
diff --git a/components/events/Event.js b/components/events/Event.js
index b4d6b9f..49f7dfd 100644
--- a/components/events/Event.js
+++ b/components/events/Event.js
@@ -6,6 +6,8 @@ const defaultValue = require('default-value')
const riot = require('../../lib/riot-utils.js')
+const User = require('./user.js')
+
const elements = {
"m.text": require('./text.js'),
"m.image": require('./image.js')
@@ -36,10 +38,13 @@ let Event = create({
let parsedReply = formattedEvent.parsedReply
if (parsedReply.isReply) {
let repliedEvent = this.props.room.findEventById(parsedReply.to)
- let shortText
+ let shortText, repliedUser
if (repliedEvent == undefined) {
shortText = "Can't load this event"
+ repliedUser = {userId: "NEO_UNKNOWN", displayName: "Unknown User"}
+ // fall back on content?
} else {
+ repliedUser = this.props.client.getUser(repliedEvent.event.sender)
shortText = parseEvent(repliedEvent.event)
if (shortText.html) {
shortText =
@@ -49,6 +54,7 @@ let Event = create({
}
reply = (
+
{shortText}
)
@@ -90,9 +96,7 @@ function parseReply(event, body) {
replyTo = event.content['m.relates_to']['m.in_reply_to'].event_id
if (replyTo) {
// strip from message if it exists
- console.log("STRIPPING FROM", body)
body = body.replace(mxReplyRegex, "")
- console.log("TO ", body)
}
} catch(err) {
// no reply
diff --git a/components/events/user.js b/components/events/user.js
new file mode 100644
index 0000000..8b187e0
--- /dev/null
+++ b/components/events/user.js
@@ -0,0 +1,51 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const jdenticon = require('jdenticon')
+
+jdenticon.config = {
+ lightness: {
+ color: [0.58, 0.66],
+ grayscale: [0.30, 0.90]
+ },
+ saturation: {
+ color: 0.66,
+ grayscale: 0.00
+ },
+ backColor: "#00000000"
+};
+
+let User = create({
+ displayName: "user",
+
+ getInitialState: function() {
+ let icon = jdenticon.toSvg(this.props.user.userId, 200)
+ let match = icon.match(/#([a-f0-9]{6})/g)
+ console.log(match, icon)
+ let color = '#ff0000'
+ for(let i=match.length-1; i>= 0; i--) {
+ color = match[i]
+ let r = color.substr(1, 2)
+ let g = color.substr(3, 2)
+ let b = color.substr(5, 2)
+ console.log(r, g, b)
+ if (r != g && g != b) { //greyscale
+ break
+ }
+ }
+ return {
+ color: color
+ }
+ },
+
+ render: function() {
+ return (
+
+ {this.props.user.displayName}
+
+ )
+ }
+})
+
+module.exports = User
diff --git a/public/scss/style.scss b/public/scss/style.scss
index c580111..ec141ca 100644
--- a/public/scss/style.scss
+++ b/public/scss/style.scss
@@ -274,7 +274,7 @@ body {
grid-template-areas: "avatar content";
margin-bottom: $spacing/2;
- #name {
+ .name {
font-weight: bold;
}
@@ -297,6 +297,10 @@ body {
grid-area: content;
padding-left: $spacing * 1.2;
+ h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ }
+
.reply + .event {
margin-bottom: $spacing;
}