From 58250acaf86645ce403e997d47914f2435f4b2d2 Mon Sep 17 00:00:00 2001
From: Khushboo Mehta <mehtakhushboo@hotmail.com>
Date: Tue, 22 Mar 2022 18:26:50 +0100
Subject: [PATCH] feat(StatusInputWithCursor): Extended the StatusInput to
 support an Input with no background and a blinking custom cursor

---
 ui/StatusQ/sandbox/pages/StatusInputPage.qml  |  8 +++
 .../src/StatusQ/Controls/StatusBaseInput.qml  |  2 +
 .../Controls/StatusInputWithCursor.qml        | 62 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Controls/qmldir        |  1 +
 4 files changed, 73 insertions(+)
 create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml

diff --git a/ui/StatusQ/sandbox/pages/StatusInputPage.qml b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
index 59167cd740..b12bf03e9e 100644
--- a/ui/StatusQ/sandbox/pages/StatusInputPage.qml
+++ b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
@@ -212,4 +212,12 @@ Column {
         }
         input.edit.readOnly: true
     }
+
+    StatusInputWithCursor {
+        id: cursor
+        input.placeholderText: "0.00 SNT"
+        Component.onCompleted: {
+            cursor.input.edit.forceActiveFocus()
+        }
+    }
 }
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
index d35e38a3f9..4e0d3c4b93 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
@@ -25,6 +25,7 @@ Item {
 
     property alias edit: edit
     property alias text: edit.text
+    property alias background: background
 
     property alias color: edit.color
     property alias font: edit.font
@@ -78,6 +79,7 @@ Item {
                                     44, root.minimumHeight), root.maximumHeight) : 44
 
     Rectangle {
+        id: background
         width: parent.width
         height: maximumHeight != 0 ? Math.min(
                                          minimumHeight
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml
new file mode 100644
index 0000000000..8413f050c5
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml
@@ -0,0 +1,62 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusInput {
+    id: cursorInput
+
+    property string cursorColor: Theme.palette.primaryColor1
+
+    height: input.edit.height
+    leftPadding: 0
+    rightPadding: 0
+
+    input.placeholderText: ""
+    input.edit.cursorVisible: true
+    input.edit.font.pixelSize: 32
+    input.placeholderFont.pixelSize: 32
+    input.leftPadding: 0
+    input.rightPadding: 0
+    input.topPadding: 0
+    input.bottomPadding: 0
+    input.edit.padding: 0
+    input.background.color: "transparent"
+    input.background.border.width: 0
+    input.edit.cursorDelegate: Rectangle {
+        id: cursor
+        visible: input.edit.cursorVisible
+        color: cursorColor
+        width: 2
+
+        SequentialAnimation {
+            loops: Animation.Infinite
+            running: input.edit.cursorVisible
+
+            PropertyAction {
+                target: cursor
+                property: 'visible'
+                value: true
+            }
+
+            PauseAnimation {
+                duration: 600
+            }
+
+            PropertyAction {
+                target: cursor
+                property: 'visible'
+                value: false
+            }
+
+            PauseAnimation {
+                duration: 600
+            }
+
+            onStopped: {
+                cursor.visible = false
+            }
+        }
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 8c677cf3f4..4b7b85a1a1 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -36,3 +36,4 @@ StatusWalletColorButton 0.1 StatusWalletColorButton.qml
 StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml
 StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
 StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
+StatusInputWithCursor 0.1 StatusInputWithCursor.qml