import QtQuick 2.1
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0

Item {
    id: window

    width: 600
    height: 400

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10

        ListView {
            id: listView

            spacing: 5
            currentIndex: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            orientation: Qt.Horizontal

            model: ListModel {
                id: listModel

                ListElement { color: "lightsalmon" }
                ListElement { color: "gainsboro" }
                ListElement { color: "lightgreen" }
            }

            delegate: Rectangle {
                id: rect
                width: slider.value
                height: 60
                color: modelData
                border.width: listView.currentIndex == index ? 3 : 1
                radius: 10
                Text {
                    anchors.centerIn: parent
                    text: index
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: listView.currentIndex = index
                }
            }

            add: Transition {
                id: addTransition
                NumberAnimation {
                    property: "width"
                    duration: 500
                    from: 0
                    to: slider.value
                }
            }

            remove: Transition {
                NumberAnimation {
                    properties: "width"
                    duration: 500
                    to: 0
                }
            }

            addDisplaced: Transition { NumberAnimation { property: "x"; duration: 500 } }
            removeDisplaced: Transition { NumberAnimation { property: "x"; duration: 500 } }
        }

        RowLayout {
            Slider {
                id: slider
                Layout.fillWidth: true
                minimumValue: 100
                maximumValue: 150
                value: 125
            }
            Button {
                text: "Add"
                Layout.fillWidth: true
                onClicked: {
                    var colors = ["thistle", "plum", "burlywood", "darkseagreen", "peru", "peachpuff", "palegreen"]
                    var idx = listView.currentIndex
                    listModel.insert(idx, {color: colors[Math.floor(Math.random() * colors.length)]})
                    listView.currentIndex = idx
                }
            }
            Button {
                text: "Remove"
                Layout.fillWidth: true
                onClicked: {
                    listModel.remove(listView.currentIndex)
                }
            }
        }
    }
}