Add sender names to state events (#948)

* add sendernames to state events

* Center state events and make them less tiny

3 files changed, 11 insertions, 9 deletions

diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml

index 0ff33bf8..02a9579b 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -53,7 +53,7 @@ Item {
     Rectangle {
         color: (Settings.messageHoverHighlight && hovered) ? Nheko.colors.alternateBase : "transparent"
         anchors.fill: parent
-        anchors.leftMargin: Settings.smallAvatars? 0 : Nheko.avatarSize+8
+        // this looks better without margins
     }
 
     TapHandler {
@@ -72,10 +72,11 @@ Item {
         id: row
         property bool bubbleOnRight : isSender && Settings.bubbles
         property int bubblePadding: (parent.width-(Settings.smallAvatars? 0 : Nheko.avatarSize+8))/10
-        anchors.rightMargin: isSender || !Settings.bubbles? 0 : bubblePadding
-        anchors.leftMargin: (Settings.smallAvatars? 0 : Nheko.avatarSize+8) + (bubbleOnRight? bubblePadding : 0) // align bubble with section header
-        anchors.left: bubbleOnRight? undefined : parent.left
-        anchors.right: bubbleOnRight? parent.right : undefined
+        anchors.rightMargin: isStateEvent? 0 : (isSender || !Settings.bubbles? 0 : bubblePadding)
+        anchors.leftMargin: isStateEvent? 0 :((Settings.smallAvatars? 0 : Nheko.avatarSize+8) + (bubbleOnRight? bubblePadding : 0)) // align bubble with section header
+        anchors.left: isStateEvent? undefined : (bubbleOnRight? undefined : parent.left)
+        anchors.right: isStateEvent? undefined: (bubbleOnRight? parent.right : undefined)
+        anchors.horizontalCenter: isStateEvent? parent.horizontalCenter : undefined
         property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
         width: Settings.bubbles? Math.min(maxWidth,implicitWidth+metadata.width+12) : maxWidth
         leftPadding: 4
diff --git a/resources/qml/delegates/NoticeMessage.qml b/resources/qml/delegates/NoticeMessage.qml

index 544af109..342469db 100644
--- a/resources/qml/delegates/NoticeMessage.qml
+++ b/resources/qml/delegates/NoticeMessage.qml
@@ -3,6 +3,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import QtQuick 2.5
 import im.nheko 1.0
 
 
@@ -10,5 +11,6 @@ TextMessage {
     property bool isStateEvent
     font.italic: true
     color: Nheko.colors.buttonText
-    font.pointSize: isStateEvent? 0.75*fontMetrics.font.pointSize : 1*fontMetrics.font.pointSize
+    font.pointSize: isStateEvent? 0.8*Settings.fontSize : Settings.fontSize
+    horizontalAlignment: isStateEvent? Text.AlignHCenter : undefined
 }
diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml

index a3964f73..8b67c346 100644
--- a/resources/qml/delegates/Pill.qml
+++ b/resources/qml/delegates/Pill.qml
@@ -11,9 +11,8 @@ Label {
     property bool isStateEvent
     color: Nheko.colors.text
     horizontalAlignment: Text.AlignHCenter
-    //height: contentHeight * 1.2
-    //width: contentWidth * 1.2
-    font.pointSize: isStateEvent? 0.75*fontMetrics.font.pointSize : 1*fontMetrics.font.pointSize
+    height: Math.round(fontMetrics.height * 1.4)
+    width: contentWidth * 1.2
 
     background: Rectangle {
         radius: parent.height / 2