diff --git a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml index 43c9dafbb6..01bf64eb5b 100644 --- a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml @@ -34,12 +34,24 @@ Item { } Select { id: select - selectedText: languageSetting.currentLocale anchors.right: undefined anchors.left: undefined width: 100 Layout.leftMargin: Style.current.padding model: Locales_JSON.locales + selectedItemView: Item { + anchors.fill: parent + StyledText { + id: selectedTextField + text: languageSetting.currentLocale + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + verticalAlignment: Text.AlignVCenter + height: 22 + } + } menu.delegate: Component { MenuItem { id: menuItem diff --git a/ui/app/AppLayouts/Wallet/SendModal.qml b/ui/app/AppLayouts/Wallet/SendModal.qml index 016e51badb..ec31c28e67 100644 --- a/ui/app/AppLayouts/Wallet/SendModal.qml +++ b/ui/app/AppLayouts/Wallet/SendModal.qml @@ -1,7 +1,5 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -//import QtQuick.Layouts 1.13 -//import Qt.labs.platform 1.1 import "../../../imports" import "../../../shared" import "./components" @@ -17,19 +15,6 @@ ModalPopup { sendModalContent.amountInput.text = "" sendModalContent.passwordInput.text = "" sendModalContent.amountInput.forceActiveFocus(Qt.MouseFocusReason) - - const assets = walletModel.assets - const numAssets = assets.rowCount() - const assetsData = [] - for (let f = 0; f < numAssets; f++) { - assetsData.push({ - name: assets.rowData(f, 'name'), - symbol: assets.rowData(f, 'symbol'), - value: assets.rowData(f, 'value'), - address: assets.rowData(f, 'address') - }) - } - sendModalContent.assets = assetsData } SendModalContent { diff --git a/ui/app/AppLayouts/Wallet/components/SendModalContent.qml b/ui/app/AppLayouts/Wallet/components/SendModalContent.qml index f7853a0aaf..b4c3ac4618 100644 --- a/ui/app/AppLayouts/Wallet/components/SendModalContent.qml +++ b/ui/app/AppLayouts/Wallet/components/SendModalContent.qml @@ -9,13 +9,6 @@ Item { property var closePopup: function(){} property alias amountInput: txtAmount property alias passwordInput: txtPassword - property var assets: [] - - property int selectedAssetIndex: 0 - property string selectedAssetName: assets && assets.length ? assets[selectedAssetIndex].name : "" - property string selectedAssetAddress: assets && assets.length ? assets[selectedAssetIndex].address : "" - property string selectedAssetSymbol: assets && assets.length ? assets[selectedAssetIndex].symbol : "" - property string selectedAccountValue: assets && assets.length ? assets[selectedAssetIndex].value : "" property string passwordValidationError: "" property string toValidationError: "" @@ -27,7 +20,7 @@ Item { } let result = walletModel.onSendTransaction(selectFromAccount.selectedAccount.address, txtTo.text, - selectedAssetAddress, + selectAsset.selectedAsset.address, txtAmount.text, txtPassword.text) @@ -68,7 +61,7 @@ Item { } else if (isNaN(txtAmount.text)) { //% "This needs to be a number" amountValidationError = qsTrId("this-needs-to-be-a-number") - } else if (parseFloat(txtAmount.text) > parseFloat(selectedAccountValue)) { + } else if (parseFloat(txtAmount.text) > parseFloat(selectAsset.selectedAsset.Value)) { //% "Amount needs to be lower than your balance (%1)" amountValidationError = qsTrId("amount-needs-to-be-lower-than-your-balance-(%1)").arg(selectedAccountValue) } else { @@ -108,57 +101,20 @@ Item { validationError: amountValidationError } - - Select { - id: assetTypeSelect - iconHeight: 24 - iconWidth: 24 - icon: selectedAssetSymbol ? "../../../img/tokens/" + selectedAssetSymbol.toUpperCase() + ".png" : "" - //% "Select the asset" - label: qsTrId("select-the-asset") + AssetSelector { + id: selectAsset + assets: walletModel.assets anchors.top: txtAmount.bottom anchors.topMargin: Style.current.padding - selectedText: selectedAssetName - model: sendModalContent.assets - menu.delegate: Component { - MenuItem { - - height: itemText.height + 4 - width: parent ? parent.width : selectMenu.width - padding: 10 - - StyledText { - id: itemText - text: sendModalContent.assets[index].name - anchors.left: parent.left - anchors.leftMargin: 5 - anchors.verticalCenter: parent.verticalCenter - } - - onTriggered: function () { - selectedAssetIndex = index - } - } - } + anchors.right: parent.right + width: 86 + height: 28 } - StyledText { - id: currentBalanceText - //% "Balance: %1" - text: qsTrId("balance:-%1").arg(selectedAccountValue) - font.pixelSize: 13 - color: Style.current.darkGrey - anchors.top: assetTypeSelect.top - anchors.topMargin: 0 - anchors.right: assetTypeSelect.right - anchors.rightMargin: 0 - } - - AccountSelector { id: selectFromAccount accounts: walletModel.accounts - anchors.top: assetTypeSelect.bottom + anchors.top: selectAsset.bottom anchors.topMargin: Style.current.padding anchors.left: parent.left anchors.right: parent.right diff --git a/ui/shared/AccountSelector.qml b/ui/shared/AccountSelector.qml index 0f8f4ad4c1..42256c1b67 100644 --- a/ui/shared/AccountSelector.qml +++ b/ui/shared/AccountSelector.qml @@ -33,10 +33,7 @@ Item { } Select { id: select - icon: "../app/img/walletIcon.svg" - iconColor: selectedAccount.iconColor || Style.current.blue label: root.label - selectedText: selectedAccount.name model: root.accounts menu.delegate: menuItem @@ -46,6 +43,36 @@ Item { menu.onClosed: { selectedAccountDetails.visible = true } + selectedItemView: Item { + anchors.fill: parent + + SVGImage { + id: selectedIconImg + sourceSize.height: 12 + sourceSize.width: 12 + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + source: "../app/img/walletIcon.svg" + } + ColorOverlay { + anchors.fill: selectedIconImg + source: selectedIconImg + color: selectedAccount.iconColor + } + + StyledText { + id: selectedTextField + text: selectedAccount.name + anchors.left: selectedIconImg.right + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + verticalAlignment: Text.AlignVCenter + height: 22 + } + } } Row { @@ -98,12 +125,12 @@ Item { anchors.left: parent.left anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter - width: select.iconWidth - height: select.iconHeight - sourceSize.height: select.iconHeight - sourceSize.width: select.iconWidth + width: 12 + height: 12 + sourceSize.height: height + sourceSize.width: width fillMode: Image.PreserveAspectFit - source: select.icon + source: "../app/img/walletIcon.svg" } ColorOverlay { anchors.fill: iconImg diff --git a/ui/shared/AssetSelector.qml b/ui/shared/AssetSelector.qml new file mode 100644 index 0000000000..3aa80dfa7a --- /dev/null +++ b/ui/shared/AssetSelector.qml @@ -0,0 +1,157 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.13 +import QtGraphicalEffects 1.13 +import "../imports" + +Item { + id: root + property var assets + property var selectedAsset: { + "symbol": "snt", "name": "", "value": "", "fiatValue": "", "address": "" + } + width: 86 + height: 24 + + Select { + id: select + model: root.assets + width: parent.width + bgColor: Style.current.transparent + bgColorHover: Style.current.secondaryHover + + caretRightMargin: 7 + select.radius: 6 + select.height: root.height + menu.width: 343 + selectedItemView: Item { + anchors.fill: parent + SVGImage { + id: iconImg + anchors.left: parent.left + anchors.leftMargin: 4 + sourceSize.height: 24 + sourceSize.width: 24 + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + source: "../app/img/tokens/" + selectedAsset.symbol.toUpperCase() + ".png" + } + + StyledText { + id: selectedTextField + text: selectedAsset.symbol.toUpperCase() + anchors.left: iconImg.right + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + height: 22 + verticalAlignment: Text.AlignVCenter + } + } + + menu.delegate: menuItem + } + + Component { + id: menuItem + MenuItem { + id: itemContainer + property bool isFirstItem: index === 0 + property bool isLastItem: index === assets.rowCount() - 1 + + Component.onCompleted: { + if (root.selectedAsset.name === "") { + root.selectedAsset = { address, name, value, symbol, fiatValue } + } + } + width: parent.width + height: 72 + SVGImage { + id: iconImg + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + width: 40 + height: 40 + sourceSize.height: height + sourceSize.width: width + fillMode: Image.PreserveAspectFit + source: "../app/img/tokens/" + symbol.toUpperCase() + ".png" + } + Column { + anchors.left: iconImg.right + anchors.leftMargin: 12 + anchors.verticalCenter: parent.verticalCenter + + StyledText { + text: symbol.toUpperCase() + font.pixelSize: 15 + height: 22 + } + + StyledText { + text: name + color: Style.current.secondaryText + font.pixelSize: 15 + height: 22 + } + } + Column { + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + StyledText { + font.pixelSize: 15 + height: 22 + text: parseFloat(value).toFixed(4) + " " + symbol + } + StyledText { + font.pixelSize: 15 + anchors.right: parent.right + height: 22 + text: fiatValue.toUpperCase() + color: Style.current.secondaryText + } + } + background: Rectangle { + color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background + radius: Style.current.radius + + // cover bottom left/right corners with square corners + Rectangle { + visible: !isLastItem + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + height: parent.radius + color: parent.color + } + + // cover top left/right corners with square corners + Rectangle { + visible: !isFirstItem + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + height: parent.radius + color: parent.color + } + } + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: itemContainer + onClicked: { + root.selectedAsset = { address, name, value, symbol, fiatValue } + select.menu.close() + } + } + } + } +} + + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ diff --git a/ui/shared/Select.qml b/ui/shared/Select.qml index d66df1d262..5db4861b07 100644 --- a/ui/shared/Select.qml +++ b/ui/shared/Select.qml @@ -10,23 +10,20 @@ Item { property color bgColor: Style.current.inputBackground readonly property int labelMargin: 7 property var model - property int customHeight: 56 - property string selectedText: "" - property url icon: "" - property int iconHeight: 12 - property int iconWidth: 12 - property color iconColor: Style.current.transparent property alias menu: selectMenu - - readonly property bool hasIcon: icon.toString() !== "" + property color bgColorHover: bgColor + property alias selectedItemView: selectedItemContainer.children + property int caretRightMargin: Style.current.padding + property alias select: inputRectangle + anchors.left: parent.left + anchors.right: parent.right id: root height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) - anchors.right: parent.right - anchors.left: parent.left StyledText { id: inputLabel + visible: hasLabel text: root.label font.weight: Font.Medium anchors.left: parent.left @@ -38,41 +35,19 @@ Item { } Rectangle { + property bool hovered: false id: inputRectangle - height: customHeight - color: bgColor + height: 56 + color: hovered ? bgColorHover : bgColor radius: Style.current.radius anchors.top: root.hasLabel ? inputLabel.bottom : parent.top anchors.topMargin: root.hasLabel ? root.labelMargin : 0 anchors.right: parent.right anchors.left: parent.left - SVGImage { - id: iconImg - visible: root.hasIcon - sourceSize.height: iconHeight - sourceSize.width: iconWidth - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.verticalCenter: parent.verticalCenter - fillMode: Image.PreserveAspectFit - source: root.icon - } - ColorOverlay { - anchors.fill: iconImg - source: iconImg - color: iconColor - } - - StyledText { - id: selectedTextField - visible: root.selectedText !== "" - text: root.selectedText - anchors.left: iconImg.right - anchors.leftMargin: hasIcon ? 8 : 0 - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 - height: 22 + Item { + id: selectedItemContainer + anchors.fill: parent } SVGImage { @@ -80,7 +55,7 @@ Item { width: 11 height: 6 anchors.right: parent.right - anchors.rightMargin: Style.current.padding + anchors.rightMargin: caretRightMargin anchors.verticalCenter: parent.verticalCenter fillMode: Image.PreserveAspectFit source: "../app/img/caret.svg" @@ -137,11 +112,19 @@ Item { id: mouseArea anchors.fill: inputRectangle cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: { + inputRectangle.hovered = true + } + onExited: { + inputRectangle.hovered = false + } onClicked: { if (selectMenu.opened) { selectMenu.close() } else { - selectMenu.popup(inputRectangle.x, inputRectangle.y + inputRectangle.height + 8) + const offset = inputRectangle.width - selectMenu.width + selectMenu.popup(inputRectangle.x + offset, inputRectangle.y + inputRectangle.height + 8) } } }