diff --git a/storybook/pages/TokenSelectorButtonPage.qml b/storybook/pages/TokenSelectorButtonPage.qml new file mode 100644 index 0000000000..294f5d51f1 --- /dev/null +++ b/storybook/pages/TokenSelectorButtonPage.qml @@ -0,0 +1,65 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Qt.labs.settings 1.1 + +import AppLayouts.Wallet.controls 1.0 +import StatusQ.Core.Theme 0.1 +import utils 1.0 + +Pane { + padding: 0 + + Rectangle { + anchors.fill: parent + color: Theme.palette.baseColor3 + } + + Rectangle { + anchors.centerIn: parent + + width: 300 + height: 60 + color: "transparent" + border.color: "lightgray" + + RowLayout { + anchors.fill: parent + + TokenSelectorButton { + id: panel + + Layout.fillWidth: true + Layout.alignment: Qt.AlignVCenter + + Layout.maximumWidth: implicitWidth + selected: selectionCheckBox.checked + + name: "My token" + (longNameCheckBox.checked ? " long name" : "") + icon: Constants.tokenIcon("CFI") + } + } + } + + ColumnLayout { + CheckBox { + id: selectionCheckBox + + text: "selected" + } + + CheckBox { + id: longNameCheckBox + + text: "long name" + } + } + + Settings { + property alias selected: selectionCheckBox.checked + property alias longName: longNameCheckBox.checked + } +} + +// category: Controls diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml new file mode 100644 index 0000000000..0893f3e2c9 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorButton.qml @@ -0,0 +1,101 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ.Components 0.1 +import StatusQ.Components.private 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import utils 1.0 + +Control { + id: root + + property bool selected + property bool forceHovered + + property string name + property url icon + + signal clicked + + padding: 10 + + background: StatusComboboxBackground { + border.width: 0 + color: { + if (root.selected) + return "transparent" + + return root.hovered || root.forceHovered + ? Theme.palette.primaryColor2 + : Theme.palette.primaryColor3 + } + } + + contentItem: Loader { + sourceComponent: root.selected ? selectedContent : notSelectedContent + } + + Component { + id: notSelectedContent + + RowLayout { + spacing: 10 + + StatusBaseText { + objectName: "tokenSelectorContentItemText" + font.pixelSize: root.font.pixelSize + font.weight: Font.Medium + color: Theme.palette.primaryColor1 + text: qsTr("Select token") + } + + StatusComboboxIndicator { + color: Theme.palette.primaryColor1 + } + } + } + + Component { + id: selectedContent + + RowLayout { + spacing: Style.current.halfPadding + + StatusRoundedImage { + id: tokenSelectorIcon + objectName: "tokenSelectorIcon" + + Layout.preferredWidth: 20 + Layout.preferredHeight: 20 + image.source: root.icon + } + + StatusBaseText { + Layout.fillWidth: true + + objectName: "tokenSelectorContentItemText" + font.pixelSize: 28 + color: root.hovered ? Theme.palette.blue : Theme.palette.darkBlue + + elide: Text.ElideRight + text: root.name + } + + StatusComboboxIndicator { + id: comboboxIndicator + + color: Theme.palette.primaryColor1 + } + } + } + + MouseArea { + cursorShape: root.enabled ? Qt.PointingHandCursor : undefined + anchors.fill: parent + + onClicked: root.clicked() + } +} diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml index de572c2a36..ea13360b48 100644 --- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml @@ -1,12 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import StatusQ.Components 0.1 -import StatusQ.Components.private 0.1 import StatusQ.Controls 0.1 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 import AppLayouts.Wallet.panels 1.0 @@ -39,8 +34,6 @@ Control { tokenSelectorPanel.highlightedKey = key ?? "" } - padding: 10 - QtObject { id: d @@ -50,82 +43,14 @@ Control { property url currentIcon } - background: StatusComboboxBackground { - border.width: 0 - color: { - if (d.isTokenSelected) - return "transparent" + contentItem: TokenSelectorButton { + selected: d.isTokenSelected + forceHovered: dropdown.opened - return root.hovered || dropdown.opened - ? Theme.palette.primaryColor2 - : Theme.palette.primaryColor3 - } - } + name: d.currentName + icon: d.currentIcon - contentItem: Loader { - sourceComponent: d.isTokenSelected ? selectedContent - : notSelectedContent - } - - Component { - id: notSelectedContent - - RowLayout { - spacing: 10 - - StatusBaseText { - objectName: "tokenSelectorContentItemText" - font.pixelSize: root.font.pixelSize - font.weight: Font.Medium - color: Theme.palette.primaryColor1 - text: qsTr("Select token") - } - - StatusComboboxIndicator { - color: Theme.palette.primaryColor1 - } - } - } - - Component { - id: selectedContent - - RowLayout { - spacing: Style.current.halfPadding - width: parent.width - - StatusRoundedImage { - id: tokenSelectorIcon - objectName: "tokenSelectorIcon" - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 - image.source: d.currentIcon - } - - StatusBaseText { - objectName: "tokenSelectorContentItemText" - font.pixelSize: 28 - color: root.hovered ? Theme.palette.blue : Theme.palette.darkBlue - Layout.maximumWidth: parent.width - (tokenSelectorIcon.width + comboboxIndicator.width + parent.spacing * 2) - elide: Text.ElideRight - Layout.alignment: Qt.AlignLeft - - text: d.currentName - } - - Item { - // Encapsulated into the item to not resize the icon - Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter - StatusComboboxIndicator { - id: comboboxIndicator - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - - color: Theme.palette.primaryColor1 - } - } - } + onClicked: dropdown.opened ? dropdown.close() : dropdown.open() } StatusDropdown { @@ -187,10 +112,4 @@ Control { } } } - - MouseArea { - cursorShape: root.enabled ? Qt.PointingHandCursor : undefined - anchors.fill: parent - onClicked: dropdown.opened ? dropdown.close() : dropdown.open() - } } diff --git a/ui/app/AppLayouts/Wallet/controls/qmldir b/ui/app/AppLayouts/Wallet/controls/qmldir index b5f0f06fa5..61989a814b 100644 --- a/ui/app/AppLayouts/Wallet/controls/qmldir +++ b/ui/app/AppLayouts/Wallet/controls/qmldir @@ -19,6 +19,7 @@ StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml StatusTxProgressBar 1.0 StatusTxProgressBar.qml SwapExchangeButton 1.0 SwapExchangeButton.qml TokenSelector 1.0 TokenSelector.qml +TokenSelectorButton 1.0 TokenSelectorButton.qml TokenSelectorNew 1.0 TokenSelectorNew.qml SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml index 6edaaf0f15..16851d5612 100644 --- a/ui/imports/shared/popups/send/SendModal.qml +++ b/ui/imports/shared/popups/send/SendModal.qml @@ -381,7 +381,8 @@ StatusDialog { assetsModel: assetsAdaptor.outputAssetsModel collectiblesModel: collectiblesAdaptorLoader.active ? collectiblesAdaptorLoader.item.model : null - Layout.fillWidth: isTokenSelected + Layout.fillWidth: true + Layout.maximumWidth: implicitWidth TokenSelectorViewAdaptor { id: assetsAdaptor