mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 23:09:26 -05:00
add toggle page indicator interactions
This commit is contained in:
+28
-17
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user