feat(StatusQ.Components): StatusPageIndicator component introduced

Added `StatusPageIndicator` component which displays buttons in a row,
representing pages from the set range.

Corresponding page in API Documentation added.

ui/StatusQ/sandbox/main.qml

@@ -363,6 +363,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.control(title);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusPageIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
                 }
             }
 

ui/StatusQ/sandbox/pages/StatusPageIndicatorPage.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+    width: 800
+    height: 100
+
+    Column {
+        anchors.fill: parent
+        spacing: 30
+
+        Grid {
+            columns: 2
+            rowSpacing: 20
+            columnSpacing: 50
+
+            Text {
+                text: "Total pages:"
+            }
+            SpinBox {
+                id: totalPages
+                editable: true
+                height: 30
+                from: 1
+                value: 5
+            }
+        }
+
+        StatusPageIndicator {
+            totalPages: totalPages.value
+
+            onCurrentIndexChanged: {
+                console.warn("selected page index is: ", currentIndex)
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/StatusPageIndicator.qml

@@ -0,0 +1,138 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusPageIndicator
+   \inherits Item
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief Displays page indicator, clicking on a certain page number, it becomes selected and `currentIndex` is set accordingly.
+
+   Example:
+
+   \qml
+    StatusPageIndicator {
+        totalPages: 10
+        currentIndex: 5
+    }
+   \endqml
+
+   \image status_page_indicator.png
+
+   For a list of components available see StatusQ.
+*/
+
+Item {
+    id: root
+
+    property int totalPages: 0
+    property int currentIndex: 0
+    property int spacing: 8
+
+    implicitHeight: 38
+    implicitWidth: d.maxElements * d.buttonWidth + (d.maxElements - 1) * root.spacing
+
+    onTotalPagesChanged: d.applyChanges()
+    onCurrentIndexChanged: d.applyChanges()
+
+    QtObject {
+        id: d
+
+        readonly property int maxElements: 7
+        readonly property int buttonWidth: 38
+        readonly property int buttonsInRow: 3
+
+        property ListModel pages: ListModel {}
+
+        function applyChanges() {
+            d.pages.clear()
+            let displayFirst = root.totalPages > 0
+            if (displayFirst) {
+                d.pages.append({"itemIndex": 0, "itemText": (1).toString()})
+            }
+
+            let displayLeftDots = root.totalPages > 5 && root.currentIndex - d.buttonsInRow >= 0
+            if (displayLeftDots) {
+                d.pages.append({"itemIndex": -1, "itemText": "..."})
+            }
+
+            if (root.totalPages >= d.buttonsInRow) {
+                if (root.totalPages < 4) {
+                    d.pages.append({"itemIndex": root.totalPages - 2, "itemText": (root.totalPages - 1).toString()})
+                }
+                else if (root.totalPages < 5) {
+                    d.pages.append({"itemIndex": root.totalPages - 3, "itemText": (root.totalPages - 2).toString()})
+                    d.pages.append({"itemIndex": root.totalPages - 2, "itemText": (root.totalPages - 1).toString()})
+                }
+                else if (root.totalPages < 6) {
+                    d.pages.append({"itemIndex": root.totalPages - 4, "itemText": (root.totalPages - 3).toString()})
+                    d.pages.append({"itemIndex": root.totalPages - 3, "itemText": (root.totalPages - 2).toString()})
+                    d.pages.append({"itemIndex": root.totalPages - 2, "itemText": (root.totalPages - 1).toString()})
+                }
+                else {
+                    if (root.currentIndex == 0) {
+                        d.pages.append({"itemIndex": root.currentIndex + 1, "itemText": (root.currentIndex + 2).toString()})
+                        d.pages.append({"itemIndex": root.currentIndex + 2, "itemText": (root.currentIndex + 3).toString()})
+                    }
+                    else if (root.currentIndex == 1) {
+                        d.pages.append({"itemIndex": root.currentIndex, "itemText": (root.currentIndex + 1).toString()})
+                        d.pages.append({"itemIndex": root.currentIndex + 1, "itemText": (root.currentIndex + 2).toString()})
+                    }
+                    else if (root.currentIndex == root.totalPages - 1) {
+                        d.pages.append({"itemIndex": root.totalPages - 3, "itemText": (root.totalPages - 2).toString()})
+                        d.pages.append({"itemIndex": root.totalPages - 2, "itemText": (root.totalPages - 1).toString()})
+                    }
+                    else if (root.currentIndex == root.totalPages - 2) {
+                        d.pages.append({"itemIndex": root.totalPages - 3, "itemText": (root.totalPages - 2).toString()})
+                        d.pages.append({"itemIndex": root.totalPages - 2, "itemText": (root.totalPages - 1).toString()})
+                    }
+                    else {
+                        d.pages.append({"itemIndex": root.currentIndex - 1, "itemText": (root.currentIndex).toString()})
+                        d.pages.append({"itemIndex": root.currentIndex, "itemText": (root.currentIndex + 1).toString()})
+                        d.pages.append({"itemIndex": root.currentIndex + 1, "itemText": (root.currentIndex + 2).toString()})
+                    }
+                }
+            }
+
+            let displayRightDots = root.totalPages > 5  && root.totalPages - root.currentIndex > d.buttonsInRow
+            if (displayRightDots) {
+                d.pages.append({"itemIndex": -1, "itemText": "..."})
+            }
+
+            let displayLast = root.totalPages > 1
+            if (displayLast) {
+                d.pages.append({"itemIndex": root.totalPages - 1, "itemText": (root.totalPages).toString()})
+            }
+        }
+    }
+
+    ListView {
+        id: listView
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: listView.count * d.buttonWidth + (listView.count - 1) * root.spacing
+        orientation: ListView.Horizontal
+        spacing: root.spacing
+        model: d.pages
+        delegate: StatusBaseButton {
+            width: d.buttonWidth
+            text: itemText
+            size: StatusBaseButton.Size.Small
+            normalColor: itemIndex === root.currentIndex? Theme.palette.primaryColor3 : "transparent"
+            hoverColor: itemIndex === root.currentIndex? Theme.palette.primaryColor2 : Theme.palette.primaryColor3
+            disabledColor: itemIndex === root.currentIndex? Theme.palette.baseColor2 : "transparent"
+            textColor: Theme.palette.primaryColor1
+            disabledTextColor: Theme.palette.baseColor1
+
+            onClicked: {
+                if (itemIndex === -1) {
+                    return
+                }
+                root.currentIndex = itemIndex
+            }
+        }
+    }
+}
+

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -56,3 +56,4 @@ StatusQrCodeScanner 0.1 StatusQrCodeScanner.qml
 StatusSyncDeviceDelegate 0.1 StatusSyncDeviceDelegate.qml
 StatusOnlineBadge 0.1 StatusOnlineBadge.qml
 StatusGroupBox 0.1 StatusGroupBox.qml
+StatusPageIndicator 0.1 StatusPageIndicator.qml