status-desktop/ui/imports/shared/panels/ModuleWarning.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1

import utils 1.0
import "../"
import "./"

Item {
    id: root
    objectName: "moduleWarningBanner"

    enum Type {
        Danger,
        Success
    }

    property bool active: false
    property int type: ModuleWarning.Danger
    property string text: ""
    property alias buttonText: button.text

    signal clicked()
    signal closeClicked()
    signal showStarted()
    signal showFinihsed()
    signal hideStarted()
    signal hideFinished()

    function show() {
        hideTimer.stop()
        active = true;
    }

    function showFor(duration = 5000) {
        show();
        hide(duration);
    }

    function hide(timeout = 0) {
        hideTimer.interval = timeout
        hideTimer.start()
    }

    function close() {
        closeButtonMouseArea.clicked(null)
    }

    implicitHeight: root.active ? content.implicitHeight : 0
    visible: implicitHeight > 0

    onActiveChanged: {
        active ? showAnimation.start() : hideAnimation.start()
    }

    NumberAnimation {
        id: showAnimation
        target: root
        property: "implicitHeight"
        from: 0
        to: content.implicitHeight
        duration: 500
        easing.type: Easing.OutCubic
        onStarted: {
            root.showStarted()
        }
        onFinished: {
            root.showFinihsed()
        }
    }

    NumberAnimation {
        id: hideAnimation
        target: root
        property: "implicitHeight"
        to: 0
        from: content.implicitHeight
        duration: 500
        easing.type: Easing.OutCubic
        onStarted: {
            root.hideStarted()
        }
        onFinished: {
            root.hideFinished()
        }
    }

    Timer {
        id: hideTimer
        repeat: false
        running: false
        onTriggered: {
            root.active = false
        }
    }

    Rectangle {
        id: content
        anchors.bottom: parent.bottom
        width: parent.width
        implicitHeight: 32

        readonly property color baseColor: {
            switch (root.type) {
            case ModuleWarning.Danger: return Theme.palette.dangerColor1
            case ModuleWarning.Success: return Theme.palette.successColor1
            default: return Theme.palette.baseColor1
            }
        }

        color: baseColor

        Behavior on color {
            ColorAnimation {
                duration: 150
            }
        }

        RowLayout {
            id: layout

            spacing: 12
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            StatusBaseText {
                text: root.text
                Layout.alignment: Qt.AlignVCenter
                font.pixelSize: 13
                color: Theme.palette.indirectColor1
            }

            Button {
                id: button
                visible: text != ""
                padding: 5
                onClicked: {
                    root.clicked()
                }
                contentItem: Text {
                    text: button.text
                    font.pixelSize: 12
                    font.weight: Font.Medium
                    font.family: Style.current.fontRegular.name
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    color: Theme.palette.indirectColor1
                }
                background: Rectangle {
                    radius: 4
                    border.width: 1
                    border.color: Theme.palette.indirectColor3
                    color: Theme.palette.getColor("white", button.hovered ? 0.4 : 0.1)
                }
                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.NoButton
                    cursorShape: Qt.PointingHandCursor
                }
            }
        }

        StatusIcon {
            id: closeImg
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 18
            height: 20
            width: 20
            icon: "close-circle"
            color: Theme.palette.indirectColor1
            opacity: closeButtonMouseArea.containsMouse ? 1 : 0.7

            MouseArea {
                id: closeButtonMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    root.closeClicked()
                }
            }
        }
    }

}