feat(StatusQ.Components): Adding StatusWizardSteper component

Added StatusWizardStepper component

Also added corresponding page in API documentation

Closes #522
This commit is contained in:
Alexandra Betouni 2022-02-04 22:06:42 +02:00 committed by r4bbit.eth
parent 0fabd92d61
commit b7d6554b80
6 changed files with 187 additions and 0 deletions

View File

@ -265,6 +265,11 @@ StatusWindow {
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusWizardStepper"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"

View File

@ -0,0 +1,100 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
width: 800
height: 100
//Simulate animation between steps
property bool stepsCompleted: false
function reset() {
for (var i = 0; i < stepsListModel.count; i++) {
stepsListModel.setProperty(i, "loading", false);
stepsListModel.setProperty(i, "stepCompleted", false);
step1.loadingTime = 0;
step2.loadingTime = 0;
root.stepsCompleted = false;
}
}
ListModel {
id: stepsListModel
ListElement {description:"Send Request"; loadingTime: 0; stepCompleted: false}
ListElement {description:"Receive Response"; loadingTime: 0; stepCompleted: false}
ListElement {description:"Confirm Identity"; loadingTime: 0; stepCompleted: false}
}
Shortcut {
sequence: "Ctrl+R"
onActivated: {
if (!root.stepsCompleted) {
animate.running = true;
} else {
root.reset();
}
}
}
StatusBaseText {
id: indicLabel
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Press Ctrl+R to run the animation"
font.pixelSize: 17
}
SequentialAnimation {
id: animate
ScriptAction {
id: step1
property int loadingTime: 0
Behavior on loadingTime { NumberAnimation { duration: 2000 }}
onLoadingTimeChanged: {
stepsListModel.setProperty(1, "loadingTime", step1.loadingTime);
}
script: {
step1.loadingTime = 2000;
stepsListModel.setProperty(0, "loadingTime", step1.loadingTime);
stepsListModel.setProperty(0, "stepCompleted", true);
}
}
PauseAnimation {
duration: 2100
}
ScriptAction {
id: step2
property int loadingTime: 0
Behavior on loadingTime { NumberAnimation { duration: 2000 } }
onLoadingTimeChanged: {
stepsListModel.setProperty(2, "loadingTime", step2.loadingTime);
}
script: {
step2.loadingTime = 2000;
stepsListModel.setProperty(1, "stepCompleted", true);
}
}
PauseAnimation {
duration: 2100
}
ScriptAction {
script: {
stepsListModel.setProperty(2, "stepCompleted", true);
root.stepsCompleted = true;
}
}
}
//simulation code
StatusWizardStepper {
id: wizardStepper
width: (parent.width - 50)
anchors.top: indicLabel.bottom
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
stepsModel: stepsListModel
}
}

View File

@ -0,0 +1,78 @@
import QtQuick 2.14
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: wizardWrapper
width: parent.width
height: 56
property ListModel stepsModel: ListModel { }
ListView {
id: repeat
width: childrenRect.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
orientation: ListView.Horizontal
model: stepsModel
delegate: Item {
id: wrapperItem
width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
height: 56
onXChanged: {
//as x changes while delegates are created, direct assignment doesn't work
x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
}
StatusProgressBar {
id: barBorder
width: visible ? (parent.width - (label.width/2 + 24)) : 0
height: visible ? 8 : 0
visible: (index > 0)
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -12
from: 0
//TODO what is to: here?
to: 2000
value: loadingTime
backgroundColor: "transparent"
backgroundBorderColor: Theme.palette.primaryColor1
fillColor: Theme.palette.primaryColor1
}
Item {
id: label
width: descriptionLabel.contentWidth
height: 56
anchors.left: (index > 0) ? barBorder.right : parent.left
anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
Rectangle {
width: 32
height: 32
anchors.horizontalCenter: parent.horizontalCenter
radius: width/2
color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? "transparent" : Theme.palette.primaryColor1
border.width: 2
StatusBaseText {
anchors.centerIn: parent
text: index+1
font.pixelSize: 17
color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
}
}
StatusBaseText {
id: descriptionLabel
anchors.bottom: parent.bottom
text: description
color: Theme.palette.directColor1
font.pixelSize: 13
}
}
}
}
}

View File

@ -28,3 +28,4 @@ StatusMessage 0.1 StatusMessage.qml
StatusMessageDetails 0.1 StatusMessageDetails.qml
StatusTagSelector 0.1 StatusTagSelector.qml
StatusToastMessage 0.1 StatusToastMessage.qml
StatusWizardStepper 0.1 StatusWizardStepper.qml

View File

@ -10,6 +10,7 @@ ProgressBar {
property string text
property color fillColor
property color backgroundColor: Theme.palette.directColor8
property color backgroundBorderColor: "transparent"
width: 416
height: 16
@ -19,6 +20,7 @@ ProgressBar {
implicitWidth: parent.width
implicitHeight: parent.height
color: control.backgroundColor
border.color: control.backgroundBorderColor
radius: 5
}
contentItem: Item {

View File

@ -322,5 +322,6 @@
<file>src/StatusQ/Components/StatusMemberListItem.qml</file>
<file>src/StatusQ/Components/StatusTagSelector.qml</file>
<file>src/StatusQ/Components/StatusToastMessage.qml</file>
<file>src/StatusQ/Components/StatusWizardStepper.qml</file>
</qresource>
</RCC>