More changes in MessageDelegate.

imports/Spectral/Component/AutoRectangle.qml

@@ -0,0 +1,71 @@
+import QtQuick 2.12
+
+Rectangle {
+    property alias topLeftRadius: topLeftRect.radius
+    property alias topRightRadius: topRightRect.radius
+    property alias bottomLeftRadius: bottomLeftRect.radius
+    property alias bottomRightRadius: bottomRightRect.radius
+
+    property alias topLeftVisible: topLeftRect.visible
+    property alias topRightVisible: topRightRect.visible
+    property alias bottomLeftVisible: bottomLeftRect.visible
+    property alias bottomRightVisible: bottomRightRect.visible
+
+    antialiasing: true
+
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+        width: parent.width / 2
+        height: parent.height / 2
+
+        id: topLeftRect
+
+        antialiasing: true
+
+        color: parent.color
+    }
+
+    Rectangle {
+        anchors.top: parent.top
+        anchors.right: parent.right
+
+        width: parent.width / 2
+        height: parent.height / 2
+
+        id: topRightRect
+
+        antialiasing: true
+
+        color: parent.color
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+
+        width: parent.width / 2
+        height: parent.height / 2
+
+        id: bottomLeftRect
+
+        antialiasing: true
+
+        color: parent.color
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+
+        width: parent.width / 2
+        height: parent.height / 2
+
+        id: bottomRightRect
+
+        antialiasing: true
+
+        color: parent.color
+    }
+}

imports/Spectral/Component/Avatar.qml

@@ -2,6 +2,8 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtGraphicalEffects 1.0
 
+import Spectral.Setting 0.1
+
 Item {
     property string hint: "H"
     property string source: ""
@@ -35,7 +37,7 @@ Item {
         visible: !realSource || image.status != Image.Ready
 
         radius: height / 2
-        color: stringToColor(hint)
+        color: MPalette.accent
         antialiasing: true
 
         Label {
@@ -50,16 +52,16 @@ Item {
         }
     }
 
-    function stringToColor(str) {
+//    function stringToColor(str) {
-        var hash = 0;
+//        var hash = 0;
-        for (var i = 0; i < str.length; i++) {
+//        for (var i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+//            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
+//        }
-        var colour = '#';
+//        var colour = '#';
-        for (var j = 0; j < 3; j++) {
+//        for (var j = 0; j < 3; j++) {
-            var value = (hash >> (j * 8)) & 0xFF;
+//            var value = (hash >> (j * 8)) & 0xFF;
-            colour += ('00' + value.toString(16)).substr(-2);
+//            colour += ('00' + value.toString(16)).substr(-2);
-        }
+//        }
-        return colour;
+//        return colour;
-    }
+//    }
 }

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -67,65 +67,25 @@ ColumnLayout {
         Control {
             Layout.maximumWidth: messageListView.width - (!sentByMe ? 36 + messageRow.spacing : 0) - 48
 
-            verticalPadding: 8
+            padding: 0
-            horizontalPadding: 16
+
+            background: AutoRectangle {
+                readonly property int minorRadius: 2
+
+                id: bubbleBackground
 
-            background: Rectangle {
                 color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
                 radius: 18
-                antialiasing: true
 
-                Rectangle {
+                topLeftVisible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-                    anchors.top: parent.top
+                topRightVisible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-                    anchors.left: parent.left
+                bottomLeftVisible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
+                bottomRightVisible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
 
-                    width: parent.width / 2
+                topLeftRadius: minorRadius
-                    height: parent.height / 2
+                topRightRadius: minorRadius
-
+                bottomLeftRadius: minorRadius
-                    visible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
+                bottomRightRadius: minorRadius
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.right: parent.right
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
 
                 AutoMouseArea {
                     anchors.fill: parent
@@ -166,60 +126,74 @@ ColumnLayout {
             }
 
             contentItem: ColumnLayout {
-                RowLayout {
+                spacing: 0
+
+                Control {
                     Layout.fillWidth: true
 
+                    padding: 8
+
                     visible: replyVisible
 
-                    Avatar {
+                    contentItem: RowLayout {
-                        Layout.preferredWidth: 28
+                        Avatar {
-                        Layout.preferredHeight: 28
+                            Layout.preferredWidth: 28
-                        Layout.alignment: Qt.AlignTop
+                            Layout.preferredHeight: 28
+                            Layout.alignment: Qt.AlignTop
 
-                        source: replyVisible ? replyAuthor.avatarMediaId : ""
+                            source: replyVisible ? replyAuthor.avatarMediaId : ""
-                        hint: replyVisible ? replyAuthor.displayName : "H"
+                            hint: replyVisible ? replyAuthor.displayName : "H"
 
-                        RippleEffect {
+                            RippleEffect {
-                            anchors.fill: parent
+                                anchors.fill: parent
 
-                            circular: true
+                                circular: true
 
-                            onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
+                                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
-                        }
+                            }
-                    }
-
-                    Control {
-                        Layout.fillWidth: true
-
-                        visible: replyVisible
-
-                        padding: 0
-
-                        background: RippleEffect {
-                            onClicked: goToEvent(replyEventId)
                         }
 
-                        contentItem: Label {
+                        Label {
-                            color: darkBackground ? "white" : MPalette.lighter
+                            Layout.fillWidth: true
+
+                            color: !sentByMe ? MPalette.foreground : "white"
                             text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
 
                             wrapMode: Label.Wrap
                             textFormat: Label.RichText
                         }
                     }
-                }
 
-                Rectangle {
+                    background: AutoRectangle {
-                    Layout.fillWidth: true
+                        color: sentByMe ? MPalette.accent : MPalette.background
-                    Layout.preferredHeight: 1
+                        radius: 16
 
-                    visible: replyVisible
+                        topLeftRadius: 2
-                    color: darkBackground ? "white" : MPalette.lighter
+                        topRightRadius: 2
+                        bottomLeftRadius: 0
+                        bottomRightRadius: 0
+
+                        topLeftVisible: bubbleBackground.topLeftVisible
+                        topRightVisible: bubbleBackground.topRightVisible
+                        bottomLeftVisible: true
+                        bottomRightVisible: true
+
+                        AutoMouseArea {
+                            anchors.fill: parent
+
+                            onClicked: goToEvent(replyEventId)
+                        }
+                    }
                 }
 
                 TextEdit {
                     Layout.fillWidth: true
 
+                    Layout.leftMargin: 16
+                    Layout.rightMargin: 16
+                    Layout.topMargin: 8
+                    Layout.bottomMargin: 8
+
                     id: contentLabel
 
                     text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display

imports/Spectral/Component/qmldir

@@ -7,3 +7,4 @@ AutoListView 2.0 AutoListView.qml
 AutoTextField 2.0 AutoTextField.qml
 Avatar 2.0 Avatar.qml
 FullScreenImage 2.0 FullScreenImage.qml
+AutoRectangle 2.0 AutoRectangle.qml

imports/Spectral/Dialog/UserDetailDialog.qml

@@ -27,8 +27,8 @@ Dialog {
                 Layout.preferredWidth: 72
                 Layout.preferredHeight: 72
 
-                hint: user ? user.displayName : "No name"
+                hint: user.displayName
-                source: user ? user.avatarMediaId : null
+                source: user.avatarMediaId
 
                 RippleEffect {
                     anchors.fill: parent
@@ -50,10 +50,19 @@ Dialog {
 
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
-                    text: user ? user.displayName : "No Name"
+                    text: user.displayName
                     color: MPalette.foreground
                 }
 
+                Label {
+                    Layout.fillWidth: true
+
+                    visible: user.bridgeName
+
+                    text: user.bridgeName
+                    color: MPalette.lighter
+                }
+
                 Label {
                     Layout.fillWidth: true
 
@@ -89,7 +98,7 @@ Dialog {
 
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
-                    text: user ? user.id : "No ID"
+                    text: user.id
                     color: MPalette.accent
                 }
 

include/libqmatrixclient

@@ -1 +1 @@
-Subproject commit 52a81dfa8a5415be369d819837f445479b833cde
+Subproject commit d6f39dcb0de69322479f287514a8c36afcb3fe7b

res.qrc

@@ -58,5 +58,6 @@
         <file>imports/Spectral/Dialog/OpenFileDialog.qml</file>
         <file>imports/Spectral/Dialog/OpenFolderDialog.qml</file>
         <file>imports/Spectral/Component/Timeline/VideoDelegate.qml</file>
+        <file>imports/Spectral/Component/AutoRectangle.qml</file>
     </qresource>
 </RCC>

src/spectraluser.cpp

@@ -1 +1,5 @@
 #include "spectraluser.h"
+
+QColor SpectralUser::color() {
+  return QColor::fromHslF(hueF(), 0.7, 0.5, 1);
+}

src/spectraluser.h

@@ -10,9 +10,12 @@ using namespace QMatrixClient;
 
 class SpectralUser : public User {
   Q_OBJECT
+  Q_PROPERTY(QColor color READ color CONSTANT)
  public:
   SpectralUser(QString userId, Connection* connection)
       : User(userId, connection) {}
+
+  QColor color();
 };
 
 #endif  // SpectralUser_H