TokenSelectorButton excluded from TokensSelector, sizing issues fixed

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

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()
+    }
+}

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 {
+    contentItem: TokenSelectorButton {
-        border.width: 0
+        selected: d.isTokenSelected
-        color: {
+        forceHovered: dropdown.opened
-            if (d.isTokenSelected)
-                return "transparent"
 
-            return root.hovered || dropdown.opened
+        name: d.currentName
-                    ? Theme.palette.primaryColor2
+        icon: d.currentIcon
-                    : Theme.palette.primaryColor3
-        }
-    }
 
-    contentItem: Loader {
+        onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
-        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
-                }
-            }
-        }
     }
 
     StatusDropdown {
@@ -187,10 +112,4 @@ Control {
             }
         }
     }
-
-    MouseArea {
-        cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
-        anchors.fill: parent
-        onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
-    }
 }

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

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