import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    id: root
    ListModel {
        id: choices
        ListElement { text: "Banana" }
        ListElement { text: "Orange" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }

    Item {
        id: flickable
        anchors.fill: parent

        RowLayout {
            id: contentRow
            anchors.fill:parent
            anchors.margins: 8
            spacing: 16
            ColumnLayout {
                id: firstColumn
                Layout.minimumWidth: implicitWidth
                Layout.fillWidth: false
                RowLayout {
                    id: buttonrow
                    Button {
                        id: button1
                        text: "Button 1"
                        tooltip:"This is an interesting tool tip"
                        Layout.fillWidth: true
                    }
                    Button {
                        id:button2
                        text:"Button 2"
                        Layout.fillWidth: true
                        menu: Menu {
                            MenuItem { text: "This Button" }
                            MenuItem { text: "Happens To Have" }
                            MenuItem { text: "A Menu Assigned" }
                        }
                    }
                }
                ComboBox {
                    id: combo
                    model: choices
                    currentIndex: 2
                    Layout.fillWidth: true
                }
                ComboBox {
                    model: Qt.fontFamilies()
                    Layout.fillWidth: true
                    currentIndex: 47
                }
                ComboBox {
                    id: editableCombo
                    editable: true
                    model: choices
                    Layout.fillWidth: true
                    currentIndex: 2
                    onAccepted: {
                        if (editableCombo.find(currentText) === -1) {
                            choices.append({text: editText})
                            currentIndex = editableCombo.find(editText)
                        }
                    }
                }
                RowLayout {
                    SpinBox {
                        id: t1
                        Layout.fillWidth: true
                        minimumValue: -50
                        value: -20
                    }
                    SpinBox {
                        id: t2
                        Layout.fillWidth: true
                    }
                }
                TextField {
                    id: t3
                    placeholderText: "This is a placeholder for a TextField"
                    Layout.fillWidth: true
                }
                ProgressBar {
                    // normalize value [0.0 .. 1.0]
                    value: (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue)
                    Layout.fillWidth: true
                }
                ProgressBar {
                    indeterminate: true
                    Layout.fillWidth: true
                }
                Slider {
                    id: slider
                    value: 0.5
                    Layout.fillWidth: true
                    stepSize: tickmarksEnabled ? 0.1 : 0
                }
                MouseArea {
                    id: busyCheck
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    hoverEnabled:true
                    Layout.preferredHeight: busyIndicator.height
                    BusyIndicator {
                        id: busyIndicator
                        running: busyCheck.containsMouse
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }
    }
}