lez-programs/amm-ui/qml/components/liquidity/TokenAmountInput.qml

157 lines
4.3 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Rectangle {
id: root
property alias text: amountField.text
property string balance: ""
property string errorText: ""
property string helperText: ""
property string label: ""
property string token: ""
signal editingChanged(string value)
signal maxClicked
color: "#151515"
implicitHeight: content.implicitHeight + 20
radius: 8
border.color: root.errorText.length > 0 ? "#D85F4B" : amountField.activeFocus ? "#F26A21" : "#343434"
border.width: 1
Accessible.name: root.label
Accessible.role: Accessible.EditableText
ColumnLayout {
id: content
anchors.fill: parent
anchors.margins: 10
spacing: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
Text {
color: "#A9A098"
elide: Text.ElideRight
font.pixelSize: 12
text: root.label
Layout.fillWidth: true
}
Text {
color: "#E7E1D8"
elide: Text.ElideRight
font.bold: true
font.pixelSize: 12
horizontalAlignment: Text.AlignRight
text: root.token
Layout.maximumWidth: 76
}
}
RowLayout {
spacing: 8
Layout.fillWidth: true
TextField {
id: amountField
activeFocusOnTab: true
color: "#E7E1D8"
font.bold: true
font.pixelSize: 18
inputMethodHints: Qt.ImhFormattedNumbersOnly
placeholderText: qsTr("0")
selectByMouse: true
selectedTextColor: "#151515"
selectionColor: "#F26A21"
validator: RegularExpressionValidator {
regularExpression: /[0-9]*([.][0-9]*)?/
}
Accessible.name: root.label
Layout.fillWidth: true
Layout.minimumHeight: 44
onTextEdited: root.editingChanged(text)
background: Rectangle {
border.color: amountField.activeFocus ? "#F26A21" : "#343434"
border.width: 1
color: amountField.activeFocus ? "#1F1B18" : "#101010"
radius: 6
}
}
Button {
id: maxButton
activeFocusOnTab: true
focusPolicy: Qt.StrongFocus
hoverEnabled: true
text: qsTr("MAX")
Accessible.name: qsTr("Use maximum %1 balance").arg(root.token)
Layout.minimumHeight: 44
Layout.preferredWidth: 58
onClicked: root.maxClicked()
contentItem: Text {
color: maxButton.activeFocus || maxButton.hovered ? "#151515" : "#F26A21"
font.bold: true
font.pixelSize: 11
horizontalAlignment: Text.AlignHCenter
text: maxButton.text
verticalAlignment: Text.AlignVCenter
}
background: Rectangle {
border.color: "#F26A21"
border.width: 1
color: maxButton.pressed ? "#D95C1E" : maxButton.hovered || maxButton.activeFocus ? "#F26A21" : "#201712"
radius: 6
}
}
}
RowLayout {
spacing: 8
Layout.fillWidth: true
Text {
color: root.errorText.length > 0 ? "#F08A76" : root.helperText.length > 0 ? "#F26A21" : "#A9A098"
elide: Text.ElideRight
font.pixelSize: 11
text: root.errorText.length > 0 ? root.errorText : root.helperText
visible: text.length > 0
Layout.fillWidth: true
}
Text {
color: "#A9A098"
elide: Text.ElideRight
font.pixelSize: 11
horizontalAlignment: Text.AlignRight
text: qsTr("Balance %1").arg(root.balance)
Layout.alignment: Qt.AlignRight
Layout.maximumWidth: 150
}
}
}
}