camper/src/ErrorNotification.qml

import QtQuick
import QtQuick.Controls

Control {
    id: control

    property alias text: label.text

    function show(errorMessage: string) {
        control.text = errorMessage;
        control.visible = true;
        hideTimer.start();
    }

    Accessible.ignored: !visible
    Accessible.role: Accessible.AlertMessage
    implicitHeight: visible ? (contentLayout.implicitHeight + topPadding + bottomPadding) : 0
    opacity: visible ? 1 : 0
    padding: 4
    visible: false

    background: Rectangle {
        id: borderRect

        border.color: "#da4453"
        color: "#ebced2"
        radius: 5
    }
    contentItem: Item {
        id: contentLayout

        Accessible.ignored: true
        implicitHeight: Math.max(label.implicitHeight, closeButton.implicitHeight)

        Behavior on opacity {
            enabled: control.visible

            NumberAnimation {
                duration: 200
            }
        }

        SelectableLabel {
            id: label

            Accessible.ignored: !control.visible

            anchors {
                left: parent.left
                leftMargin: 4
                right: closeButton.left
                rightMargin: 4
                top: parent.top
            }
        }

        ToolButton {
            id: closeButton

            Accessible.ignored: !control.visible
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            display: ToolButton.IconOnly
            height: implicitHeight
            icon.name: "dialog-close"
            text: qsTr("Close")

            onClicked: function () {
                control.visible = false;
            }
        }
    }
    Behavior on implicitHeight {
        enabled: !control.visible

        NumberAnimation {
            duration: 200
        }
    }
    Behavior on opacity {
        enabled: !control.visible

        NumberAnimation {
            duration: 200
        }
    }

    onImplicitHeightChanged: function () {
        height = implicitHeight;
    }
    onOpacityChanged: function () {
        if (opacity === 0) {
            contentLayout.opacity = 0;
        } else if (opacity === 1) {
            contentLayout.opacity = 1;
        }
    }

    anchors {
        bottom: parent.bottom
        bottomMargin: 8
        left: parent.left
        margins: 18 * 4
        right: parent.right
    }

    Timer {
        id: hideTimer

        interval: 10000
        repeat: false

        onTriggered: function () {
            control.visible = false;
        }
    }
}