feat(@desktop/communities) Permissions - ENS panel added to "Who holds" selector

Closes #6338
This commit is contained in:
Michał Cieślak 2022-08-31 14:35:28 +02:00 committed by Michał
parent b2d678c2c4
commit c2c2532986
3 changed files with 144 additions and 7 deletions

View File

@ -1,5 +1,111 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
Item {
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Controls.Validators 0.1
ColumnLayout {
id: root
enum EnsType {
Any,
CustomSubdomain
}
property int ensType: EnsPanel.EnsType.Any
property alias domainName: domainNameInput.text
property alias domainNameValid: domainNameInput.valid
spacing: 0
QtObject {
id: d
// values from design
readonly property int pickerHeight: 36
readonly property int pickerFontSize: 13
readonly property int pickerLeftPadding: 12
readonly property int pickerRightPadding: 9
}
// TODO (>=5.15): use inline components to reduce code duplication
StatusListItem {
title: qsTr("Any domain")
Layout.fillWidth: true
Layout.preferredHeight: d.pickerHeight
leftPadding: d.pickerLeftPadding
rightPadding: d.pickerRightPadding
statusListItemTitle.font.pixelSize: d.pickerFontSize
components: [
StatusRadioButton {
checked: root.ensType === EnsPanel.EnsType.Any
size: StatusRadioButton.Size.Small
}
]
// using MouseArea instead of build-in 'clicked' signal to avoid
// intercepting event by the StatusRadioButton
MouseArea {
anchors.fill: parent
onClicked: root.ensType = EnsPanel.EnsType.Any
}
}
StatusListItem {
title: qsTr("Custom subdomain")
Layout.fillWidth: true
Layout.preferredHeight: d.pickerHeight
leftPadding: d.pickerLeftPadding
rightPadding: d.pickerRightPadding
statusListItemTitle.font.pixelSize: d.pickerFontSize
components: [
StatusRadioButton {
checked: root.ensType === EnsPanel.EnsType.CustomSubdomain
size: StatusRadioButton.Size.Small
}
]
MouseArea {
anchors.fill: parent
onClicked: root.ensType = EnsPanel.EnsType.CustomSubdomain
}
}
StatusInput {
id: domainNameInput
Layout.fillWidth: true
Layout.topMargin: 8
minimumHeight: 36
maximumHeight: 36
topPadding: 0
bottomPadding: 0
font.pixelSize: 13
input.placeholderText: "name.eth"
visible: root.ensType === EnsPanel.EnsType.CustomSubdomain
validators: StatusRegularExpressionValidator {
// TODO: check ens domain validator
regularExpression: /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?$/ig
errorMessage: qsTr("Subdomain not recognized")
}
Component.onCompleted: {
if (text) {
input.dirty = true
validate()
}
}
}
}

View File

@ -77,8 +77,8 @@ Item {
StatusFlatRoundButton {
id: filterButton
implicitWidth: 32
implicitHeight: 32
width: 32
height: 32
visible: d.isFilterOptionVisible
type: StatusFlatRoundButton.Type.Secondary
icon.name: "filter"

View File

@ -20,6 +20,10 @@ StatusDropdown {
property string collectibleName: d.defaultCollectibleNameText
property bool collectiblesSpecificAmount: false
property int ensType: EnsPanel.EnsType.Any
property string ensDomainName: ""
property bool ensDomainNameValid: false
property url collectibleImage: ""
property int operator: SQ.Utils.Operators.None
property bool withOperatorSelector: true
@ -36,6 +40,8 @@ StatusDropdown {
root.collectibleName = d.defaultCollectibleNameText
root.collectibleImage = ""
root.collectiblesSpecificAmount = false
root.ensType = EnsPanel.EnsType.Any
root.ensDomainName = ""
root.operator = SQ.Utils.Operators.None
}
@ -51,6 +57,7 @@ StatusDropdown {
// Internal management properties:
readonly property bool tokensReady: root.tokenAmount > 0 && root.tokenName !== d.defaultTokenNameText
readonly property bool collectiblesReady: root.collectibleAmount > 0 && root.collectibleName !== d.defaultCollectibleNameText
readonly property bool ensReady: root.ensType === EnsPanel.EnsType.Any || root.ensDomainNameValid
readonly property string operatorsState: "OPERATORS"
readonly property string tabsState: "TABS"
@ -128,7 +135,8 @@ StatusDropdown {
PropertyChanges {
target: root; topPadding: root.withOperatorSelector ? d.topPaddingWithBack : d.extendedTopPadding
width: d.defaultWidth
height: (loader.item.state === d.collectiblesState && root.collectiblesSpecificAmount) ? d.enlargedHeight : d.defaultHeight
height: (loader.item.state === d.collectiblesState && root.collectiblesSpecificAmount)
|| (loader.item.state === d.ensState && root.ensType === EnsPanel.EnsType.CustomSubdomain) ? d.enlargedHeight : d.defaultHeight
}
},
State {
@ -168,7 +176,7 @@ StatusDropdown {
},
State {
name: d.ensState
PropertyChanges {target: holdingsTabs; sourceComponent: ensLayout; addButtonEnabled: false}
PropertyChanges {target: holdingsTabs; sourceComponent: ensLayout; addButtonEnabled: d.ensReady}
}
]
@ -245,10 +253,33 @@ StatusDropdown {
}
}
// TODO
Component {
id: ensLayout
EnsPanel {}
EnsPanel {
ensType: root.ensType
onEnsTypeChanged: root.ensType = ensType
domainName: root.ensDomainName
onDomainNameChanged: root.ensDomainName = domainName
onDomainNameValidChanged: root.ensDomainNameValid = domainNameValid
Connections {
target: d
function onAddClicked() {
const icon = "qrc:imports/assets/icons/profile/ensUsernames.svg"
if (root.ensType === EnsPanel.EnsType.Any) {
root.addItem("EnsAny", qsTr("Any ENS username"), icon,
root.operator)
} else {
root.addItem("EnsAny", qsTr(`ENS username on '%1' domain`).arg(root.ensDomainName), icon,
root.operator)
}
}
}
}
}
Component {