From 0461c46a1ac6fec9dc9d24e3cf4e16cd6f7df8b5 Mon Sep 17 00:00:00 2001
From: Black Hat <bhat@encom.eu.org>
Date: Mon, 30 Sep 2019 00:49:44 -0700
Subject: [PATCH] Add user color as background.

---
 .../Component/Timeline/StateDelegate.qml      | 40 +++++++++++++++----
 imports/Spectral/Panel/RoomPanelInput.qml     | 32 ++++++++++++---
 2 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/imports/Spectral/Component/Timeline/StateDelegate.qml b/imports/Spectral/Component/Timeline/StateDelegate.qml
index 9d64660ca..7f4453c01 100644
--- a/imports/Spectral/Component/Timeline/StateDelegate.qml
+++ b/imports/Spectral/Component/Timeline/StateDelegate.qml
@@ -10,23 +10,47 @@ Control {
     padding: 8
 
     contentItem: RowLayout {
-        Avatar {
-            Layout.preferredWidth: 24
-            Layout.preferredHeight: 24
+        id: row
 
-            hint: author.displayName
-            source: author.avatarMediaId
+        Control {
+            id: authorControl
+
+            padding: 4
+
+            background: Rectangle {
+                radius: height / 2
+                color: author.color
+            }
+
+            contentItem: RowLayout {
+                Avatar {
+                    Layout.preferredWidth: 24
+                    Layout.preferredHeight: 24
+
+                    hint: author.displayName
+                    source: author.avatarMediaId
+                }
+
+                Label {
+                    Layout.alignment: Qt.AlignVCenter
+
+                    text: author.displayName
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                    color: "white"
+                    rightPadding: 8
+                }
+            }
         }
 
         Label {
             Layout.fillWidth: true
-            Layout.maximumWidth: messageListView.width - 48
+            Layout.maximumWidth: messageListView.width - authorControl.width - row.spacing
 
-            text: "<b>" + author.displayName + "</b> " + display + " • " + Qt.formatTime(time, "hh:mm AP")
+            text: display + " • " + Qt.formatTime(time, "hh:mm AP")
             color: MPalette.foreground
             font.pixelSize: 13
             font.weight: Font.Medium
-            textFormat: Label.StyledText
 
             wrapMode: Label.Wrap
             onLinkActivated: Qt.openUrlExternally(link)
diff --git a/imports/Spectral/Panel/RoomPanelInput.qml b/imports/Spectral/Panel/RoomPanelInput.qml
index 2d44b99b9..044a7d5d3 100644
--- a/imports/Spectral/Panel/RoomPanelInput.qml
+++ b/imports/Spectral/Panel/RoomPanelInput.qml
@@ -13,6 +13,7 @@ import Spectral 0.1
 
 Control {
     property alias isReply: replyItem.visible
+    property bool isReaction: false
     property var replyModel
     readonly property var replyUser: replyModel ? replyModel.author : null
     readonly property string replyEventID: replyModel ? replyModel.eventId : ""
@@ -53,13 +54,34 @@ Control {
 
             spacing: 8
 
-            Avatar {
-                Layout.preferredWidth: 32
-                Layout.preferredHeight: 32
+            Control {
                 Layout.alignment: Qt.AlignTop
 
-                source: replyUser ? replyUser.avatarMediaId : ""
-                hint: replyUser ? replyUser.displayName : "No name"
+                padding: 4
+
+                background: Rectangle {
+                    radius: height / 2
+                    color: replyUser ? replyUser.color : MPalette.accent
+                }
+
+                contentItem: RowLayout {
+                    Avatar {
+                        Layout.preferredWidth: 24
+                        Layout.preferredHeight: 24
+
+                        source: replyUser ? replyUser.avatarMediaId : ""
+                        hint: replyUser ? replyUser.displayName : "No name"
+                    }
+
+                    Label {
+                        Layout.alignment: Qt.AlignVCenter
+
+                        text: replyUser ? replyUser.displayName : "No name"
+                        color: "white"
+                        font.weight: Font.Medium
+                        rightPadding: 8
+                    }
+                }
             }
 
             TextEdit {