Index: sources/gui/qml/components/TouchRect.qml
===================================================================
diff -u -rcd769413344091cea88a30861b49188c8c147cba -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/TouchRect.qml	(.../TouchRect.qml)	(revision cd769413344091cea88a30861b49188c8c147cba)
+++ sources/gui/qml/components/TouchRect.qml	(.../TouchRect.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,16 +1,16 @@
 /*!
- * 
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ *
+ * Copyright (c) 2019-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 TouchRect.qml
- * \author (last) Peter Lucia
- * \date (last) 06-Oct-2020
- * \author (original) Behrouz NematiPour
- * \date (original) 18-Oct-2019
- * 
+ *
+ * \file    TouchRect.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      03-Nov-2023
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  18-Oct-2019
+ *
  */
 
 // Qt
@@ -26,103 +26,118 @@
  */
 Rectangle { id : _root
     property alias text             : _text
-    property alias button           : _mouseArea
+    property alias pixelSize        : _text.font.pixelSize
+    property alias fgColor          : _text.color
+    //TODO need to update code to use bgColor instead of backgroundColor property
+//  property alias bgColor          : _root.color
+    property alias textString       : _text.text
 
-    property bool  animated         : false
-    property alias loops            : _clickAnimation.loops
-    property int   duration         : 200
-
-    property bool  disabled         : false
+    property bool  touchable        : true
+    property bool  animated         : true
+    property bool  isDefault        : false
     property bool  selectable       : false
     property bool  selected         : false
 
+    property bool  fading           : false
+    property int   debouncingTime   : 350
+    readonly property alias isPressed : _mouseArea.pressed
+
     property color textColor        : Colors.textButton
     property color borderColor      : Colors.borderButton
     property color backgroundColor  : Colors.backgroundButtonNormal
+    property color defaultColor     :
+        backgroundColor == Colors.transparent ?
+            Colors.backgroundButtonSelect     :
+            Qt.lighter(_root.backgroundColor, 1.15)
 
-    property int   touchExpanding   : 0
+    property color selectColor      :
+        backgroundColor == Colors.transparent ?
+            Colors.backgroundButtonSelectDark :
+            Qt.darker (_root.backgroundColor, 1.15)
 
-    signal clicked
-
-    onDurationChanged: {
-        _colorAnimationOn .duration = duration
-        _colorAnimationOff.duration = duration
+    Timer { id: clickDebounceTimer
+        interval: _root.debouncingTime // ms
     }
+    Timer { id: pressDebounceTimer
+        interval: _root.debouncingTime // ms
+    }
+    QtObject { id: _private
+        function color() {
+            var mBackgroundColor = _root.backgroundColor
+            if (  isDefault          ) mBackgroundColor = _root.defaultColor
+            if (! enabled            ) return Colors.transparent
+            if (  selectable         )
+                if (  selected       ) return Colors.backgroundButtonSelectDark
+                else                   return mBackgroundColor
+            if (! animated           ) return mBackgroundColor
+            if (  _mouseArea.pressed ) return _root.selectColor
+            return mBackgroundColor
+        }
 
-    function animate(vAnimate) {
-        if (vAnimate) {
-            if ( disabled ) { return }
-            if ( animated ) {
-                _clickAnimation.restart()
-            }
-        } else {
-            _clickAnimation.stop()
-            _root.color = backgroundColor
+        function borderColor() {
+            if ( ! enabled    ) return Colors.borderDisableButton
+            if (   selectable )
+                if ( selected ) {
+                    return _root.borderColor
+                } else {
+                    return Colors.borderButtonUnselected
+                }
+            return _root.borderColor
         }
+
+        property bool clickDebouncing: clickDebounceTimer.running   // if a click/press happens the timer starts, meaning we have to debounce.
+        property bool pressDebouncing: pressDebounceTimer.running   // if a click/press happens the timer starts, meaning we have to debounce.
+        property bool pressed       : false                         // this will take care of releases happening during debounced press, therefor no release should happen as well.
     }
 
-    onDisabledChanged: {
-        if (disabled) {
-            text.color   = Colors.textDisableButton
-            border.color = Colors.borderDisableButton
-            color = "Transparent"
-        } else {
-            text.color   = textColor
-            border.color = borderColor
-            color = backgroundColor
+    color       : _private.color()
+    border.color: _private.borderColor()
+
+    Rectangle { id: _rectAnim
+        visible : _root.fading
+        radius  : width
+        color   : Colors.transparent
+        anchors.fill: parent
+        SequentialAnimation { id: _clickAnimation
+            loops       : Animation.Infinite
+            running     : _rectAnim.visible
+            onStopped   : _rectAnim.color = Colors.transparent
+            onFinished  : _rectAnim.color = Colors.transparent
+            ColorAnimation { target: _rectAnim; property: "color"; to: Colors.transparent; duration: 2000; }
+            ColorAnimation { target: _rectAnim; property: "color"; to: _root.border.color; duration: 2000; }
         }
     }
 
+    property int   touchExpanding   : 0
+
+    signal pressed
+    signal released
+    signal clicked
+    signal pressAndHold
+
     width   : Variables.touchRectWidth
     height  : Variables.touchRectHeight
     radius  : Variables.touchRectRadius
-    color   : backgroundColor
-    border {
-        color: borderColor
-        width: Variables.borderWidth
+    border.width: Variables.borderWidth
+
+    function onMouseEventLog(vMsg) {
+        // DEBUG: console.log(vMsg, _text.text, Qt.formatTime(new Date(), "hh:mm:ss.zzz"))
     }
+
     Text { id: _text
-        anchors.centerIn: parent
-        color: textColor
+        anchors.verticalCenter  : parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: enabled ? _root.textColor : Colors.textDisableButton
         font.pixelSize: Fonts.fontPixelButton
     }
 
-    function setSelected(isSelected) {
-        _root.selected = isSelected
-        if (_root.selected) {
-            _root.color = Colors.backgroundButtonSelectDark
-            _root.borderColor = Colors.borderButton
-        }
-        else {
-            _root.color = backgroundColor
-            _root.borderColor = Colors.borderButtonUnselected
-        }
-    }
-
     MouseArea { id: _mouseArea
+        enabled         : _root.touchable
         anchors.fill    : parent
         anchors.margins : touchExpanding * -1
-        onClicked   : {
-            if ( disabled ) { return }
-            if (selectable) {
-                setSelected(!selected)
-                _root.clicked()
-                return
-            }
-            animate(true)
-            _root.clicked()
-        }
+        onClicked       : { if ( ! _private.clickDebouncing                    ) { onMouseEventLog("Clicked       ") ;                            _root.clicked     (); clickDebounceTimer.start(); }   }
+        onPressed       : { if ( ! _private.pressDebouncing                    ) { onMouseEventLog("Pressed       ") ; _private.pressed = true ;  _root.pressed     (); pressDebounceTimer.start(); }   }
+        onReleased      : { if (                              _private.pressed ) { onMouseEventLog("Released      ") ; _private.pressed = false;  _root.released    (); pressDebounceTimer.start(); }   }
+        onPressAndHold  : {                                                        onMouseEventLog("PressAndHold  ") ;                            _root.pressAndHold();                                 }
     }
-
-    SequentialAnimation { id: _clickAnimation
-        running: false
-        onStopped: {
-            _root.color = backgroundColor
-        }
-        onFinished: {
-            _root.color = backgroundColor
-        }
-        PropertyAnimation { id: _colorAnimationOn ; target: _root; property: "color"; to: _root.border.color; duration: duration; }
-        PropertyAnimation { id: _colorAnimationOff; target: _root; property: "color"; to: _root.color       ; duration: duration; }
-    }
 }