feat: add reusable Input component

ui/nim-status-client.pro

@@ -141,6 +141,7 @@ DISTFILES += \
     onboarding/img/wallet@2x.jpg \
     onboarding/img/wallet@3x.jpg \
     onboarding/qmldir \
+    shared/Input.qml \
     shared/PopupMenu.qml \
     shared/Separator.qml \
     shared/StatusTabButton.qml \

ui/shared/Input.qml

@@ -0,0 +1,85 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import "../imports"
+
+Item {
+    property string placeholderText: "My placeholder"
+    property string text: ""
+    property string label: ""
+//    property string label: "My Label"
+//    property url icon: "../app/img/hash.svg"
+    property url icon: ""
+    readonly property bool hasIcon: icon.toString() !== ""
+
+    readonly property bool hasLabel: label !== ""
+    readonly property var forceActiveFocus: function () {
+        inputValue.forceActiveFocus(Qt.MouseFocusReason)
+    }
+    readonly property int labelMargin: 7
+
+    id: inputBox
+    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
+
+    Text {
+        id: inputLabel
+        text: inputBox.label
+        font.weight: Font.Medium
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        font.pixelSize: 13
+        color: Theme.black
+    }
+
+    Rectangle {
+        id: inputRectangle
+        height: 44
+        color: Theme.grey
+        radius: 8
+        anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
+        anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+
+        TextField {
+            id: inputValue
+            placeholderText: inputBox.placeholderText
+            text: inputBox.text
+            anchors.left: parent.left
+            anchors.leftMargin: inputBox.hasIcon ? 36 : Theme.padding
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 15
+            background: Rectangle {
+                color: "#00000000"
+            }
+        }
+
+        Image {
+            id: iconImg
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+            source: inputBox.icon
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            inputValue.forceActiveFocus(Qt.MouseFocusReason)
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
+}
+##^##*/
+

ui/shared/qmldir

@@ -3,3 +3,4 @@ RoundedIcon 1.0 RoundedIcon.qml
 PopupMenu 1.0 PopupMenu.qml
 Separator 1.0 Separator.qml
 StatusTabButton 1.0 StatusTabButton.qml
+Input 1.0 Input.qml