Make settings update immediately in qml and allow limiting timeline width

Limiting improves readability on wide monitors.

The immediate update of the settings is done by just exposing settings
as properties and then setting the settings as a context property.

5 files changed, 20 insertions, 35 deletions

diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml
index ed065270..465a8e1c 100644
--- a/resources/qml/Avatar.qml
+++ b/resources/qml/Avatar.qml
@@ -6,7 +6,7 @@ Rectangle {
 	id: avatar
 	width: 48
 	height: 48
-	radius: settings.avatar_circles ? height/2 : 3
+	radius: settings.avatarCircles ? height/2 : 3
 
 	property alias url: img.source
 	property string displayName
@@ -39,7 +39,7 @@ Rectangle {
 				anchors.fill: parent
 				width: avatar.width
 				height: avatar.height
-				radius: settings.avatar_circles ? height/2 : 3
+				radius: settings.avatarCircles ? height/2 : 3
 			}
 		}
 	}
diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml
index cb15b723..f42e8612 100644
--- a/resources/qml/Reactions.qml
+++ b/resources/qml/Reactions.qml
@@ -30,7 +30,7 @@ Flow {
 
 				TextMetrics {
 					id: textMetrics
-					font.family: settings.emoji_font_family
+					font.family: settings.emojiFont
 					elide: Text.ElideRight
 					elideWidth: 150
 					text: reaction.text
@@ -40,14 +40,14 @@ Flow {
 					anchors.baseline: reactionCounter.baseline
 					id: reactionText
 					text: textMetrics.elidedText + (textMetrics.elidedText == textMetrics.text ? "" : "…")
-					font.family: settings.emoji_font_family
+					font.family: settings.emojiFont
 					color: reaction.hovered ? colors.highlight : colors.text
 					maximumLineCount: 1
 				}
 
 				Rectangle {
 					id: divider
-					height: reactionCounter.implicitHeight * 1.4
+					height: Math.floor(reactionCounter.implicitHeight * 1.4)
 					width: 1
 					color: reaction.hovered ? colors.highlight : colors.text
 				}
@@ -64,7 +64,7 @@ Flow {
 			background: Rectangle {
 				anchors.centerIn: parent
 				implicitWidth: reaction.implicitWidth
-				implicitHeight: reaction.implicitHeight
+				height: reaction.implicitHeight
 				border.color: (reaction.hovered || model.selfReacted )? colors.highlight : colors.text
 				color: colors.base
 				border.width: 1
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index 42791e0b..c8e6eb09 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -25,13 +25,13 @@ MouseArea {
 		messageContextMenu.show(model.id, model.type, model.isEncrypted, row)
 	}
 	Rectangle {
-		color: (timelineSettings.message_hover_highlight && parent.containsMouse) ? colors.base : "transparent"
+		color: (settings.isMessageHoverHighlightEnabled && parent.containsMouse) ? colors.base : "transparent"
 		anchors.fill: row
 	}
 	RowLayout {
 		id: row
 
-		anchors.leftMargin: avatarSize + 4
+		anchors.leftMargin: avatarSize + 16
 		anchors.left: parent.left
 		anchors.right: parent.right
 
@@ -78,7 +78,7 @@ MouseArea {
 		}
 
 		ImageButton {
-			visible: timelineSettings.buttons
+			visible: settings.buttonsInTimeline
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
@@ -94,7 +94,7 @@ MouseArea {
 			onClicked: chat.model.replyAction(model.id)
 		}
 		ImageButton {
-			visible: timelineSettings.buttons
+			visible: settings.buttonsInTimeline
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 145a82ce..08130033 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -3,7 +3,6 @@ import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.2
 import QtGraphicalEffects 1.0
 import QtQuick.Window 2.2
-import Qt.labs.settings 1.0
 
 import im.nheko 1.0
 
@@ -21,22 +20,6 @@ Page {
 		id: fontMetrics
 	}
 
-	Settings {
-		id: settings
-		category: "user"
-		property bool avatar_circles: true
-		property string emoji_font_family: "default"
-		property double font_size: Qt.application.font.pointSize
-	}
-
-	Settings {
-		id: timelineSettings
-		category: "user/timeline"
-		property bool buttons: true
-		property bool message_hover_highlight: false
-		property bool enlarge_emoji_only_msg: false
-	}
-
 	Menu {
 		id: messageContextMenu
 		modal: true
@@ -102,7 +85,7 @@ Page {
 		BusyIndicator {
 			visible: running
 			anchors.centerIn: parent
-            running: timelineManager.isInitialSync
+			running: timelineManager.isInitialSync
 			height: 200
 			width: 200
 			z: 3
@@ -113,12 +96,12 @@ Page {
 
 			visible: timelineManager.timeline != null
 
-			cacheBuffer: 500
+			cacheBuffer: 400
 
-			anchors.left: parent.left
-			anchors.right: parent.right
+			anchors.horizontalCenter: parent.horizontalCenter
 			anchors.top: parent.top
 			anchors.bottom: chatFooter.top
+			width: parent.width
 
 			anchors.leftMargin: 4
 			anchors.rightMargin: scrollbar.width
@@ -160,7 +143,7 @@ Page {
 				id: scrollbar
 				parent: chat.parent
 				anchors.top: chat.top
-				anchors.left: chat.right
+				anchors.right: chat.right
 				anchors.bottom: chat.bottom
 			}
 
@@ -175,7 +158,8 @@ Page {
 
 				id: wrapper
 				property Item section
-				width: chat.width
+				anchors.horizontalCenter: parent.horizontalCenter
+				width: (settings.timelineMaxWidth > 100 && (parent.width - settings.timelineMaxWidth) > 32) ? settings.timelineMaxWidth : (parent.width - 32)
 				height: section ? section.height + timelinerow.height : timelinerow.height
 				color: "transparent"
 
@@ -245,7 +229,8 @@ Page {
 					}
 					Row {
 						height: userName.height
-                        spacing: 4
+						spacing: 8
+
 						Avatar {
 							width: avatarSize
 							height: avatarSize
diff --git a/resources/qml/delegates/TextMessage.qml b/resources/qml/delegates/TextMessage.qml
index d17723f3..b3c45c36 100644
--- a/resources/qml/delegates/TextMessage.qml
+++ b/resources/qml/delegates/TextMessage.qml
@@ -6,5 +6,5 @@ MatrixText {
 	width: parent ? parent.width : undefined
 	height: isReply ? Math.min(chat.height / 8, implicitHeight) : undefined
 	clip: true
-	font.pointSize: (timelineSettings.enlarge_emoji_only_msg && model.data.isOnlyEmoji > 0 && model.data.isOnlyEmoji < 4) ? settings.font_size * 3 : settings.font_size
+	font.pointSize: (settings.enlargeEmojiOnlyMessages && model.data.isOnlyEmoji > 0 && model.data.isOnlyEmoji < 4) ? settings.fontSize * 3 : settings.fontSize
 }