aboutsummaryrefslogtreecommitdiffstats
path: root/tests/manual/quickcontrols/material/pages/ButtonPage.qml
blob: fa16ad7b4fd4cfd077ce952f76a4a68b7039fcfd (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
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls.Material
import QtQuick.Layouts

import ".."

Page {
    topPadding: 20

    property var backgroundColor

    header: RowLayout {
        CheckBox {
            id: textCheckBox
            text: "Text"
            checked: true
            Layout.fillWidth: false
        }

        CheckBox {
            id: iconCheckBox
            text: "Icon"
            Layout.fillWidth: false
        }

        CheckBox {
            id: disabledCheckBox
            text: "Disabled"
            Layout.fillWidth: false
        }

        Item {
            Layout.fillWidth: true
        }
    }

    component RoundedScaleLayout: ColumnLayout {
        id: roundedScaleLayout
        enabled: !disabledCheckBox.checked

        property bool allowFlat
        property var backgroundColor: undefined
        property var foregroundColor: undefined

        property int contentLeftMargin
        property int contentRightMargin

        RowLayout {
            enabled: roundedScaleLayout.allowFlat

            CheckBox {
                id: flatCheckBox
                text: "Flat"

                Layout.leftMargin: roundedScaleLayout.contentLeftMargin
            }
        }

        RowLayout {
            spacing: Constants.spacing

            Repeater {
                id: roundedScaleRepeater
                model: ListModel {
                    ListElement { displayName: "NotRounded"; roundedScale: Material.NotRounded }
                    ListElement { displayName: "ExtraSmall"; roundedScale: Material.ExtraSmallScale }
                    ListElement { displayName: "Small"; roundedScale: Material.SmallScale }
                    ListElement { displayName: "Medium"; roundedScale: Material.MediumScale }
                    ListElement { displayName: "Large"; roundedScale: Material.LargeScale }
                    ListElement { displayName: "ExtraLarge"; roundedScale: Material.ExtraLargeScale }
                    ListElement { displayName: "Full"; roundedScale: Material.FullScale }
                }

                // Workaround for QTBUG-98859.
                delegate: Component {
                    ColumnLayout {
                        id: scaleLayout
                        spacing: Constants.spacing

                        required property int index
                        required property string displayName
                        required property int roundedScale

                        Layout.leftMargin: index === 0 ? roundedScaleLayout.contentLeftMargin : 0
                        Layout.rightMargin: index === roundedScaleRepeater.count - 1 ? roundedScaleLayout.contentRightMargin : 0
                        Layout.bottomMargin: Constants.spacing

                        Label {
                            text: scaleLayout.displayName

                            Layout.alignment: Qt.AlignHCenter
                        }

                        Repeater {
                            model: 13

                            Button {
                                text: textCheckBox.checked ? modelData : ""
                                flat: flatCheckBox.checked
                                icon.source: iconCheckBox.checked ? "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png" : ""

                                Material.background: roundedScaleLayout.backgroundColor
                                Material.foreground: roundedScaleLayout.foregroundColor
                                Material.elevation: modelData
                                Material.roundedScale: scaleLayout.roundedScale
                            }
                        }
                    }
                }
            }
        }
    }

    ScrollView {
        anchors.fill: parent

        RowLayout {
            spacing: Constants.spacing

            RoundedScaleLayout {
                contentLeftMargin: Constants.spacing
                allowFlat: true
            }

            RoundedScaleLayout {
                backgroundColor: Material.Teal
                foregroundColor: "white"
                contentRightMargin: Constants.spacing
            }
        }
    }
}