Index: sources/gui/qml/components/StepBullet.qml
===================================================================
diff -u -reefe8acbe5b10deb379c5e4ceabeaa95d429410e -r526137b088b43e51868cb241ce70b3cf52febae8
--- sources/gui/qml/components/StepBullet.qml	(.../StepBullet.qml)	(revision eefe8acbe5b10deb379c5e4ceabeaa95d429410e)
+++ sources/gui/qml/components/StepBullet.qml	(.../StepBullet.qml)	(revision 526137b088b43e51868cb241ce70b3cf52febae8)
@@ -7,7 +7,7 @@
  *
  * \file    StepBullet.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      01-Jan-2021
+ * \date    (last)      08-MAr-2021
  * \author  (original)  Peter Lucia
  * \date    (original)  03-Aug-2020
  *
@@ -26,41 +26,101 @@
  * \brief   A filled circle with text below it, used to build a step-by-step progress indicator
  */
 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
 
+
     QtObject { id: _private
-        readonly property real diameter  : _root.active ? 15 : 10
+        readonly property real diameter  : 15
+        readonly property string stateNameVertical    : "vertical"    // must not have translation
+        readonly property string stateNameHorizontal  : "horizontal"  // must not have translation
     }
 
-    readonly property color color   : _circle.color
-
-    property string text            : ""
-    property bool   active          : false
-    property color  colorActive     : Colors.createTreatmentActive
-    property color  colorInactive   : Colors.createTreatmentInactive
-
-    height  : 35
+    height  : _circle.height + (_text.visible ? _textHightRef.height : 0)
     width   : _private.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.active ? _root.colorActive : _root.colorInactive
+        height      : _private.diameter
+        width       : _private.diameter
+        radius      : _private.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.active ? Colors.textMain : _root.colorInactive
+        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
+            }
+        }
+    ]
 }