LedDisplay/app/ressources/qml/DisplayTextDelegate.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.0

ItemDelegate {
    id: control

    implicitHeight: 50

    Rectangle {
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            topMargin: - control.ListView.view.spacing * 0.5
        }

        color: "lightgrey"
        height: 1
        visible: model.index !== 0
    }

    text: model.text

    contentItem: RowLayout {
        spacing: 5

        Text {
            Layout.fillWidth: true

            elide: Text.ElideRight

            opacity: model.active ? 1:0.5

            color: control.Material.foreground

            text: control.text

            Behavior on opacity {
                NumberAnimation {}
            }
        }

        Chip {
            Layout.preferredHeight: control.height * 0.6
            Layout.preferredWidth: model.scroll ? control.width * 0.15 : 0

            visible: model.scroll

            color: Material.accent

            opacity: model.active ? 1:0.5

            Behavior on color {
                ColorAnimation {}
            }

            text: model.scroll ? qsTr("scrolling"):""

            onClicked: {
                control.clicked()
            }
        }

        Chip {
            Layout.preferredHeight: control.height * 0.6
            Layout.preferredWidth: height

            opacity: model.active ? 1:0.5

            color: model.color

            onClicked: {
                control.clicked()
            }
        }

        Chip {
            Layout.preferredHeight: control.height * 0.6
            Layout.preferredWidth: control.width * 0.15

            color: model.active ? "#4CAF50" : "#F44336"

            text: model.active ? qsTr("  active  "):qsTr("inactive")

            onClicked: model.active = !model.active
        }
    }
}