summaryrefslogtreecommitdiff
path: root/modules/bar/popouts/kblayout/KbLayout.qml
blob: f612f589d65a3e882dd7eee045403c4da73802bb (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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.components
import qs.components.controls
import qs.services
import qs.config
import qs.utils

import "."

ColumnLayout {
    id: root

    required property Item wrapper

    spacing: Appearance.spacing.small
    width: Config.bar.sizes.kbLayoutWidth

    KbLayoutModel { id: kb }

    function refresh() { kb.refresh() }
    Component.onCompleted: kb.start()

    StyledText {
        Layout.topMargin: Appearance.padding.normal
        Layout.rightMargin: Appearance.padding.small
        text: qsTr("Keyboard Layouts")
        font.weight: 500
    }

    ListView {
        id: list
        model: kb.visibleModel

        Layout.fillWidth: true
        Layout.rightMargin: Appearance.padding.small
        Layout.topMargin: Appearance.spacing.small

        clip: true
        interactive: true
        implicitHeight: Math.min(contentHeight, 320)
        visible: kb.visibleModel.count > 0
        spacing: Appearance.spacing.small

        add: Transition {
            NumberAnimation { properties: "opacity"; from: 0; to: 1; duration: 140 }
            NumberAnimation { properties: "y"; duration: 180; easing.type: Easing.OutCubic }
        }
        remove: Transition { NumberAnimation { properties: "opacity"; to: 0; duration: 100 } }
        move: Transition { NumberAnimation { properties: "y"; duration: 180; easing.type: Easing.OutCubic } }
        displaced: Transition { NumberAnimation { properties: "y"; duration: 180; easing.type: Easing.OutCubic } }

        delegate: Item {
            required property int layoutIndex
            required property string label

            width: list.width
            height: Math.max(36, rowText.implicitHeight + Appearance.padding.small * 2)

            readonly property bool isDisabled: layoutIndex > 3

            StateLayer {
                id: layer
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                implicitHeight: parent.height - 4

                radius: Appearance.rounding.full
                enabled: !isDisabled

                function onClicked(): void {
                    if (!isDisabled)
                        kb.switchTo(layoutIndex);
                }
            }

            StyledText {
                id: rowText
                anchors.verticalCenter: layer.verticalCenter
                anchors.left: layer.left
                anchors.right: layer.right
                anchors.leftMargin: Appearance.padding.small
                anchors.rightMargin: Appearance.padding.small
                text: label
                elide: Text.ElideRight
                opacity: isDisabled ? 0.4 : 1.0
            }

            ToolTip.visible: isDisabled && layer.containsMouse
            ToolTip.text: "XKB limitation: maximum 4 layouts allowed"
        }
    }

    Rectangle {
        visible: kb.activeLabel.length > 0
        Layout.fillWidth: true
        Layout.rightMargin: Appearance.padding.small
        Layout.topMargin: Appearance.spacing.small

        height: 1
        color: Colours.palette.m3onSurfaceVariant
        opacity: 0.35
    }

    RowLayout {
        id: activeRow

        visible: kb.activeLabel.length > 0
        Layout.fillWidth: true
        Layout.rightMargin: Appearance.padding.small
        Layout.topMargin: Appearance.spacing.small
        spacing: Appearance.spacing.small

        opacity: 1
        scale: 1

        MaterialIcon {
            text: "keyboard"
            color: Colours.palette.m3primary
        }

        StyledText {
            Layout.fillWidth: true
            text: kb.activeLabel
            elide: Text.ElideRight
            font.weight: 500
            color: Colours.palette.m3primary
        }

        Connections {
            target: kb
            function onActiveLabelChanged() {
                if (!activeRow.visible)
                    return;
                popIn.restart();
            }
        }

        SequentialAnimation {
            id: popIn
            running: false

            ParallelAnimation {
                NumberAnimation { target: activeRow; property: "opacity"; to: 0.0; duration: 70 }
                NumberAnimation { target: activeRow; property: "scale"; to: 0.92; duration: 70 }
            }

            ParallelAnimation {
                NumberAnimation { target: activeRow; property: "opacity"; to: 1.0; duration: 160; easing.type: Easing.OutCubic }
                NumberAnimation { target: activeRow; property: "scale"; to: 1.0; duration: 220; easing.type: Easing.OutBack }
            }
        }
    }
}