diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index a014a02a53..197f026e21 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -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"
diff --git a/ui/StatusQ/sandbox/pages/StatusWizardStepperPage.qml b/ui/StatusQ/sandbox/pages/StatusWizardStepperPage.qml
new file mode 100644
index 0000000000..14cba9de04
--- /dev/null
+++ b/ui/StatusQ/sandbox/pages/StatusWizardStepperPage.qml
@@ -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
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusWizardStepper.qml b/ui/StatusQ/src/StatusQ/Components/StatusWizardStepper.qml
new file mode 100644
index 0000000000..8f52fa44e6
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Components/StatusWizardStepper.qml
@@ -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
+ }
+ }
+ }
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir
index b6812aed0f..e220f4b466 100644
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/ui/StatusQ/src/StatusQ/Components/qmldir
@@ -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
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusProgressBar.qml b/ui/StatusQ/src/StatusQ/Controls/StatusProgressBar.qml
index 31877fa3e0..6c7fd72780 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusProgressBar.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusProgressBar.qml
@@ -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 {
diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc
index d8ff7b5346..f8cb7bc7fe 100644
--- a/ui/StatusQ/statusq.qrc
+++ b/ui/StatusQ/statusq.qrc
@@ -322,5 +322,6 @@
src/StatusQ/Components/StatusMemberListItem.qml
src/StatusQ/Components/StatusTagSelector.qml
src/StatusQ/Components/StatusToastMessage.qml
+ src/StatusQ/Components/StatusWizardStepper.qml