Index: sources/gui/qml/components/StepBullet.qml
===================================================================
diff -u -r725cf5096e9664a0b6b1c4e4e902d1673bd976a9 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/StepBullet.qml	(.../StepBullet.qml)	(revision 725cf5096e9664a0b6b1c4e4e902d1673bd976a9)
+++ sources/gui/qml/components/StepBullet.qml	(.../StepBullet.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    StepBullet.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      01-Jan-2021
- * \author  (original)  Peter Lucia
- * \date    (original)  03-Aug-2020
+ * \date    (last)      20-Jul-2021
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  11-Jan-2021
  *
  */
 
@@ -27,43 +27,98 @@
  */
 Item { id: _root
     readonly property color color   : _circle.border.color
-
+    property bool   currentComplete : false
+    property bool   hideLabels      : false
+    property bool   vertical        : false
     property string text            : ""
     property bool   complete        : false
     property bool   current         : false
     property color  colorComplete   : Colors.borderButton
+    property color  colorCurrent    : currentComplete ? colorComplete : Colors.transparent
     property color  colorInComplete : Colors.borderDisableButton
+    property int    fontSizeCurrent : Fonts.fontPixelStepCurrent
+    property int    fontSizeNormal  : Fonts.fontPixelStepNormal
+    property real   diameter  : 15
 
-    QtObject { id: _private
-        readonly property real diameter  : 15
 
+    QtObject { id: _private
+        readonly property string stateNameVertical    : "vertical"    // must not have translation
+        readonly property string stateNameHorizontal  : "horizontal"  // must not have translation
     }
 
-    height  : 35
-    width   : _private.diameter
+    height  : _circle.height + (_text.visible ? _textHightRef.height : 0)
+    width   : _root.diameter
 
+    state   : _root.vertical ? _private.stateNameVertical : _private.stateNameHorizontal
+
     Rectangle { id: _circle
         anchors {
             verticalCenter  : parent.verticalCenter
             left            : parent.left
         }
-        height  : _private.diameter
-        width   : _private.diameter
-        radius  : _private.diameter
-        color       : _root.current ? Colors.transparent : _root.complete ? _root.colorComplete : Colors.transparent
-        border.color: _root.current ? colorComplete      : _root.complete ? _root.colorComplete : _root.colorInComplete
+        height      : _root.diameter
+        width       : _root.diameter
+        radius      : _root.diameter
+        color       : _root.current ? colorCurrent  : _root.complete ? _root.colorComplete : Colors.transparent
+        border.color: _root.current ? colorComplete : _root.complete ? _root.colorComplete : _root.colorInComplete
         border.width: 2
     }
 
-    Text { id: _text
-        anchors {
-            top             : _circle.bottom
-            topMargin       : 5
-            horizontalCenter: _circle.horizontalCenter
+    // this text is created only for the maximum(current) font info(height)
+    Text { id: _textHightRef
+        visible: false
+        text    : _text.text
+        font {
+            pixelSize: _root.fontSizeCurrent
+            bold     : _root.current
+            italic   : _root.current
         }
+    }
+
+    Text { id: _text
+        visible: ! _root.hideLabels
+        anchors.top             : _circle.bottom
+        anchors.horizontalCenter: _circle.horizontalCenter
+        anchors.topMargin       : 5
+
         text    : _root.text
         color   : _root.current ? Colors.textMain : _root.complete ? Colors.textMain : _root.colorInComplete
+        font {
+            pixelSize: _root.current ? _root.fontSizeCurrent : _root.fontSizeNormal
+            bold     : _root.current
+            italic   : _root.current
+        }
     }
-}
 
+    states: [
+        State { name: _private.stateNameVertical
+            AnchorChanges   { target    : _text
+                anchors.top             : undefined
+                anchors.horizontalCenter: undefined
 
+                anchors.left            : _circle.right
+                anchors.verticalCenter  : _circle.verticalCenter
+            }
+
+            PropertyChanges { target: _text
+                anchors.topMargin       : 0
+                anchors.leftMargin      : 10
+
+            }
+        },
+
+        State { name: _private.stateNameHorizontal
+            AnchorChanges   {
+                anchors.top             : _circle.bottom
+                anchors.horizontalCenter: _circle.horizontalCenter
+
+                anchors.left            : undefined
+                anchors.verticalCenter  : undefined
+            }
+            PropertyChanges { target    : _text
+                anchors.topMargin       : 5
+                anchors.leftMargin      : 0
+            }
+        }
+    ]
+}