import QtQuick 2.12
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15

Item {
    id: rootItem
    width: 420
    height: 1080
    property int labelWidth: Math.min((rootItem.width * 1 / 3), 200)
    property int doubleControlWidth: Math.min(
                                         (rootItem.width - rootItem.labelWidth - 40) / 2,
                                         300)

    Rectangle {
        id: rectangle2
        color: "#3c3b3b"
        anchors.fill: parent
    }

    Column {
        id: column
        anchors.fill: parent

        Rectangle {
            id: rectangle
            width: parent.width
            height: 20
            color: "#ffffff"
        }

        GridLayout {
            id: grid
            width: parent.width
            columnSpacing: 0
            rowSpacing: 4

            rows: 2
            columns: 6

            Text {
                id: text1
                color: "#e8e4e4"
                text: qsTrId("Position")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.labelWidth
                Layout.preferredWidth: rootItem.labelWidth

                Rectangle {
                    id: rectangle3
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text2
                Layout.preferredWidth: 10
                color: "#e8e4e4"
                text: qsTrId("X")
                font.pixelSize: 12
                Layout.maximumHeight: 10
                Layout.maximumWidth: 10

                Rectangle {
                    id: rectangle4
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            SpinBox {
                id: spinBox

                Layout.fillWidth: true

                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
                to: 200
                value: rootItem.labelWidth
            }

            Text {
                id: text3
                color: "#e8e4e4"
                text: qsTrId("y")
                font.pixelSize: 12
                Layout.maximumWidth: 10
                Layout.preferredWidth: 10

                Rectangle {
                    id: rectangle5
                    color: "#4b54d6"
                    anchors.fill: parent
                    z: -1
                }
            }

            SpinBox {
                id: spinBoxY

                Layout.fillWidth: true

                value: rootItem.doubleControlWidth
                to: 1000
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Item {
                id: spacer
                width: 10
                height: 10
                Layout.fillWidth: true
            }

            Text {
                id: text4
                color: "#e8e4e4"
                text: qsTrId("Size")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.labelWidth
                Layout.preferredWidth: rootItem.labelWidth

                Rectangle {
                    id: rectangle6
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text5
                color: "#e8e4e4"
                text: qsTrId("W")
                font.pixelSize: 12

                Layout.maximumWidth: 10
                Layout.preferredWidth: 10
            }

            SpinBox {
                id: spinBox2

                value: 50
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Text {
                id: text6
                color: "#e8e4e4"
                text: qsTrId("X")
                font.pixelSize: 12
                Layout.preferredWidth: 10
                Layout.maximumWidth: 10
            }

            SpinBox {
                id: spinBox3

                value: 40
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Item {
                id: spacer2
                width: 10
                height: 10
                Layout.fillWidth: true
            }
        }

        Rectangle {
            id: rectangle1
            width: parent.width
            height: 20
            color: "#ffffff"
        }

        GridLayout {
            id: grid1
            width: parent.width
            rowSpacing: 6
            columnSpacing: 0
            rows: 3
            columns: 6

            Text {
                id: text7
                color: "#e8e4e4"
                text: qsTrId("Visibility")
                font.pixelSize: 12
                Layout.maximumWidth: rootItem.labelWidth
                Layout.fillWidth: true
                Layout.preferredWidth: rootItem.labelWidth

                Rectangle {
                    id: rectangle7
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text8
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.preferredWidth: 10

                Layout.maximumWidth: 10

                Rectangle {
                    id: rectangle10
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            CheckBox {
                id: checkBox
                text: qsTr("Check Box")
                width: rootItem.doubleControlWidth
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Text {
                id: text10
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.preferredWidth: 10
                Layout.maximumHeight: 10
                Layout.maximumWidth: 10
            }

            CheckBox {
                id: checkBox1
                text: qsTrId("Check Box")
                width: rootItem.doubleControlWidth
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Item {
                id: spacer3
                width: 10
                height: 10
                Layout.fillWidth: true
            }

            Text {
                id: text9
                color: "#e8e4e4"
                text: qsTrId("Visibility")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.preferredWidth: rootItem.labelWidth
                Layout.maximumWidth: rootItem.labelWidth
                Rectangle {
                    id: rectangle8
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text11
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.preferredWidth: 10

                Layout.maximumWidth: 10

                Rectangle {
                    id: rectangle9
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            ComboBox {
                id: comboBox
                Layout.columnSpan: 3
                Layout.fillWidth: true
            }

            Item {
                id: spacer5
                width: 10
                height: 10
                Layout.fillWidth: true
            }

            Text {
                id: text12
                color: "#e8e4e4"
                text: qsTrId("Value")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.preferredWidth: rootItem.labelWidth
                Layout.maximumWidth: rootItem.labelWidth
                Rectangle {
                    id: rectangle11
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text13
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.preferredWidth: 10
                Layout.maximumWidth: 10
                Rectangle {
                    id: rectangle12
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            SpinBox {
                id: comboBox1
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Item {
                id: spacer4
                width: 10
                height: 10
                Layout.columnSpan: 3
                Layout.fillWidth: true
            }

            Text {
                id: text14
                color: "#e8e4e4"
                text: qsTrId("Font Size")
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.preferredWidth: rootItem.labelWidth
                Layout.maximumWidth: rootItem.labelWidth
                Rectangle {
                    id: rectangle13
                    color: "#d50303"
                    anchors.fill: parent
                    z: -1
                }
            }

            Text {
                id: text15
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.preferredWidth: 10
                Layout.maximumWidth: 10
                Rectangle {
                    id: rectangle14
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            ComboBox {
                id: comboBox2
                displayText: "28"
                textRole: "pt"
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Text {
                id: text16
                color: "#e8e4e4"
                text: qsTrId("")
                font.pixelSize: 12
                Layout.preferredWidth: 10
                Layout.maximumWidth: 10
                Rectangle {
                    id: rectangle15
                    color: "#3ee77e"
                    anchors.fill: parent
                    z: -1
                }
            }

            ComboBox {
                id: comboBox3
                displayText: "Pixel"
                Layout.fillWidth: true
                Layout.maximumWidth: rootItem.doubleControlWidth
                Layout.preferredWidth: rootItem.doubleControlWidth
            }

            Item {
                id: spacer6
                width: 10
                height: 10
                Layout.fillWidth: true
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;formeditorColor:"#000000";formeditorZoom:1.100000023841858}
}
##^##*/