TokenSelectorButton excluded from TokensSelector, sizing issues fixed

This commit is contained in:
Michał Cieślak 2024-08-30 14:24:16 +02:00 committed by Michał
parent 6b8702b0b2
commit afd16d6f6c
5 changed files with 175 additions and 88 deletions

View File

@ -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

View File

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

View File

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

View File

@ -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

View File

@ -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