add toggle page indicator interactions

This commit is contained in:
end-4
2025-11-22 16:56:05 +01:00
parent 6376521d14
commit 65ef0ca666
2 changed files with 32 additions and 18 deletions
@@ -93,38 +93,31 @@ Item {
anchors.rightMargin: 6
spacing: 6
FluentIcon {
anchors.horizontalCenter: parent.horizontalCenter
implicitSize: 12
icon: "caret-up"
color: Looks.colors.controlBg
filled: true
opacity: root.currentPage > 0 ? 1 : 0
NavigationArrow {
down: false
}
Repeater {
model: root.pages
delegate: Item {
delegate: MouseArea {
id: pageIndicator
required property int index
hoverEnabled: true
onClicked: root.currentPage = index
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: 6
implicitHeight: 6
Circle {
anchors.centerIn: parent
diameter: index === root.currentPage ? 6 : 4
color: Looks.colors.controlBg
diameter: (index === root.currentPage || pageIndicator.containsMouse) && !pageIndicator.pressed ? 6 : 4
color: pageIndicator.containsMouse ? Looks.colors.controlBgHover : Looks.colors.controlBg
}
}
}
FluentIcon {
anchors.horizontalCenter: parent.horizontalCenter
implicitSize: 12
icon: "caret-down"
color: Looks.colors.controlBg
filled: true
opacity: root.currentPage < (root.pages - 1) ? 1 : 0
NavigationArrow {
down: true
}
}
@@ -136,4 +129,22 @@ Item {
onScrollUp: decreasePage();
onScrollDown: increasePage();
}
component NavigationArrow: FluentIcon {
id: navArrow
required property bool down
anchors.horizontalCenter: parent.horizontalCenter
implicitHeight: 12
implicitWidth: 12 - (2 * upArea.containsPress)
icon: down ? "caret-down" : "caret-up"
color: upArea.containsMouse ? Looks.colors.controlBgHover : Looks.colors.controlBg
filled: true
opacity: ((down && root.currentPage < root.pages - 1) || (!down && root.currentPage > 0)) ? 1 : 0
MouseArea {
id: upArea
anchors.fill: parent
hoverEnabled: true
onClicked: navArrow.down ? root.increasePage() : root.decreasePage();
}
}
}
@@ -48,7 +48,8 @@ Singleton {
property color fg: "#000000"
property color fg1: "#626262"
property color inactiveIcon: "#C4C4C4"
property color controlBg: '#b18484'
property color controlBg: '#807F85'
property color controlBgHover: '#57575B'
property color controlFg: "#FFFFFF"
property color accentUnfocused: "#848484"
}
@@ -74,6 +75,7 @@ Singleton {
property color fg1: "#D1D1D1"
property color inactiveIcon: "#494949"
property color controlBg: "#9B9B9B"
property color controlBgHover: "#CFCED1"
property color controlFg: "#454545"
property color accentUnfocused: "#989898"
}
@@ -103,6 +105,7 @@ Singleton {
property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
property color controlBgHover: root.dark ? root.darkColors.controlBgHover : root.lightColors.controlBgHover
property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
property color danger: "#C42B1C"
property color dangerActive: "#B62D1F"