diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 96271af3bd..815b65d211 100644 --- a/ui/nim-status-client.pro +++ b/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 \ diff --git a/ui/shared/Input.qml b/ui/shared/Input.qml new file mode 100644 index 0000000000..1c42f7da3b --- /dev/null +++ b/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} +} +##^##*/ + diff --git a/ui/shared/qmldir b/ui/shared/qmldir index 1358a1fd7f..a3205740f2 100644 --- a/ui/shared/qmldir +++ b/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