LedDisplay/app/ressources/qml/DisplayTextModelListView.qml

import QtQuick 2.4
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.9
import QtQuick.Controls.Material 2.0

import de.itsblue.LedDisplayController 1.0

ListView {
    id: control

    spacing: 5

    boundsBehavior: Flickable.OvershootBounds

    model: backend.displayTextModel

    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200 }
        NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: 200 }
    }

    remove: Transition {
        NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200 }
        NumberAnimation { property: "scale"; from: 1; to: 0.9; duration: 200 }
    }

    delegate: DisplayTextDelegate {
        id: delegate

        width: control.width

        onClicked: {
            popup.edit(control.model, model)
        }
    }

    RoundButton {
        anchors {
            bottom: parent.bottom
            horizontalCenter: parent.horizontalCenter
            bottomMargin: height * 0.25
        }

        height: implicitHeight * 1.3
        width: height

        enabled: control.model.rowCount < control.model.maximumTextSets

        Material.background: Material.accent

        text: ""

        onClicked: popup.add(control.model)

        Text {
            anchors.fill: parent

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            font.pixelSize: height * 0.4

            color: "white"

            text: "+"
        }
    }

    TextEditDialog {
        id: popup

        Material.theme: control.Material.theme
        Material.accent: control.Material.accent
    }
}