remarkable-wikipedia/Button.qml at master · dps/remarkable-wikipedia · GitHub

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
109
110
111
import QtQuick 2.9

Item {
    id: root
    clip: true
    property string text: ""

    property string color: "black"
    property string backgroundColor: "transparent"
    property string borderColor: "black"
    property string selectedColor: "transparent"
    property string selectedBackgroundColor: "black"
    property string selectedBorderColor: "transparent"
    property int transitionTime: 300
    property int fontsize: 8
    property int borderwidth: 5
    property bool toggle: false
    signal click()
    signal hold()
    signal release()


    property bool isSelected: false
    property bool isHeld: false

    Rectangle {
        id: background
        anchors.fill: root
        color: root.backgroundColor
        border.color: root.borderColor
        border.width: borderwidth
        Text {
            id: label
            color: root.color
            text: root.text
            anchors.centerIn: parent
            font.pointSize: fontsize
        }
    }
    MouseArea {
        anchors.fill: root
        hoverEnabled: true
        onClicked: {
            if(root.toggle){
                root.isSelected = !root.isSelected;
            }else{
                root.isSelected = true;
                timer.start();
            }
            console.log("click (" + this + ") " +  root.isSelected);
            root.click()
        }
        onPressAndHold: {
            root.isSelected = true;
            root.isHeld = true;
            console.log("hold " + this);
            root.hold()
        }
        onReleased: {
            if(root.isSelected){
                if(root.isHeld){
                    root.isSelected = false;
                }
                console.log("release (" + this + ")");
                root.release()
            }
        }
    }
    state: "resting"
    states: [
        State { name: "resting"; when: !root.isSelected },
        State { name: "pressed"; when: root.isSelected }
    ]
    transitions: [
        Transition {
            from: "resting"
            to: "pressed"
            SequentialAnimation {
                PropertyAction { target: label; property: "color"; value: root.color }
                PropertyAction { target: background; property: "color"; value: root.backgroundColor }
                PropertyAction { target: background; property: "border.color"; value: root.borderColor }
                PauseAnimation { duration: root.transitionTime }
                PropertyAction { target: label; property: "color"; value: root.selectedColor }
                PropertyAction { target: background; property: "color"; value: root.selectedBackgroundColor }
                PropertyAction { target: background; property: "border.color"; value: root.selectedBorderColor }
            }
        },
        Transition {
            from: "pressed"
            to: "resting"
            SequentialAnimation {
                PropertyAction { target: label; property: "color"; value: root.selectedColor }
                PropertyAction { target: background; property: "color"; value: root.selectedBackgroundColor }
                PropertyAction { target: background; property: "border.color"; value: root.selectedBorderColor }
                PauseAnimation { duration: root.transitionTime }
                PropertyAction { target: label; property: "color"; value: root.color }
                PropertyAction { target: background; property: "color"; value: root.backgroundColor }
                PropertyAction { target: background; property: "border.color"; value: root.borderColor }
            }
        }
    ]
    Timer {
        id: timer
        interval: 1
        repeat: false
        onTriggered: {
            root.isSelected = false;
            console.log("click clear (" + this + ") " +  root.isSelected);
        }
    }
}