status-desktop/ui/imports/shared/panels/DidYouKnowSplashScreen.qml
Alex Jbanca 009861c7b4 fix(SplashScreen): Add Did You Know Splash screen
Closing #9470
Adding Did You Know Splash Screen that will be shown when AppMain is completed.
The SplashScreen runs for 30 seconds and will randomly iterate through `fun messages` every 5 seconds.
2023-02-16 16:06:50 +02:00

86 lines
3.1 KiB
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
}
}