import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window

    width: layout.implicitWidth + 20
    height: layout.implicitHeight + 20
    visible: true
    title: "Пример"

    ColumnLayout {
        id: layout

        Label {
            Layout.leftMargin: 10
            Layout.topMargin: 10
            text: "Группа кнопок:"
        }

        RowLayout {
            Layout.leftMargin: 30

            // Группа обеспечивает выбор только одной из кнопок:
            // при включении одной кнопки, другие выключаются.
            ButtonGroup {
                id: tools
            }

            Button {
                ButtonGroup.group: tools
                checkable: true
                text: "Выбор 1"

                // Изначально выбрана первая.
                checked: true
            }

            Button {
                ButtonGroup.group: tools
                checkable: true
                text: "Выбор 2"
            }

            Button {
                ButtonGroup.group: tools
                checkable: true
                text: "Выбор 3"
            }
        }

        /////////////////////////////////////////

        Label {
            Layout.leftMargin: 10
            Layout.topMargin: 10
            text: "Значение из диапазона:"
        }

        SpinBox {
            Layout.leftMargin: 30

            from: 1
            to: 100
            value: 10

            editable: true
        }

        RowLayout {
            Layout.leftMargin: 30

            Slider {
                id: slider

                from: 1
                to: 100
                value: 10
            }

            Label {
                text: slider.value.toLocaleString(Qt.locale(), 'f', 0)
            }
        }

        /////////////////////////////////////////

        Label {
            Layout.leftMargin: 10
            Layout.topMargin: 10
            text: "Диалог выбора цвета:"
        }

        ColorDialog {
            id: colorDialog
            title: "Выбор цвета"
            color: "red"
        }

        // Индикатор цвета.
        // При нажатии отображается диалог выбора цвета.
        Rectangle {
            Layout.leftMargin: 30

            width: 30
            height: 30

            color: colorDialog.color

            // Выбранный цвет может быть любым и может совпасть с
            // фоном окна, поэтому нужна рамка.  Цвет для рамки берем
            // из палитры окна: он будет контрастировать с фоном
            // независимо от того, какая тема оформления используется.
            border.color: window.palette.text
            border.width: 1

            MouseArea {
                anchors.fill: parent
                onClicked: colorDialog.visible = true
            }
        }

        /////////////////////////////////////////

        Label {
            Layout.leftMargin: 10
            Layout.topMargin: 10
            text: "Палитра:"
        }

        RowLayout {
            Layout.leftMargin: 30
            spacing: 10

            // Рамка вокруг палитры.
            Rectangle {
                width: 240
                height: 30

                border.width: 1
                border.color: window.palette.text

                // Палитра.
                RowLayout {
                    id: palette

                    // Выбранный цвет.
                    property var selectedColor: "red"

                    anchors.fill: parent
                    anchors.margins: 1  // место для рамки
                    spacing: 0

                    // Repeater повторяет свое содержимое для каждого
                    // значения из модели.
                    Repeater {
                        // Модель — массив цветов.
                        model: ["black",
                                "white",
                                "red",
                                "green",
                                "blue",
                                "cyan",
                                "pink",
                                "yellow"]

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.fillHeight: true

                            // Использовать соответствующее значение
                            // из модели.
                            color: modelData

                            MouseArea {
                                anchors.fill: parent

                                onClicked: {
                                    palette.selectedColor = modelData
                                }
                            }
                        }
                    }
                }
            }

            // Индикатор выбранного из палитры цвета.
            Rectangle {
                width: 30
                height: 30

                border.width: 1
                border.color: window.palette.text

                color: palette.selectedColor
            }
        }
    }
}