clearOS/NavigationButton.qml at main · PlayingKarrde/clearOS · 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
112
113
114
115
import QtQuick 2.12
import QtGraphicalEffects 1.0

FocusScope {
id: root

    property bool selected
    property bool highlighted
    property bool active
    property bool showLabel
    property alias icon: systemImage.source
    property alias label: label.text
    width: parent.width
    height: width

    signal activated

    scale: selected ? 1 : 0.95
    Behavior on scale { NumberAnimation { duration: 100 } }

    Rectangle {
    id: selectionBorder

        width: Math.round(parent.width * 1.2)
        height: width

        anchors.centerIn: systemImage

        opacity: selected || highlighted ? 1 : 0
        radius: width/2

        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: "#f34225" }
            GradientStop { position: 1.0; color: "#bb2960" }
        }
        visible: selected || highlighted
    }

    Rectangle {
    id: selectionmask

        anchors.fill: selectionBorder
        radius: width/2
        anchors.margins: vpx(2)
        color: theme.main
        visible: !showLabel && selected
    }

    Image {
    id: systemImage

        width: vpx(36)
        height: width
        anchors.centerIn: parent
        sourceSize { width: vpx(64); height: vpx(64) }
        fillMode: Image.PreserveAspectFit
        smooth: true
        visible: false
    }

    ColorOverlay {
        anchors.fill: systemImage
        source: systemImage
        color: (selected && showLabel) || (highlighted && !selected) ? "white" : theme.secondary
    }

    Rectangle {
    id: labelContainer

        width: label.paintedWidth + vpx(30)
        height: vpx(50)
        anchors {
            left: selectionBorder.right; leftMargin: vpx(10)
            verticalCenter: selectionBorder.verticalCenter
        }
        radius: height/2
        visible: showLabel
        color: theme.main

        Text {
        id: label

            text: ""
            anchors.fill: parent
            anchors { left: parent.left; leftMargin: vpx(15)}
            font.family: subtitleFont.name
            font.pixelSize: vpx(16)
            font.bold: true
            color: theme.text
            verticalAlignment: Text.AlignVCenter
        }
    }

    // List specific input
    Keys.onPressed: {
        // Accept
        if (api.keys.isAccept(event) && !event.isAutoRepeat) {
            event.accepted = true;
            sfxToggle.play();
            activated();
        }
    }

    // Mouse/touch functionality
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: { highlighted = true }
        onExited: { highlighted = false }
        onClicked: {
            activated();
        }
    }
}