Use an ImageButton for the StatusIndicator

Incidentally, this allows ImageButtons to not change color.

resources/qml/ImageButton.qml

@@ -8,6 +8,7 @@ AbstractButton {
     property string image: undefined
     property color highlightColor: colors.highlight
     property color buttonTextColor: colors.buttonText
+    property bool changeColorOnHover: true
 
     focusPolicy: Qt.NoFocus
     width: 16
@@ -18,7 +19,12 @@ AbstractButton {
 
         // Workaround, can't get icon.source working for now...
         anchors.fill: parent
-        source: "image://colorimage/" + image + "?" + (button.hovered ? highlightColor : buttonTextColor)
+        source: {
+            var src = "image://colorimage/" + image;
+            if (changeColorOnHover)
+                src += "?" + (button.hovered ? highlightColor : buttonTextColor);
+            return src;
+        }
     }
 
     MouseArea {

resources/qml/StatusIndicator.qml

@@ -2,16 +2,16 @@ import QtQuick 2.5
 import QtQuick.Controls 2.1
 import im.nheko 1.0
 
-Rectangle {
+ImageButton {
     id: indicator
 
     property int state: 0
     property string eventId
 
-    color: "transparent"
     width: 16
     height: 16
-    ToolTip.visible: ma.containsMouse && state != MtxEvent.Empty
+    hoverEnabled: true
+    ToolTip.visible: hovered && state != MtxEvent.Empty
     ToolTip.text: {
         switch (state) {
         case MtxEvent.Failed:
@@ -27,37 +27,30 @@ Rectangle {
         }
     }
 
-    MouseArea {
-        id: ma
-
-        anchors.fill: parent
-        hoverEnabled: true
-
-        onClicked: {
-            if (indicator.state == MtxEvent.Read)
-                TimelineManager.timeline.readReceiptsAction(indicator.eventId);
-        }
+    onClicked: {
+        if (state == MtxEvent.Read)
+            TimelineManager.timeline.readReceiptsAction(eventId);
     }
 
-    Image {
-        id: stateImg
-
-        // Workaround, can't get icon.source working for now...
-        anchors.fill: parent
-        source: {
-            switch (indicator.state) {
-            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 "";
-            }
+    image: {
+        switch (state) {
+        case MtxEvent.Failed:
+            return ":/icons/icons/ui/remove-symbol.png";
+        case MtxEvent.Sent:
+            return ":/icons/icons/ui/clock.png";
+        case MtxEvent.Received:
+            return ":/icons/icons/ui/checkmark.png";
+        case MtxEvent.Read:
+            return ":/icons/icons/ui/double-tick-indicator.png";
+        default:
+            return "";
         }
     }
 
+    changeColorOnHover: {
+        if (state == MtxEvent.Read)
+            return true;
+        else
+            return false;
+    }
 }