Showing notification message to user in SailfishOS app.

SailfishOS infoBanner

Rectangle {
    id: infoBanner;
    y: Theme.paddingSmall;
    z: 1;
    width: parent.width;

    height: infoLabel.height + 2 * Theme.paddingMedium;
    color: Theme.highlightBackgroundColor;
    opacity: 0;

    Label {
        id: infoLabel;
        text : ''
        font.pixelSize: Theme.fontSizeExtraSmall;
        width: parent.width - 2 * Theme.paddingSmall
        anchors.top: parent.top;
        anchors.topMargin: Theme.paddingMedium;
        y: Theme.paddingSmall;
        horizontalAlignment: Text.AlignHCenter;
        wrapMode: Text.WrapAnywhere;

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                infoBanner.opacity = 0.0;
            }
        }
    }

    function showText(text) {
        infoLabel.text = text;
        opacity = 0.9;
        console.log("infoBanner: " + text);
        closeTimer.restart();
    }

    function showError(text) {
        infoLabel.text = text;
        opacity = 0.9;
        console.log("infoBanner: " + text);
    }

    function showHttpError(errorCode, errorMessage) {
        switch (errorCode) {
            case 0:
                showError(qsTr("Server or connection error"));
                break;
            default:
                showError(qsTr("Error: %1").arg(errorMessage + " (" + errorCode + ")"));
        }
    }

    Behavior on opacity { FadeAnimation {} }

    Timer {
        id: closeTimer;
        interval: 3000;
        onTriggered: infoBanner.opacity = 0.0;
    }
}