feat(StatusQ.Components): Adding StatusWizardSteper component

Added StatusWizardStepper component

Also added corresponding page in API documentation

Closes #522

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"

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
+    }
+}

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
+                }
+            }
+        }
+    }
+}

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

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 {

statusq.qrc

@@ -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>