feat(StatusQ): extract StatusRollArea

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

@@ -0,0 +1,46 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: root
+
+    property bool mirrored: false
+    property color gradientColor: Theme.palette.statusAppLayout.backgroundColor
+
+    signal clicked()
+
+    width: height * 2
+
+    gradient: Gradient {
+        orientation: Gradient.Horizontal
+        GradientStop { position: mirrored ? 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
+        width: parent.height
+        height: width
+        sourceSize: Qt.size(width, height)
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        preventStealing: true
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: root.clicked()
+    }
+
+    QtObject {
+        id: d
+
+        function iconSrc(icon) {
+            return "../../assets/img/icons/" + icon + ".svg";
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -9,6 +9,7 @@ StatusColorSelector 0.1 StatusColorSelector.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusIdenticonRing 0.1 StatusIdenticonRing.qml
 StatusItemPicker 0.1 StatusItemPicker.qml
+StatusNavigationButton 0.1 StatusNavigationButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusTabBarIconButton 0.1 StatusTabBarIconButton.qml
 StatusToolTip 0.1 StatusToolTip.qml

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

@@ -0,0 +1,50 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: root
+
+    property alias content: contentLoader.sourceComponent
+    property color arrowsGradientColor: Theme.palette.statusAppLayout.backgroundColor
+
+    implicitHeight: contentLoader.height
+
+    StatusScrollView {
+        id: roll
+
+        anchors.fill: parent
+        padding: 0
+        contentWidth: contentLoader.width
+
+        StatusScrollBar.horizontal.policy: StatusScrollBar.AlwaysOff
+
+        Loader {
+            id: contentLoader
+        }
+    }
+
+    StatusNavigationButton {
+        anchors.left: parent.left
+        height: parent.height
+        visible: roll.contentX > 0
+        gradientColor: root.arrowsGradientColor
+
+        onClicked: roll.flick(roll.width, 0)
+    }
+
+    StatusNavigationButton {
+        anchors.right: parent.right
+        height: parent.height
+        visible: roll.contentX + roll.width < roll.contentWidth
+        gradientColor: root.arrowsGradientColor
+        mirrored: true
+
+        onClicked: roll.flick(-roll.width, 0)
+    }
+}

ui/StatusQ/src/StatusQ/Core/qmldir

@@ -12,5 +12,6 @@ StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml
 StatusListView 0.1 StatusListView.qml
 StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusProfileImageSettings 0.1 StatusProfileImageSettings.qml
+StatusRollArea 0.1 StatusRollArea.qml
 StatusScrollView 0.1 StatusScrollView.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml

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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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>