librepods/linux/SegmentedControl.qml at f95f6fe14a63c872f2a8111862084d5ee3e72121 · kavishdevar/librepods · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
pragma ComponentBehavior: Bound

import QtQuick 2.15
import QtQuick.Controls 2.15

Control {
    id: root

    signal activated(int index)

    // Properties
    property var model: ["Option 1", "Option 2"] // Default model
    property int currentIndex: 0
    property color accentColor: palette.highlight
    property color disabledBackgroundColor: "#eef1f5"
    property color disabledSelectedColor: "#b9c4d2"
    property color disabledTextColor: "#8b96a3"

    // Colors using system palette
    readonly property color backgroundColor: root.enabled ? palette.light : root.disabledBackgroundColor
    readonly property color selectedColor: root.enabled ? root.accentColor : root.disabledSelectedColor
    readonly property color textColor: root.enabled ? palette.buttonText : root.disabledTextColor
    readonly property color selectedTextColor: palette.highlightedText

    // System palette
    SystemPalette {
        id: palette
    }

    // Internal properties
    padding: 6
    implicitHeight: 32
    // Removed: implicitWidth: Math.max(200, model.length * 100)

    // Set focus policy to enable keyboard navigation
    focusPolicy: Qt.StrongFocus
    activeFocusOnTab: true

    // Styling
    background: Rectangle {
        radius: height / 2
        color: root.backgroundColor
        border.width: root.activeFocus ? 1 : 0
        border.color: root.selectedColor
    }

    contentItem: Row {
        spacing: root.padding

        Repeater {
            model: root.model

            delegate: Button {
                id: segmentButton
                required property int index
                required property string modelData
                text: modelData
                // Removed: width: (root.availableWidth - (root.model.length - 1) * root.padding) / root.model.length
                height: root.availableHeight
                focusPolicy: Qt.NoFocus // Let the root control handle focus
                enabled: root.enabled

                // Add explicit text color
                contentItem: Text {
                    text: segmentButton.text
                    font: segmentButton.font
                    color: root.currentIndex === segmentButton.index ? root.selectedTextColor : root.textColor
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    leftPadding: 2
                    rightPadding: 2
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    radius: height / 2
                    color: root.currentIndex === segmentButton.index ? root.selectedColor : "transparent"
                    border.width: 0

                    Behavior on color {
                        ColorAnimation {
                            duration: 600
                            easing.type: Easing.OutQuad
                        }
                    }
                }

                onClicked: {
                    if (root.currentIndex !== index) {
                        root.currentIndex = index;
                        root.activated(index);
                    }
                }
            }
        }
    }

    // Handle key events for navigation
    Keys.onPressed: event => {
        if (event.key === Qt.Key_Left) {
            if (root.currentIndex > 0) {
                root.currentIndex--;
                root.activated(root.currentIndex);
                event.accepted = true;
            }
        } else if (event.key === Qt.Key_Right) {
            if (root.currentIndex < root.model.length - 1) {
                root.currentIndex++;
                root.activated(root.currentIndex);
                event.accepted = true;
            }
        } else if (event.key === Qt.Key_Home) {
            if (root.currentIndex !== 0) {
                root.currentIndex = 0;
                root.activated(root.currentIndex);
                event.accepted = true;
            }
        } else if (event.key === Qt.Key_End) {
            const lastIndex = root.model.length - 1;
            if (root.currentIndex !== lastIndex) {
                root.currentIndex = lastIndex;
                root.activated(root.currentIndex);
                event.accepted = true;
            }
        } else if (event.key >= Qt.Key_1 && event.key <= Qt.Key_9) {
            const index = event.key - Qt.Key_1;
            if (index < root.model.length && root.currentIndex !== index) {
                root.currentIndex = index;
                root.activated(root.currentIndex);
                event.accepted = true;
            }
        }
    }
}