optionally use QQuickWidget and replace ColorOverlay -> colorImageProvider

5 files changed, 128 insertions, 146 deletions

diff --git a/resources/qml/EncryptionIndicator.qml b/resources/qml/EncryptionIndicator.qml
index 0d0e86cf..2cd9161b 100644
--- a/resources/qml/EncryptionIndicator.qml
+++ b/resources/qml/EncryptionIndicator.qml
@@ -1,6 +1,5 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
-import QtGraphicalEffects 1.0
 import com.github.nheko 1.0
 
 Rectangle {
@@ -19,12 +18,7 @@ Rectangle {
 	Image {
 		id: stateImg
 		anchors.fill: parent
-		source: "qrc:/icons/icons/ui/lock.png"
-	}
-	ColorOverlay {
-		anchors.fill: stateImg
-		source: stateImg
-		color: colors.buttonText
+		source: "image://colorimage/:/icons/icons/ui/lock.png?"+colors.buttonText
 	}
 }
 
diff --git a/resources/qml/ImageButton.qml b/resources/qml/ImageButton.qml
index dda9865b..dc576e18 100644
--- a/resources/qml/ImageButton.qml
+++ b/resources/qml/ImageButton.qml
@@ -1,9 +1,8 @@
 import QtQuick 2.3
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.0
 
 Button {
-	property alias image: buttonImg.source
+	property string image: undefined
 
 	id: button
 
@@ -17,11 +16,7 @@ Button {
 		id: buttonImg
 		// Workaround, can't get icon.source working for now...
 		anchors.fill: parent
-	}
-	ColorOverlay {
-		anchors.fill: buttonImg
-		source: buttonImg
-		color: button.hovered ? colors.highlight : colors.buttonText
+		source: "image://colorimage/" + image + "?" + (button.hovered ? colors.highlight : colors.buttonText)
 	}
 
 	MouseArea
diff --git a/resources/qml/StatusIndicator.qml b/resources/qml/StatusIndicator.qml
index 9f8d2cae..2ed59a17 100644
--- a/resources/qml/StatusIndicator.qml
+++ b/resources/qml/StatusIndicator.qml
@@ -1,6 +1,5 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
-import QtGraphicalEffects 1.0
 import com.github.nheko 1.0
 
 Rectangle {
@@ -28,18 +27,12 @@ Rectangle {
 		// Workaround, can't get icon.source working for now...
 		anchors.fill: parent
 		source: switch (indicator.state) {
-			case MtxEvent.Failed: return "qrc:/icons/icons/ui/remove-symbol.png"
-			case MtxEvent.Sent: return "qrc:/icons/icons/ui/clock.png"
-			case MtxEvent.Received: return "qrc:/icons/icons/ui/checkmark.png"
-			case MtxEvent.Read: return "qrc:/icons/icons/ui/double-tick-indicator.png"
+			case MtxEvent.Failed: return "image://colorimage/:/icons/icons/ui/remove-symbol.png?" + colors.buttonText
+			case MtxEvent.Sent: return "image://colorimage/:/icons/icons/ui/clock.png?" + colors.buttonText
+			case MtxEvent.Received: return "image://colorimage/:/icons/icons/ui/checkmark.png?" + colors.buttonText
+			case MtxEvent.Read: return "image://colorimage/:/icons/icons/ui/double-tick-indicator.png?" + colors.buttonText
 			default: return ""
 		}
 	}
-	ColorOverlay {
-		anchors.fill: stateImg
-		source: stateImg
-		color: colors.buttonText
-		visible: stateImg.source != ""
-	}
 }
 
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index 8f9090e3..63a84701 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -50,7 +50,7 @@ RowLayout {
 		Layout.preferredHeight: 16
 		id: replyButton
 
-		image: "qrc:/icons/icons/ui/mail-reply.png"
+		image: ":/icons/icons/ui/mail-reply.png"
 		ToolTip {
 			visible: replyButton.hovered
 			text: qsTr("Reply")
@@ -64,7 +64,7 @@ RowLayout {
 		Layout.preferredHeight: 16
 		id: optionsButton
 
-		image: "qrc:/icons/icons/ui/vertical-ellipsis.png"
+		image: ":/icons/icons/ui/vertical-ellipsis.png"
 		ToolTip {
 			visible: optionsButton.hovered
 			text: qsTr("Options")
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index c2f6f9b9..b25b3a7c 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -8,151 +8,151 @@ import com.github.nheko 1.0
 
 import "./delegates"
 
-Rectangle {
-	anchors.fill: parent
-
+Item {
 	property var colors: currentActivePalette
 	property var systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled }
 	property var inactiveColors: currentInactivePalette ? currentInactivePalette : systemInactive
 	property int avatarSize: 40
 
-	color: colors.window
-
-	Text {
-		visible: !timelineManager.timeline
-		anchors.centerIn: parent
-		text: qsTr("No room open")
-		font.pointSize: 24
-		color: colors.windowText
-	}
+	Rectangle {
+		anchors.fill: parent
+		color: colors.window
+
+		Text {
+			visible: !timelineManager.timeline
+			anchors.centerIn: parent
+			text: qsTr("No room open")
+			font.pointSize: 24
+			color: colors.windowText
+		}
 
-	ListView {
-		id: chat
+		ListView {
+			id: chat
 
-		cacheBuffer: 2000
+			cacheBuffer: 2000
 
-		visible: timelineManager.timeline != null
-		anchors.fill: parent
+			visible: timelineManager.timeline != null
+			anchors.fill: parent
 
-		anchors.leftMargin: 4
-		anchors.rightMargin: scrollbar.width
+			anchors.leftMargin: 4
+			anchors.rightMargin: scrollbar.width
 
-		model: timelineManager.timeline
+			model: timelineManager.timeline
 
-		onModelChanged: {
-			if (model) {
-				currentIndex = model.currentIndex
-				if (model.currentIndex == count - 1) {
-					positionViewAtEnd()
-				} else {
-					positionViewAtIndex(model.currentIndex, ListView.End)
-				}
+			onModelChanged: {
+				if (model) {
+					currentIndex = model.currentIndex
+					if (model.currentIndex == count - 1) {
+						positionViewAtEnd()
+					} else {
+						positionViewAtIndex(model.currentIndex, ListView.End)
+					}
 
-				if (contentHeight < height) {
-					model.fetchHistory();
+					//if (contentHeight < height) {
+					//	model.fetchHistory();
+					//}
 				}
 			}
-		}
 
-		ScrollBar.vertical: ScrollBar {
-			id: scrollbar
-			anchors.top: parent.top
-			anchors.left: parent.right
-			anchors.bottom: parent.bottom
-			onPressedChanged: if (!pressed) chat.updatePosition()
-		}
-
-		property bool atBottom: false
-		onCountChanged: {
-			if (atBottom && Window.active) {
-				var newIndex = count - 1 // last index
-				positionViewAtEnd()
-				currentIndex = newIndex
-				model.currentIndex = newIndex
+			ScrollBar.vertical: ScrollBar {
+				id: scrollbar
+				anchors.top: parent.top
+				anchors.left: parent.right
+				anchors.bottom: parent.bottom
+				onPressedChanged: if (!pressed) chat.updatePosition()
 			}
 
-			if (contentHeight < height && model) {
-				model.fetchHistory();
-			}
-		}
+			property bool atBottom: false
+			onCountChanged: {
+				if (atBottom) {
+					var newIndex = count - 1 // last index
+					positionViewAtEnd()
+					currentIndex = newIndex
+					model.currentIndex = newIndex
+				}
 
-		onAtYBeginningChanged: if (atYBeginning) model.fetchHistory()
-
-		function updatePosition() {
-			for (var y = chat.contentY + chat.height; y > chat.height; y -= 5) {
-				var i = chat.itemAt(100, y);
-				if (!i) continue;
-				if (!i.isFullyVisible()) continue;
-				chat.model.currentIndex = i.getIndex();
-				chat.currentIndex = i.getIndex()
-				atBottom = i.getIndex() == count - 1;
-				console.log("bottom:" + atBottom)
-				break;
+				if (contentHeight < height && model) {
+					model.fetchHistory();
+				}
 			}
-		}
-		onMovementEnded: updatePosition()
 
-		spacing: 4
-		delegate: TimelineRow {
-			function isFullyVisible() {
-				return height > 1 && (y - chat.contentY - 1) + height < chat.height
-			}
-			function getIndex() {
-				return index;
+			onAtYBeginningChanged: if (atYBeginning) model.fetchHistory()
+
+			function updatePosition() {
+				for (var y = chat.contentY + chat.height; y > chat.height; y -= 9) {
+					var i = chat.itemAt(100, y);
+					if (!i) continue;
+					if (!i.isFullyVisible()) continue;
+					chat.model.currentIndex = i.getIndex();
+					chat.currentIndex = i.getIndex()
+					atBottom = i.getIndex() == count - 1;
+					break;
+				}
 			}
-		}
+			onMovementEnded: updatePosition()
 
-		section {
-			property: "section"
-			delegate: Column {
-				topPadding: 4
-				bottomPadding: 4
-				spacing: 8
-
-				width: parent.width
-				height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8
-
-				Label {
-					id: dateBubble
-					anchors.horizontalCenter: parent.horizontalCenter
-					visible: section.includes(" ")
-					text: chat.model.formatDateSeparator(new Date(Number(section.split(" ")[1])))
-					color: colors.windowText
-
-					height: contentHeight * 1.2
-					width: contentWidth * 1.2
-					horizontalAlignment: Text.AlignHCenter
-					background: Rectangle {
-						radius: parent.height / 2
-						color: colors.dark
-					}
+			spacing: 4
+			delegate: TimelineRow {
+				function isFullyVisible() {
+					return height > 1 && (y - chat.contentY - 1) + height < chat.height
 				}
-				Row {
-					height: userName.height
-					spacing: 4
-					Avatar {
-						width: avatarSize
-						height: avatarSize
-						url: chat.model.avatarUrl(section.split(" ")[0]).replace("mxc://", "image://MxcImage/")
-						displayName: chat.model.displayName(section.split(" ")[0])
-
-						MouseArea {
-							anchors.fill: parent
-							onClicked: chat.model.openUserProfile(section.split(" ")[0])
-							cursorShape: Qt.PointingHandCursor
+				function getIndex() {
+					return index;
+				}
+			}
+
+			section {
+				property: "section"
+				delegate: Column {
+					topPadding: 4
+					bottomPadding: 4
+					spacing: 8
+
+					width: parent.width
+					height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8
+
+					Label {
+						id: dateBubble
+						anchors.horizontalCenter: parent.horizontalCenter
+						visible: section.includes(" ")
+						text: chat.model.formatDateSeparator(new Date(Number(section.split(" ")[1])))
+						color: colors.windowText
+
+						height: contentHeight * 1.2
+						width: contentWidth * 1.2
+						horizontalAlignment: Text.AlignHCenter
+						background: Rectangle {
+							radius: parent.height / 2
+							color: colors.dark
 						}
 					}
+					Row {
+						height: userName.height
+						spacing: 4
+						Avatar {
+							width: avatarSize
+							height: avatarSize
+							url: chat.model.avatarUrl(section.split(" ")[0]).replace("mxc://", "image://MxcImage/")
+							displayName: chat.model.displayName(section.split(" ")[0])
+
+							MouseArea {
+								anchors.fill: parent
+								onClicked: chat.model.openUserProfile(section.split(" ")[0])
+								cursorShape: Qt.PointingHandCursor
+							}
+						}
 
-					Text { 
-						id: userName
-						text: chat.model.escapeEmoji(chat.model.displayName(section.split(" ")[0]))
-						color: chat.model.userColor(section.split(" ")[0], colors.window)
-						textFormat: Text.RichText
-
-						MouseArea {
-							anchors.fill: parent
-							onClicked: chat.model.openUserProfile(section.split(" ")[0])
-							cursorShape: Qt.PointingHandCursor
+						Text { 
+							id: userName
+							text: chat.model.escapeEmoji(chat.model.displayName(section.split(" ")[0]))
+							color: chat.model.userColor(section.split(" ")[0], colors.window)
+							textFormat: Text.RichText
+
+							MouseArea {
+								anchors.fill: parent
+								onClicked: chat.model.openUserProfile(section.split(" ")[0])
+								cursorShape: Qt.PointingHandCursor
+							}
 						}
 					}
 				}