feat(Wallet/NetworkFilter): Extended component API

Extends API to allow single UI selection network into `NetworkFilter` and `NetworkSelectPopup` updated.
This commit is contained in:
Noelia 2023-02-22 18:11:13 +01:00 committed by Noelia
parent 2398b8bd46
commit 83bdc7f104
2 changed files with 49 additions and 5 deletions

View File

@ -17,6 +17,17 @@ Item {
implicitHeight: parent.height
property var store
property bool isChainVisible: true
property bool multiSelection: true
signal singleNetworkSelected(int chainId)
QtObject {
id: d
property string selectedChainName: ""
property string selectedIconUrl: ""
}
Item {
id: selectRectangleItem
@ -36,7 +47,12 @@ Item {
statusListItemTitle.font.pixelSize: 13
statusListItemTitle.font.weight: Font.Medium
statusListItemTitle.color: Theme.palette.baseColor1
title: store.enabledNetworks.count === store.allNetworks.count ? qsTr("All networks") : qsTr("%n network(s)", "", store.enabledNetworks.count)
title: root.multiSelection ? (store.enabledNetworks.count === store.allNetworks.count ? qsTr("All networks") : qsTr("%n network(s)", "", store.enabledNetworks.count)) :
d.selectedChainName
asset.height: 24
asset.width: asset.height
asset.isImage: !root.multiSelection
asset.name: !root.multiSelection ? Style.svg(d.selectedIconUrl) : ""
components:[
StatusIcon {
width: 16
@ -60,7 +76,7 @@ Item {
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.halfPadding
spacing: Style.current.smallPadding
visible: chainRepeater.count > 0
visible: root.isChainVisible && chainRepeater.count > 0
Repeater {
id: chainRepeater
@ -80,9 +96,16 @@ Item {
layer1Networks: store.layer1Networks
layer2Networks: store.layer2Networks
testNetworks: store.testNetworks
multiSelection: root.multiSelection
onToggleNetwork: {
store.toggleNetwork(chainId)
}
onSingleNetworkSelected: {
d.selectedChainName = chainName
d.selectedIconUrl = iconUrl
root.singleNetworkSelected(chainId)
}
}
}

View File

@ -15,7 +15,7 @@ Popup {
id: root
modal: false
width: 360
height: 432
height: Math.min(432, scrollView.contentHeight + root.padding)
horizontalPadding: 5
verticalPadding: 5
@ -28,7 +28,10 @@ Popup {
// If true NetworksExtraStoreProxy expected for layer1Networks and layer2Networks properties
property bool useNetworksExtraStoreProxy: false
property bool multiSelection: true
signal toggleNetwork(int chainId)
signal singleNetworkSelected(int chainId, string chainName, string iconUrl)
background: Rectangle {
radius: Style.current.radius
@ -50,6 +53,7 @@ Popup {
width: root.width
height: root.height
contentHeight: content.height
contentWidth: availableWidth
padding: 0
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@ -109,21 +113,38 @@ Popup {
asset.isImage: true
asset.name: Style.svg(model.iconUrl)
onClicked: {
checkBox.checked = !checkBox.checked
if(root.multiSelection)
checkBox.toggle()
else
radioButton.toggle()
}
components: [
StatusCheckBox {
id: checkBox
visible: root.multiSelection
checked: root.useNetworksExtraStoreProxy ? model.isActive : model.isEnabled
onCheckedChanged: {
onToggled: {
if(root.useNetworksExtraStoreProxy && model.isActive !== checked) {
model.isActive = checked
} else if (model.isEnabled !== checked) {
root.toggleNetwork(model.chainId)
}
}
},
StatusRadioButton {
id: radioButton
visible: !root.multiSelection
size: StatusRadioButton.Size.Large
ButtonGroup.group: radioBtnGroup
checked: model.index === 0
onCheckedChanged: if(checked) root.singleNetworkSelected(model.chainId, model.chainName, model.iconUrl)
onToggled: if(checked) root.singleNetworkSelected(model.chainId, model.chainName, model.iconUrl)
}
]
}
}
ButtonGroup {
id: radioBtnGroup
}
}