aboutsummaryrefslogtreecommitdiffstats
path: root/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ColorScheme.qml
blob: 19c8cd905f76a82c1c8c205d8ef44cc4331321b5 (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
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FileSystemModule

ColumnLayout {
    id: colorScheme

    spacing: 20

    // Inline component that customizes TabButton
    component MyTabButton: TabButton {
        id: root

        implicitWidth: 150
        implicitHeight: 30
        padding: 6
        spacing: 6

        contentItem: Text {
            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            text: root.text
            font.bold: true
            color: Colors.text
        }

        background: Rectangle {
            anchors.fill: parent
            implicitHeight: 40

            color: root.checked ? Colors.active : Colors.selection
            Rectangle {
                height: 4
                width: parent.width
                color: root.checked ? Colors.color1 : Colors.selection
            }
        }
    }

    Item {
        // Spacer item
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Text {
        Layout.alignment: Qt.AlignHCenter

        text: "Select a Scheme!"
        font.pointSize: 30
        font.bold: true
        color: Colors.text
    }

    // Display all the color-scheme names. The model is a string-list provided
    // by our python class.
    TabBar {
        id: schemeSelector

        Layout.alignment: Qt.AlignHCenter

        background: Rectangle {
            color: Colors.surface1
        }

        Repeater {
            model: Colors.getKeys()
            MyTabButton {
                text: modelData
                onClicked: {
                    Colors.setScheme(modelData)
                    themePreviewContainer.background
                            = (modelData === "Solarized") ? "#777777" : "#FEFAEC"
                }
            }
        }
    }

    // The current colors can be visualized using the same method as above.
    Rectangle {
        id: themePreviewContainer

        property color background: "#FEFAEC"

        Layout.alignment: Qt.AlignHCenter

        width: 700
        height: 50
        radius: 10
        color: background

        // Display all used colors inside a row
        Row {
            anchors.centerIn: parent
            spacing: 10

            Repeater {
                model: Colors.currentColors
                Rectangle {
                    width: 35
                    height: width
                    radius: width / 2
                    color: modelData
                }
            }
        }
    }
    Item {
        // Spacer item
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}