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 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 (isFirstItem) { root.selectedAsset = { address, name, value, symbol, fiatBalanceDisplay, fiatBalance } } } 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: fiatBalanceDisplay.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, fiatBalance, fiatBalanceDisplay } select.menu.close() } } } } } /*##^## Designer { D{i:0;autoSize:true;height:480;width:640} } ##^##*/