Clean look of Timeline

Align everything to the left, add colors to user names, remove some
hardcoded value in favor of Kirigami.Theme and Kirigami.Units.

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -1,3 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+ * SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+ *
+ * SPDX-LicenseIdentifier: GPL-3.0-or-later
+ */
 import QtQuick 2.12
 import QtQuick.Controls 2.12 as Controls
 import QtQuick.Layouts 1.12
@@ -29,8 +35,10 @@ RowLayout {
     Layout.rightMargin: Kirigami.Units.smallSpacing
 
     Kirigami.Avatar {
-        Layout.preferredWidth: Kirigami.Units.gridUnit * 2
-        Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+        Layout.minimumWidth: Kirigami.Units.iconSizes.medium
+        Layout.minimumHeight: Kirigami.Units.iconSizes.medium
+        Layout.maximumWidth: Kirigami.Units.iconSizes.medium
+        Layout.maximumHeight: Kirigami.Units.iconSizes.medium
 
         Layout.alignment: Qt.AlignTop
 
@@ -41,12 +49,12 @@ RowLayout {
     }
 
     Item {
-        Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+        Layout.minimumWidth: Kirigami.Units.iconSizes.medium
         Layout.preferredHeight: 1
 
         visible: !showAuthor
     }
-    
+
     ColumnLayout {
         id: column
         Layout.fillWidth: true
@@ -59,7 +67,7 @@ RowLayout {
 
             text: author.displayName
             font.bold: true
-            color: Kirigami.Theme.activeTextColor
+            color: author.color
             wrapMode: Text.Wrap
         }
 
@@ -69,20 +77,20 @@ RowLayout {
             visible: replyVisible
 
             Rectangle {
-                Layout.preferredWidth: 4
+                Layout.preferredWidth: Kirigami.Units.smallSpacing
                 Layout.fillHeight: true
 
                 color: Kirigami.Theme.highlightColor
             }
 
             Kirigami.Avatar {
-                Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
-                Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
+                Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
+                Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
                 Layout.alignment: Qt.AlignTop
 
                 source: replyVisible && reply.author.avatarMediaId ? "image://mxc/" + reply.author.avatarMediaId : ""
                 name: replyVisible ? reply.author.displayName : "H"
-                color: replyVisible ? reply.author.color : MPalette.accent
+                color: replyVisible ? reply.author.color : Kirigami.Theme.highlightColor
             }
 
             ColumnLayout {
@@ -92,7 +100,7 @@ RowLayout {
                     Layout.fillWidth: true
 
                     text: replyVisible ? reply.author.displayName : ""
-                    color: Kirigami.Theme.activeTextColor
+                    color: replay.author.color
                     wrapMode: Text.Wrap
                 }
 
@@ -102,11 +110,6 @@ RowLayout {
                     text: replyVisible ? reply.display : ""
 
                     color: Kirigami.Theme.textColor
-//                    selectionColor: Kirigami.Theme.highlightColor
-//                    selectedTextColor: Kirigami.Theme.highlightedTextColor
-
-//                    selectByMouse: true
-//                    readOnly: true
                     wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                     textFormat: Text.RichText
                 }

imports/Spectral/Component/Timeline/SectionDelegate.qml

@@ -1,12 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+ * SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+ *
+ * SPDX-LicenseIdentifier: GPL-3.0-or-later
+ */
 import QtQuick 2.12
-import QtQuick.Controls 2.12 as Controls
 
-import org.kde.kirigami 2.4 as Kirigami
+import org.kde.kirigami 2.13 as Kirigami
 
-Controls.Label {
+Kirigami.Heading {
+    level: 4
     text: section + " • " + Qt.formatTime(time)
-    font.weight: Font.Medium
     font.capitalization: Font.AllUppercase
     verticalAlignment: Text.AlignVCenter
-    padding: 8
+    topPadding: Kirigami.Units.largeSpacing * 2
+    bottomPadding: Kirigami.Units.smallSpacing
 }

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -12,9 +12,14 @@ import Spectral.Setting 0.1
 RowLayout {
     id: row
 
+    Item {
+        Layout.minimumWidth: Kirigami.Units.iconSizes.medium
+        Layout.preferredHeight: 1
+    }
+
     Kirigami.Avatar {
-        Layout.preferredWidth: 24
-        Layout.preferredHeight: 24
+        Layout.preferredWidth: Kirigami.Units.iconSizes.small
+        Layout.preferredHeight: Kirigami.Units.iconSizes.small
 
         name: author.displayName
         source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
@@ -37,18 +42,15 @@ RowLayout {
 
     Label {
         Layout.alignment: Qt.AlignVCenter
-
         text: author.displayName
-        font.pixelSize: 13
-        font.bold: true
+        color: Kirigami.Theme.disabledTextColor
     }
 
     Label {
         Layout.fillWidth: true
 
         text: display
-        color: MPalette.foreground
-        font.pixelSize: 13
+        color: Kirigami.Theme.disabledTextColor
         font.weight: Font.Medium
 
         wrapMode: Label.Wrap

imports/Spectral/Component/Timeline/TextDelegate.qml

@@ -5,16 +5,8 @@ import org.kde.kirigami 2.4 as Kirigami
 Text {
     text: "<style>pre {white-space: pre-wrap} a{color: " + Kirigami.Theme.linkColor + ";} .user-pill{}</style>" + display
 
-    font {
-        family: Kirigami.Theme.defaultFont.family
-    }
+    font.family: Kirigami.Theme.defaultFont.family + ", emoji"
 
-    color: Kirigami.Theme.textColor
-//    selectionColor: Kirigami.Theme.highlightColor
-//    selectedTextColor: Kirigami.Theme.highlightedTextColor
-
-//    selectByMouse: true
-//    readOnly: true
     wrapMode: Text.WordWrap
     width: parent.width
     textFormat: Text.RichText