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.
This commit is contained in:
Sale Djenic 2023-03-14 20:25:43 +01:00 committed by saledjenic
parent 8eba843a5e
commit 388fab4a4a
5 changed files with 187 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

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

View File

@ -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)
}
}
}
}

View File

@ -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
}
}
}
}

View File

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