Index: sources/gui/qml/components/StepIndicator.qml
===================================================================
diff -u -reefe8acbe5b10deb379c5e4ceabeaa95d429410e -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision eefe8acbe5b10deb379c5e4ceabeaa95d429410e)
+++ sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2021-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file StepIndicator.qml
+ * \file    StepIndicator.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      01-Jan-2021
+ * \date    (last)      06-Jul-2021
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  01-Jan-2021
+ * \date    (original)  11-Jan-2021
  *
  */
 
@@ -28,57 +28,89 @@
  *          all the steps' bullets and the line between them from the beginning up to the currentStepIndex will be activated/highlighted.
  */
 Rectangle { id: _root
-    property var stepNames          : []
-    property int spacing            : 5
-    property int spacerLineLength   : 120
+    property bool   currentComplete     : false
+    property bool   hideLabels          : false
+    property bool   vertical            : false
+    property var    stepNames           : []
+    property int    spacing             : vertical ?  0 :  5
+    property int    spacerLineLength    : vertical ?  5 : 75
+    property int    currentStepIndex    : 0
+    property int    diameter            : 15
 
-             property string currentStepName   : ""
-    readonly property int    currentStepIndex  : _private.stepNamesTail.indexOf(_root.currentStepName) + 1
-
-
-
-    height  : Variables.topBarMenuHeight
+    width   : _gridSteps.width
+    height  : _gridSteps.height // Variables.topBarMenuHeight
     color   : Colors.backgroundMain
 
     QtObject { id: _private
-        property string stepNamesHead: ""
-        property var    stepNamesTail: []
+        property string stepNamesFirst: ""
+        property var    stepNamesRest : []
+        function setupModel(names) {
+            if ( names.length > 1 ) {
+                for (let i = 0; i < names.length; i++) {
+                    if (i === 0) {
+                        stepNamesFirst = names[i]
+                    }
+                    else {
+                        stepNamesRest[i-1] = names[i]
+                    }
+                }
+            }
+            else {
+                if (names.length) stepNamesFirst = names[0]
+                else              stepNamesFirst = ""
+                stepNamesRest = []
+            }
+            /////////////////////////////////////////////////
+            // it is so odd that when the stepNamesRest set by settings the change event is not called
+            // so it has been called manually. I couldn't find why, and needs more investigation.
+            // The good point is the binding of the model (_tailStepsRepeater.model) is called once.
+            /////////////////////////////////////////////////
+            if (stepNamesRest.length) stepNamesRestChanged()
+        }
     }
 
     onStepNamesChanged: {
-        if (_root.stepNames.length > 1) {
-            // javascript shift() on array will retrurn the first element
-            // and will update the original array by removing the first element
-            // that's why on the tail assignment the origianl has been assigned.
-            _private.stepNamesHead = _root.stepNames.shift()
-            _private.stepNamesTail = _root.stepNames
-        }
-        else {
-            if (_root.stepNames.length) _private.stepNamesHead = _root.stepNames[0]
-            else                        _private.stepNamesHead = ""
-            _private.stepNamesTail = []
-        }
+        _private.setupModel(_root.stepNames)
     }
 
-    Row {
+    Grid { id: _gridSteps
+        rows            : _root.vertical ? 0 : 1
+        columns         : _root.vertical ? 1 : 0
+        rowSpacing      : _root.spacing
+        columnSpacing   : _root.spacing
         anchors.centerIn: parent
-        spacing: _root.spacing
         StepBullet { id: _headStepBullet
-            text    : _private.stepNamesHead
-            active  : true
+            diameter        : _root.diameter
+            currentComplete : _root.currentComplete
+            hideLabels      : _root.hideLabels
+            vertical        : _root.vertical
+            text            : _private.stepNamesFirst
+            complete        : currentStepIndex  > 0
+            current         : currentStepIndex == 0
         }
         Repeater { id: _tailStepsRepeater
-            model: _private.stepNamesTail
-            Row {
-                spacing: _root.spacing
-                Line { id   : spacerLine
-                    anchors.verticalCenter: _nextStepsBullet.verticalCenter
+            model: _private.stepNamesRest
+            // DEBUG : onModelChanged: console.debug(" 88888 ", _root.stepNames)
+            Grid { id: _gridStepsRest
+                rows            : _root.vertical ? 0 : 1
+                columns         : _root.vertical ? 1 : 0
+                rowSpacing      : _root.spacing
+                columnSpacing   : _root.spacing
+                verticalItemAlignment   : Grid.AlignVCenter
+                horizontalItemAlignment : Grid.AlignHCenter
+                Line { id   : _spacerLine
+                    orientation: _root.vertical ? Line.Orientation.Vertical : Line.Orientation.Horizontal
                     length  : _root.spacerLineLength
                     color   : _nextStepsBullet.color
                 }
                 StepBullet { id: _nextStepsBullet
-                    text    : modelData
-                    active  : index < currentStepIndex
+                    diameter        : _root.diameter
+                    currentComplete : _root.currentComplete
+                    hideLabels      : _root.hideLabels
+                    vertical        : _root.vertical
+                    text            : modelData
+                    complete        : currentStepIndex > 0 && index <  currentStepIndex - 1 // first index is used for the head/first bullet
+                    current         : currentStepIndex > 0 && index == currentStepIndex - 1 // first index is used for the head/first bullet
                 }
             }
         }