summaryrefslogtreecommitdiff
path: root/components/controls/CustomSpinBox.qml
blob: 4611bed9ee3a5464ad15c4bbdc6af8896b21fe6f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
pragma ComponentBehavior: Bound

import ".."
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts

RowLayout {
    id: root

    property int value
    property real max: Infinity
    property real min: -Infinity
    property alias repeatRate: timer.interval

    signal valueModified(value: int)

    spacing: Appearance.spacing.small

    StyledTextField {
        inputMethodHints: Qt.ImhFormattedNumbersOnly
        text: root.value
        onAccepted: root.valueModified(text)

        padding: Appearance.padding.small
        leftPadding: Appearance.padding.normal
        rightPadding: Appearance.padding.normal

        background: StyledRect {
            implicitWidth: 100
            radius: Appearance.rounding.small
            color: Colours.palette.m3surfaceContainerHigh
        }
    }

    StyledRect {
        radius: Appearance.rounding.small
        color: Colours.palette.m3primary

        implicitWidth: implicitHeight
        implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2

        StateLayer {
            id: upState

            color: Colours.palette.m3onPrimary

            onPressAndHold: timer.start()
            onReleased: timer.stop()

            function onClicked(): void {
                root.valueModified(Math.min(root.max, root.value + 1));
            }
        }

        MaterialIcon {
            id: upIcon

            anchors.centerIn: parent
            text: "keyboard_arrow_up"
            color: Colours.palette.m3onPrimary
        }
    }

    StyledRect {
        radius: Appearance.rounding.small
        color: Colours.palette.m3primary

        implicitWidth: implicitHeight
        implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2

        StateLayer {
            id: downState

            color: Colours.palette.m3onPrimary

            onPressAndHold: timer.start()
            onReleased: timer.stop()

            function onClicked(): void {
                root.valueModified(Math.max(root.min, root.value - 1));
            }
        }

        MaterialIcon {
            id: downIcon

            anchors.centerIn: parent
            text: "keyboard_arrow_down"
            color: Colours.palette.m3onPrimary
        }
    }

    Timer {
        id: timer

        interval: 100
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            if (upState.pressed)
                upState.onClicked();
            else if (downState.pressed)
                downState.onClicked();
        }
    }
}