status-desktop/ui/shared/Input.qml

186 lines
6.3 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
2020-06-17 19:31:01 +00:00
import "../imports"
import "."
2020-05-29 17:42:25 +00:00
Item {
property alias textField: inputValue
2020-05-29 17:42:25 +00:00
property string placeholderText: "My placeholder"
property string placeholderTextColor: Style.current.secondaryText
2020-06-04 14:53:10 +00:00
property alias text: inputValue.text
property string validationError: ""
property alias validationErrorAlignment: validationErrorText.horizontalAlignment
property int validationErrorTopMargin: 1
2020-05-29 17:42:25 +00:00
property string label: ""
readonly property bool hasLabel: label !== ""
property color bgColor: Style.current.inputBackground
2020-05-29 17:42:25 +00:00
property url icon: ""
property int iconHeight: 24
property int iconWidth: 24
property bool copyToClipboard: false
property bool pasteFromClipboard: false
property bool readOnly: false
2020-05-29 17:42:25 +00:00
readonly property bool hasIcon: icon.toString() !== ""
readonly property var forceActiveFocus: function () {
inputValue.forceActiveFocus(Qt.MouseFocusReason)
}
readonly property int labelMargin: 7
property int customHeight: 44
property int fontPixelSize: 15
signal editingFinished(string inputValue)
signal textEdited(string inputValue)
2020-05-29 17:42:25 +00:00
id: inputBox
implicitHeight: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
height: implicitHeight
2020-06-04 14:53:10 +00:00
anchors.right: parent.right
anchors.left: parent.left
2020-05-29 17:42:25 +00:00
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
function resetInternal() {
inputValue.text = ""
validationError = ""
}
StyledText {
2020-05-29 17:42:25 +00:00
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: Style.current.textColor
2020-05-29 17:42:25 +00:00
}
Rectangle {
id: inputRectangle
height: customHeight
2020-06-04 18:56:04 +00:00
color: bgColor
radius: Style.current.radius
2020-05-29 17:42:25 +00:00
anchors.top: inputBox.hasLabel ? inputLabel.bottom : parent.top
anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
anchors.right: parent.right
anchors.left: parent.left
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
border.width: (!!validationError || inputValue.focus) ? 1 : 0
border.color: {
if (!!validationError) {
return Style.current.danger
}
if (!inputBox.readOnly && inputValue.focus) {
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
return Style.current.inputBorderFocus
}
return Style.current.transparent
}
StyledTextField {
2020-05-29 17:42:25 +00:00
id: inputValue
visible: !inputBox.isTextArea && !inputBox.isSelect
2020-05-29 17:42:25 +00:00
placeholderText: inputBox.placeholderText
placeholderTextColor: inputBox.placeholderTextColor
anchors.top: parent.top
anchors.topMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: parent.rightMargin
2020-05-29 17:42:25 +00:00
anchors.left: parent.left
anchors.leftMargin: 0
leftPadding: inputBox.hasIcon ? iconWidth + 20 : Style.current.padding
selectByMouse: true
font.pixelSize: fontPixelSize
readOnly: inputBox.readOnly
2020-05-29 17:42:25 +00:00
background: Rectangle {
color: Style.current.transparent
2020-05-29 17:42:25 +00:00
}
onEditingFinished: inputBox.editingFinished(inputBox.text)
onTextEdited: inputBox.textEdited(inputBox.text)
2020-05-29 17:42:25 +00:00
}
SVGImage {
2020-05-29 17:42:25 +00:00
id: iconImg
sourceSize.height: iconHeight
sourceSize.width: iconWidth
2020-05-29 17:42:25 +00:00
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
2020-05-29 17:42:25 +00:00
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: inputBox.icon
}
Loader {
active: inputBox.copyToClipboard || inputBox.pasteFromClipboard
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
sourceComponent: Component {
Item {
width: copyBtn.width
height: copyBtn.height
Timer {
id: timer
}
StyledButton {
property bool copied: false
id: copyBtn
label: {
if (copied) {
return inputBox.copyToClipboard ?
//% "Copied"
qsTrId("sharing-copied-to-clipboard") :
qsTr("Pasted")
}
return inputBox.copyToClipboard ?
//% "Copy"
qsTrId("copy-to-clipboard") :
qsTr("Paste")
}
height: 28
textSize: 12
btnBorderColor: Style.current.blue
btnBorderWidth: 1
onClicked: {
if (inputBox.copyToClipboard) {
chatsModel.copyToClipboard(inputValue.text)
} else {
if (inputValue.canPaste) {
inputValue.paste()
}
}
copyBtn.copied = true
timer.setTimeout(function() {
copyBtn.copied = false
}, 2000);
}
}
}
}
}
2020-05-29 17:42:25 +00:00
}
TextEdit {
visible: !!validationError
id: validationErrorText
text: validationError
anchors.top: inputRectangle.bottom
anchors.topMargin: validationErrorTopMargin
selectByMouse: true
readOnly: true
font.pixelSize: 12
height: 16
color: Style.current.danger
width: parent.width
}
2020-05-29 17:42:25 +00:00
}
/*##^##
Designer {
D{i:0;formeditorColor:"#c0c0c0";formeditorZoom:1.25}
2020-05-29 17:42:25 +00:00
}
##^##*/