Organize qml files a bit

CMakeLists.txt

@@ -70,6 +70,7 @@ include(LMDB)
 # Discover Qt dependencies.
 #
 find_package(Qt5 COMPONENTS Core Widgets LinguistTools Concurrent Svg Multimedia Qml QuickControls2 REQUIRED)
+find_package(Qt5QuickCompiler)
 find_package(Qt5DBus)
 
 if (APPLE)

cmake/Translations.cmake

@@ -21,4 +21,9 @@ if(NOT EXISTS ${_qrc})
 endif()
 
 qt5_add_resources(LANG_QRC ${_qrc})
+#qt5_add_resources(QRC resources/res.qrc)
+if(Qt5QuickCompiler_FOUND)
+	qtquick_compiler_add_resources(QRC resources/res.qrc)
+else()
 	qt5_add_resources(QRC resources/res.qrc)
+endif()

resources/qml/Avatar.qml

@@ -30,6 +30,7 @@ Rectangle {
 		id: img
 		anchors.fill: parent
 		asynchronous: true
+		fillMode: Image.PreserveAspectCrop
 
 		layer.enabled: true
 		layer.effect: OpacityMask {

resources/qml/TimelineRow.qml

@@ -6,29 +6,22 @@ import QtQuick.Window 2.2
 
 import com.github.nheko 1.0
 
-import ".."
+import "./delegates"
 
 RowLayout {
-	property var view: undefined
+	property var view: chat
-	default property alias data: contentItem.data
 
-	height: kid.height // TODO: fix this, we shouldn't need to give the child of contentItem this id!
 	anchors.leftMargin: avatarSize + 4
+	anchors.rightMargin: scrollbar.width
 	anchors.left: parent.left
 	anchors.right: parent.right
-	anchors.rightMargin: scrollbar.width
 
-	function isFullyVisible() {
+	height: contentItem.height
-		return (y - view.contentY - 1) + height < view.height
-	}
-	function getIndex() {
-		return index;
-	}
 
-	Item {
+	MessageDelegate {
-		id: contentItem
 		Layout.fillWidth: true
 		Layout.alignment: Qt.AlignTop
+		id: contentItem
 	}
 
 	StatusIndicator {

resources/qml/TimelineView.qml

@@ -90,14 +90,13 @@ Rectangle {
 		onMovementEnded: updatePosition()
 
 		spacing: 4
-		delegate: RowDelegateChooser {
+		delegate: TimelineRow {
 			function isFullyVisible() {
 				return height > 1 && (y - chat.contentY - 1) + height < chat.height
 			}
 			function getIndex() {
 				return index;
 			}
-
 		}
 
 		section {

resources/qml/delegates/FileMessage.qml

@@ -5,7 +5,7 @@ Rectangle {
 	radius: 10
 	color: colors.dark
 	height: row.height + 24
-	width: parent.width
+	width: parent ? parent.width : undefined
 
 	RowLayout {
 		id: row

resources/qml/delegates/ImageMessage.qml

@@ -3,7 +3,7 @@ import QtQuick 2.6
 import com.github.nheko 1.0
 
 Item {
-	width: Math.min(parent.width, model.width)
+	width: Math.min(parent ? parent.width : undefined, model.width)
 	height: width * model.proportionalHeight
 
 	Image {

resources/qml/delegates/MessageDelegate.qml

@@ -2,50 +2,49 @@ import QtQuick 2.6
 import Qt.labs.qmlmodels 1.0
 import com.github.nheko 1.0
 
-import "./delegates"
-
 DelegateChooser {
 	//role: "type" //< not supported in our custom implementation, have to use roleValue
-	width: chat.width
 	roleValue: model.type
 
+	width: parent.width
+
 	DelegateChoice {
 		roleValue: MtxEvent.TextMessage
-		TimelineRow { view: chat; TextMessage { id: kid } }
+		TextMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.NoticeMessage
-		TimelineRow { view: chat; NoticeMessage { id: kid } }
+		NoticeMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.EmoteMessage
-		TimelineRow { view: chat; TextMessage { id: kid } }
+		TextMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.ImageMessage
-		TimelineRow { view: chat; ImageMessage { id: kid } }
+		ImageMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.Sticker
-		TimelineRow { view: chat; ImageMessage { id: kid } }
+		ImageMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.FileMessage
-		TimelineRow { view: chat; FileMessage { id: kid } }
+		FileMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.VideoMessage
-		TimelineRow { view: chat; PlayableMediaMessage { id: kid } }
+		PlayableMediaMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.AudioMessage
-		TimelineRow { view: chat; PlayableMediaMessage { id: kid } }
+		PlayableMediaMessage {}
 	}
 	DelegateChoice {
 		roleValue: MtxEvent.Redacted
-		TimelineRow { view: chat; Redacted { id: kid } }
+		Redacted {}
 	}
 	DelegateChoice {
-		TimelineRow { view: chat; Placeholder { id: kid } }
+		Placeholder {}
 	}
 }

resources/qml/delegates/NoticeMessage.qml

@@ -5,7 +5,7 @@ TextEdit {
 	textFormat: TextEdit.RichText
 	readOnly: true
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	selectByMouse: true
 	font.italic: true
 	color: inactiveColors.text

resources/qml/delegates/Placeholder.qml

@@ -5,6 +5,6 @@ Label {
 	text: qsTr("unimplemented event: ") + model.type
 	textFormat: Text.PlainText
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	color: inactiveColors.text
 }

resources/qml/delegates/PlayableMediaMessage.qml

@@ -10,7 +10,7 @@ Rectangle {
 	radius: 10
 	color: colors.dark
 	height: content.height + 24
-	width: parent.width
+	width: parent ? parent.width : undefined
 
 	Column { 
 		id: content

resources/qml/delegates/TextMessage.qml

@@ -5,7 +5,7 @@ TextEdit {
 	textFormat: TextEdit.RichText
 	readOnly: true
 	wrapMode: Text.Wrap
-	width: parent.width
+	width: parent ? parent.width : undefined
 	selectByMouse: true
 	color: colors.text
 }

resources/res.qrc

@@ -116,11 +116,11 @@
     </qresource>
     <qresource prefix="/">
         <file>qml/TimelineView.qml</file>
-        <file>qml/RowDelegateChooser.qml</file>
         <file>qml/Avatar.qml</file>
         <file>qml/StatusIndicator.qml</file>
         <file>qml/EncryptionIndicator.qml</file>
-        <file>qml/delegates/TimelineRow.qml</file>
+        <file>qml/TimelineRow.qml</file>
+        <file>qml/delegates/MessageDelegate.qml</file>
         <file>qml/delegates/TextMessage.qml</file>
         <file>qml/delegates/NoticeMessage.qml</file>
         <file>qml/delegates/ImageMessage.qml</file>