chore(StatusQ): base StatusNavigationButton on QQC2.Button

ui/StatusQ/src/StatusQ/Controls/StatusNavigationButton.qml

@@ -1,46 +1,43 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14
 
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-Rectangle {
+Button {
     id: root
 
-    property bool mirrored: false
     property color gradientColor: Theme.palette.statusAppLayout.backgroundColor
-
-    signal clicked()
+    property bool navigateForward: false
 
     width: height * 2
+    padding: 0
+    hoverEnabled: true
 
+    background: Rectangle {
         gradient: Gradient {
             orientation: Gradient.Horizontal
-        GradientStop { position: mirrored ? 0.0 : 1.0; color: "transparent" }
+            GradientStop { position: navigateForward ? 0.0 : 1.0; color: "transparent" }
             GradientStop { position: 0.5; color: root.gradientColor }
         }
+    }
 
-    // TODO: use SVGImage (move SVGImage to StatusQ)
-    Image {
-        source: mirrored ? d.iconSrc("arrow-next") : d.iconSrc("arrow-previous")
-        anchors.right: mirrored ? parent.right : undefined
-        anchors.left: mirrored ? undefined : parent.left
+    contentItem: Item {
+        StatusIcon {
+            icon: navigateForward ? "next" : "previous"
+            anchors.right: navigateForward ? parent.right : undefined
+            anchors.left: navigateForward ? undefined : parent.left
             width: parent.height
             height: width
-        sourceSize: Qt.size(width, height)
+            color: Theme.palette.primaryColor1
         }
 
+
+        // otherwise there is no pointing hand cursor when button is hovered
         MouseArea {
             anchors.fill: parent
-        preventStealing: true
-        hoverEnabled: true
+            acceptedButtons: Qt.NoButton
             cursorShape: Qt.PointingHandCursor
-        onClicked: root.clicked()
-    }
-
-    QtObject {
-        id: d
-
-        function iconSrc(icon) {
-            return "../../assets/img/icons/" + icon + ".svg";
         }
     }
 }

ui/StatusQ/src/StatusQ/Core/StatusRollArea.qml

@@ -43,7 +43,7 @@ Item {
         height: parent.height
         visible: roll.contentX + roll.width < roll.contentWidth
         gradientColor: root.arrowsGradientColor
-        mirrored: true
+        navigateForward: true
 
         onClicked: roll.flick(-roll.width, 0)
     }

ui/StatusQ/src/assets/img/icons/arrow-next.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 5.46967C9.76256 5.17678 10.2374 5.17678 10.5303 5.46967L16.1768 11.1161C16.6649 11.6043 16.6649 12.3957 16.1768 12.8839L10.5303 18.5303C10.2374 18.8232 9.76256 18.8232 9.46967 18.5303C9.17678 18.2374 9.17678 17.7626 9.46967 17.4697L14.5858 12.3536C14.781 12.1583 14.781 11.8417 14.5858 11.6464L9.46967 6.53033C9.17678 6.23744 9.17678 5.76256 9.46967 5.46967Z" fill="#4360DF"/>
-</svg>

ui/StatusQ/src/assets/img/icons/arrow-previous.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3232 5.46967C16.0303 5.17678 15.5555 5.17678 15.2626 5.46967L9.61608 11.1161C9.12798 11.6043 9.12798 12.3957 9.61608 12.8839L15.2626 18.5303C15.5555 18.8232 16.0303 18.8232 16.3232 18.5303C16.6161 18.2374 16.6161 17.7626 16.3232 17.4697L11.2071 12.3536C11.0119 12.1583 11.0119 11.8417 11.2071 11.6464L16.3232 6.53033C16.6161 6.23744 16.6161 5.76256 16.3232 5.46967Z" fill="#4360DF"/>
-</svg>