import QtQuick 2.4
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

Item {
    id: item1
    width: 1000
    height: 700

    ListView {
        id: listView
        x: 32
        y: 32
        width: 929
        height: 363
        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
        delegate: Item {
            x: 5
            width: 80
            height: 40
            Row {
                id: row1
                Rectangle {
                    width: 40
                    height: 40
                    color: colorCode
                }

                Text {
                    text: name
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                }
                spacing: 10
            }
        }
    }


        RoundButton {
            id: rbtnpre
            x: 29
            y: 485
            text: "Pre"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 175
        }

        RoundButton {
            id: rbtnstart
            x: 75
            y: 535
            width: 97
            height: 101
            text: "Start"
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
            Layout.preferredHeight: 100
            Layout.preferredWidth: 100
        }

        RoundButton {
            id: rbtnnext
            x: 178
            y: 566
            text: "Nex"
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
        }

        ProgressBar {
            id: progressBar
            x: 237
            y: 583
            width: 420
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
            Layout.preferredHeight: 23
            Layout.preferredWidth: 380
            value: 0.5
        }

        Text {
            id: txttime
            x: 665
            y: 578
            text: qsTr("01:30/03:37")
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
            Layout.preferredHeight: 31
            Layout.preferredWidth: 78
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 12
        }

        Slider {
            id: slidervol
            x: 766
            y: 566
            width: 128
            height: 14
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
            Layout.preferredHeight: 40
            Layout.preferredWidth: 118
            value: 0.5
        }

        RoundButton {
            id: rbtnmodel
            x: 906
            y: 566
            width: 55
            height: 55
            text: "Model"
            font.pointSize: 8
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: rbtnpre.verticalCenter
            Layout.preferredHeight: 60
            Layout.preferredWidth: 60
        }

}