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

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15

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

import utils 1.0
import mainui 1.0
import shared.panels.private 1.0

Pane {
    id: root
    property alias progress: progressBar.value

    contentItem: Item {
            SplashScreen {
                id: splashScreen
                anchors.centerIn: parent
                width: 128
                height: 128
            }
            ColumnLayout {
                id: content
                anchors.top: splashScreen.bottom
                anchors.bottom: parent.bottom
                width: parent.width
                visible: root.progress != 0
                Item {
                    Layout.fillHeight: true
                }
                StatusBaseText {
                    id: didYouKnow
                    Layout.alignment: Qt.AlignHCenter
                    Layout.bottomMargin: 12
                    color: Theme.palette.primaryColor1
                    font.weight: Font.DemiBold
                    font.pixelSize: Style.current.asideTextFontSize
                    text: qsTr("DID YOU KNOW?")
                }
                StatusBaseText {
                    id: didYouKnowText
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredHeight: 60
                    Layout.preferredWidth: 520
                    horizontalAlignment: Text.AlignHCenter
                    wrapMode: Text.WordWrap
                    color: Theme.palette.directColor1
                    font.pixelSize: Style.current.additionalTextSize
                    text: didYouKnowMessages.iterator.next()
                    Behavior on text {
                        SequentialAnimation {
                            NumberAnimation { target: didYouKnowText; properties: "opacity"; duration: 150; to: 0 } //fade out
                            PropertyAction { }                                                                      //change text  
                            NumberAnimation { target: didYouKnowText; properties: "opacity"; duration: 150; to: 1; }//fade in
                        }
                    }
                    DidYouKnowMessages {
                        id: didYouKnowMessages
                    }
                    Timer {
                        id: didYouKnowTimer
                        interval: 5000
                        repeat: true
                        running: didYouKnowText.visible
                        onTriggered: didYouKnowText.text = didYouKnowMessages.iterator.next()
                    }
                }

                StatusProgressBar {
                    id: progressBar
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 4
                    Layout.bottomMargin: 100
                    fillColor: Theme.palette.primaryColor1
                }
        }
    }
    background: Rectangle {
        color: Style.current.background
    }
}