mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-22 11:38:57 +00:00
75571c9f22
Fixing https://github.com/status-im/status-desktop/issues/9766 The main change is that the model will now provide the image type, on top of the image source. The image type can be either icon or image. Icons will be coloured with the same colour as the text.
589 lines
20 KiB
QML
589 lines
20 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Core.Utils 0.1
|
|
|
|
import utils 1.0
|
|
import shared.panels 1.0
|
|
|
|
import AppLayouts.Chat.helpers 1.0
|
|
import AppLayouts.Chat.controls.community 1.0
|
|
import AppLayouts.Chat.panels.communities 1.0
|
|
|
|
|
|
StatusScrollView {
|
|
id: root
|
|
|
|
required property var assetsModel
|
|
required property var collectiblesModel
|
|
required property var channelsModel
|
|
|
|
// name, image, color properties expected
|
|
required property var communityDetails
|
|
|
|
property bool isOwner: false
|
|
|
|
property int viewWidth: 560 // by design
|
|
property bool isEditState: false
|
|
|
|
readonly property bool dirty:
|
|
!holdingsModelComparator.equal ||
|
|
!channelsModelComparator.equal ||
|
|
root.isPrivate !== d.dirtyValues.isPrivate ||
|
|
root.permissionType !== d.dirtyValues.permissionType
|
|
|
|
readonly property alias dirtyValues: d.dirtyValues
|
|
|
|
readonly property bool isFullyFilled:
|
|
dirtyValues.selectedHoldingsModel.count > 0 &&
|
|
dirtyValues.permissionType !== PermissionTypes.Type.None &&
|
|
(d.isCommunityPermission || dirtyValues.selectedChannelsModel.count > 0)
|
|
|
|
property int permissionType: PermissionTypes.Type.None
|
|
property bool isPrivate: false
|
|
|
|
// roles: type, key, name, amount, imageSource
|
|
property var selectedHoldingsModel: ListModel {}
|
|
|
|
// roles: itemId, text, icon, emoji, color, colorId
|
|
property var selectedChannelsModel: ListModel {}
|
|
|
|
property bool permissionDuplicated: false
|
|
property bool permissionTypeLimitReached: false
|
|
|
|
signal createPermissionClicked
|
|
signal navigateToMintTokenSettings
|
|
|
|
function resetChanges() {
|
|
d.loadInitValues()
|
|
}
|
|
|
|
ModelsComparator {
|
|
id: holdingsModelComparator
|
|
|
|
modelA: root.dirtyValues.selectedHoldingsModel
|
|
modelB: root.selectedHoldingsModel
|
|
|
|
roles: ["key", "amount"]
|
|
mode: ModelsComparator.CompareMode.Set
|
|
}
|
|
|
|
ModelsComparator {
|
|
id: channelsModelComparator
|
|
|
|
modelA: root.dirtyValues.selectedChannelsModel
|
|
modelB: root.selectedChannelsModel
|
|
|
|
roles: ["itemId"]
|
|
mode: ModelsComparator.CompareMode.Set
|
|
}
|
|
|
|
QtObject {
|
|
id: d
|
|
|
|
readonly property int maxHoldingsItems: 5
|
|
|
|
readonly property int dropdownHorizontalOffset: 4
|
|
readonly property int dropdownVerticalOffset: 1
|
|
|
|
readonly property bool isCommunityPermission:
|
|
PermissionTypes.isCommunityPermission(dirtyValues.permissionType)
|
|
|
|
onIsCommunityPermissionChanged: {
|
|
if (isCommunityPermission) {
|
|
d.dirtyValues.selectedChannelsModel.clear()
|
|
inSelector.wholeCommunitySelected = true
|
|
inSelector.model = inModelCommunity
|
|
} else {
|
|
inSelector.model = 0
|
|
inSelector.wholeCommunitySelected = false
|
|
inSelector.model = channelsSelectionModel
|
|
}
|
|
}
|
|
|
|
readonly property QtObject dirtyValues: QtObject {
|
|
readonly property ListModel selectedHoldingsModel: ListModel {}
|
|
readonly property ListModel selectedChannelsModel: ListModel {}
|
|
|
|
property int permissionType: PermissionTypes.Type.None
|
|
property bool isPrivate: false
|
|
|
|
Binding on isPrivate {
|
|
value: (d.dirtyValues.permissionType === PermissionTypes.Type.Admin) ||
|
|
(d.dirtyValues.permissionType === PermissionTypes.Type.Moderator)
|
|
}
|
|
|
|
function getHoldingIndex(key) {
|
|
return ModelUtils.indexOf(selectedHoldingsModel, "key", key)
|
|
}
|
|
|
|
function getTokenKeysAndAmounts() {
|
|
return ModelUtils.modelToArray(selectedHoldingsModel, ["type", "key", "amount"])
|
|
.filter(item => item.type !== HoldingTypes.Type.Ens)
|
|
.map(item => ({ key: item.key, amount: item.amount }))
|
|
}
|
|
|
|
function getEnsNames() {
|
|
return ModelUtils.modelToArray(selectedHoldingsModel, ["type", "name"])
|
|
.filter(item => item.type === HoldingTypes.Type.Ens)
|
|
.map(item => item.name)
|
|
}
|
|
}
|
|
|
|
function loadInitValues() {
|
|
// Holdings:
|
|
d.dirtyValues.selectedHoldingsModel.clear()
|
|
d.dirtyValues.selectedHoldingsModel.append(
|
|
ModelUtils.modelToArray(root.selectedHoldingsModel,
|
|
["type", "key", "amount"]))
|
|
|
|
// Permissions:
|
|
d.dirtyValues.permissionType = root.permissionType
|
|
|
|
// Channels
|
|
d.dirtyValues.selectedChannelsModel.clear()
|
|
d.dirtyValues.selectedChannelsModel.append(
|
|
ModelUtils.modelToArray(root.selectedChannelsModel, ["key"]))
|
|
|
|
if (root.selectedChannelsModel &&
|
|
(root.selectedChannelsModel.rowCount()
|
|
|| d.dirtyValues.permissionType === PermissionTypes.Type.None)) {
|
|
inSelector.wholeCommunitySelected = false
|
|
inSelector.model = channelsSelectionModel
|
|
} else {
|
|
inSelector.wholeCommunitySelected = true
|
|
inSelector.model = inModelCommunity
|
|
}
|
|
|
|
// Is private permission
|
|
d.dirtyValues.isPrivate = root.isPrivate
|
|
}
|
|
}
|
|
|
|
contentWidth: mainLayout.width
|
|
contentHeight: mainLayout.height
|
|
|
|
onPermissionTypeChanged: Qt.callLater(() => d.loadInitValues())
|
|
|
|
ColumnLayout {
|
|
id: mainLayout
|
|
width: root.viewWidth
|
|
spacing: 0
|
|
|
|
CurveSeparatorWithText {
|
|
Layout.alignment: Qt.AlignLeft
|
|
Layout.leftMargin: 14
|
|
text: qsTr("Anyone")
|
|
}
|
|
|
|
StatusItemSelector {
|
|
id: tokensSelector
|
|
|
|
property int editedIndex: -1
|
|
|
|
Layout.fillWidth: true
|
|
icon: Style.svg("contact_verified")
|
|
title: qsTr("Who holds")
|
|
placeholderText: qsTr("Example: 10 SNT")
|
|
tagLeftPadding: 2
|
|
asset.height: 28
|
|
asset.width: asset.height
|
|
addButton.visible: model.count < d.maxHoldingsItems
|
|
|
|
model: HoldingsSelectionModel {
|
|
sourceModel: d.dirtyValues.selectedHoldingsModel
|
|
|
|
assetsModel: root.assetsModel
|
|
collectiblesModel: root.collectiblesModel
|
|
}
|
|
|
|
HoldingsDropdown {
|
|
id: dropdown
|
|
|
|
assetsModel: root.assetsModel
|
|
collectiblesModel: root.collectiblesModel
|
|
|
|
function addItem(type, item, amount) {
|
|
const key = item.key
|
|
|
|
d.dirtyValues.selectedHoldingsModel.append(
|
|
{ type, key, amount })
|
|
}
|
|
|
|
function prepareUpdateIndex(key) {
|
|
const itemIndex = tokensSelector.editedIndex
|
|
const existingIndex = d.dirtyValues.getHoldingIndex(key)
|
|
|
|
if (itemIndex !== -1 && existingIndex !== -1 && itemIndex !== existingIndex) {
|
|
const previousKey = d.dirtyValues.selectedHoldingsModel.get(itemIndex).key
|
|
d.dirtyValues.selectedHoldingsModel.remove(existingIndex)
|
|
return d.dirtyValues.getHoldingIndex(previousKey)
|
|
}
|
|
|
|
if (itemIndex === -1) {
|
|
return existingIndex
|
|
}
|
|
|
|
return itemIndex
|
|
}
|
|
|
|
onOpened: {
|
|
usedTokens = d.dirtyValues.getTokenKeysAndAmounts()
|
|
usedEnsNames = d.dirtyValues.getEnsNames().filter(item => item !== ensDomainName)
|
|
}
|
|
|
|
onAddAsset: {
|
|
const modelItem = CommunityPermissionsHelpers.getTokenByKey(
|
|
root.assetsModel, key)
|
|
addItem(HoldingTypes.Type.Asset, modelItem, amount)
|
|
dropdown.close()
|
|
}
|
|
|
|
onAddCollectible: {
|
|
const modelItem = CommunityPermissionsHelpers.getTokenByKey(
|
|
root.collectiblesModel, key)
|
|
addItem(HoldingTypes.Type.Collectible, modelItem, amount)
|
|
dropdown.close()
|
|
}
|
|
|
|
onAddEns: {
|
|
d.dirtyValues.selectedHoldingsModel.append(
|
|
{ type: HoldingTypes.Type.Ens, key: domain, amount: 1 })
|
|
dropdown.close()
|
|
}
|
|
|
|
onUpdateAsset: {
|
|
const itemIndex = prepareUpdateIndex(key)
|
|
const modelItem = CommunityPermissionsHelpers.getTokenByKey(root.assetsModel, key)
|
|
|
|
d.dirtyValues.selectedHoldingsModel.set(
|
|
itemIndex, { type: HoldingTypes.Type.Asset, key, amount })
|
|
dropdown.close()
|
|
}
|
|
|
|
onUpdateCollectible: {
|
|
const itemIndex = prepareUpdateIndex(key)
|
|
const modelItem = CommunityPermissionsHelpers.getTokenByKey(
|
|
root.collectiblesModel, key)
|
|
|
|
d.dirtyValues.selectedHoldingsModel.set(
|
|
itemIndex,
|
|
{ type: HoldingTypes.Type.Collectible, key, amount })
|
|
dropdown.close()
|
|
}
|
|
|
|
onUpdateEns: {
|
|
d.dirtyValues.selectedHoldingsModel.set(
|
|
tokensSelector.editedIndex,
|
|
{ type: HoldingTypes.Type.Ens, key: domain, amount: 1 })
|
|
dropdown.close()
|
|
}
|
|
|
|
onRemoveClicked: {
|
|
d.dirtyValues.selectedHoldingsModel.remove(tokensSelector.editedIndex)
|
|
dropdown.close()
|
|
}
|
|
|
|
onNavigateToMintTokenSettings: {
|
|
root.navigateToMintTokenSettings()
|
|
close()
|
|
}
|
|
}
|
|
|
|
addButton.onClicked: {
|
|
dropdown.parent = tokensSelector.addButton
|
|
dropdown.x = tokensSelector.addButton.width + d.dropdownHorizontalOffset
|
|
dropdown.y = 0
|
|
dropdown.open()
|
|
|
|
editedIndex = -1
|
|
}
|
|
|
|
onItemClicked: {
|
|
if (mouse.button !== Qt.LeftButton)
|
|
return
|
|
|
|
dropdown.parent = item
|
|
dropdown.x = mouse.x + d.dropdownHorizontalOffset
|
|
dropdown.y = d.dropdownVerticalOffset
|
|
|
|
const modelItem = tokensSelector.model.get(index)
|
|
|
|
switch(modelItem.type) {
|
|
case HoldingTypes.Type.Asset:
|
|
dropdown.assetKey = modelItem.key
|
|
dropdown.assetAmount = modelItem.amount
|
|
break
|
|
case HoldingTypes.Type.Collectible:
|
|
dropdown.collectibleKey = modelItem.key
|
|
dropdown.collectibleAmount = modelItem.amount
|
|
break
|
|
case HoldingTypes.Type.Ens:
|
|
dropdown.ensDomainName = modelItem.key
|
|
break
|
|
default:
|
|
console.warn("Unsupported holdings type.")
|
|
}
|
|
|
|
dropdown.setActiveTab(modelItem.type)
|
|
dropdown.openUpdateFlow()
|
|
|
|
editedIndex = index
|
|
}
|
|
}
|
|
Rectangle {
|
|
Layout.leftMargin: 16
|
|
Layout.preferredWidth: 2
|
|
Layout.preferredHeight: 24
|
|
color: Style.current.separator
|
|
}
|
|
StatusFlowSelector {
|
|
id: permissionsSelector
|
|
|
|
Layout.fillWidth: true
|
|
|
|
title: qsTr("Is allowed to")
|
|
placeholderText: qsTr("Example: View and post")
|
|
icon: Style.svg("profile/security")
|
|
|
|
readonly property bool empty:
|
|
d.dirtyValues.permissionType === PermissionTypes.Type.None
|
|
|
|
placeholderItem.visible: empty
|
|
addButton.visible: empty
|
|
|
|
StatusListItemTag {
|
|
readonly property int key: d.dirtyValues.permissionType
|
|
|
|
title: PermissionTypes.getName(key)
|
|
visible: !permissionsSelector.empty
|
|
|
|
asset.name: PermissionTypes.getIcon(key)
|
|
asset.bgColor: "transparent"
|
|
closeButtonVisible: false
|
|
titleText.font.pixelSize: Theme.primaryTextFontSize
|
|
leftPadding: 6
|
|
|
|
Binding on bgColor {
|
|
when: root.permissionTypeLimitReached
|
|
value: Theme.palette.dangerColor3
|
|
}
|
|
|
|
Binding on titleText.color {
|
|
when: root.permissionTypeLimitReached
|
|
value: Theme.palette.dangerColor1
|
|
}
|
|
|
|
Binding on asset.color {
|
|
when: root.permissionTypeLimitReached
|
|
value: Theme.palette.dangerColor1
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
|
|
onClicked: {
|
|
permissionsDropdown.mode = PermissionsDropdown.Mode.Update
|
|
permissionsDropdown.parent = parent
|
|
permissionsDropdown.x = mouse.x + d.dropdownHorizontalOffset
|
|
permissionsDropdown.y = d.dropdownVerticalOffset
|
|
permissionsDropdown.open()
|
|
}
|
|
}
|
|
}
|
|
|
|
PermissionsDropdown {
|
|
id: permissionsDropdown
|
|
|
|
initialPermissionType: d.dirtyValues.permissionType
|
|
enableAdminPermission: root.isOwner
|
|
|
|
onDone: {
|
|
if (d.dirtyValues.permissionType === permissionType) {
|
|
permissionsDropdown.close()
|
|
return
|
|
}
|
|
|
|
d.dirtyValues.permissionType = permissionType
|
|
permissionsDropdown.close()
|
|
}
|
|
}
|
|
|
|
addButton.onClicked: {
|
|
permissionsDropdown.mode = PermissionsDropdown.Mode.Add
|
|
permissionsDropdown.parent = permissionsSelector.addButton
|
|
permissionsDropdown.x = permissionsSelector.addButton.width
|
|
+ d.dropdownHorizontalOffset
|
|
permissionsDropdown.y = 0
|
|
permissionsDropdown.open()
|
|
}
|
|
}
|
|
Rectangle {
|
|
Layout.leftMargin: 16
|
|
Layout.preferredWidth: 2
|
|
Layout.preferredHeight: 24
|
|
color: Style.current.separator
|
|
}
|
|
StatusItemSelector {
|
|
id: inSelector
|
|
|
|
readonly property bool editable: !d.isCommunityPermission
|
|
|
|
addButton.visible: editable
|
|
itemsClickable: editable
|
|
|
|
Layout.fillWidth: true
|
|
icon: d.isCommunityPermission ? Style.svg("communities") : Style.svg("create-category")
|
|
title: qsTr("In")
|
|
placeholderText: qsTr("Example: `#general` channel")
|
|
|
|
useLetterIdenticons: !wholeCommunitySelected || !inDropdown.communityImage
|
|
|
|
tagLeftPadding: wholeCommunitySelected ? 2 : 6
|
|
asset.width: wholeCommunitySelected ? 28 : 20
|
|
asset.height: asset.width
|
|
|
|
property bool wholeCommunitySelected: false
|
|
|
|
function openInDropdown(parent, x, y) {
|
|
inDropdown.parent = parent
|
|
inDropdown.x = x
|
|
inDropdown.y = y
|
|
|
|
const selectedChannels = []
|
|
|
|
if (!inSelector.wholeCommunitySelected) {
|
|
const model = d.dirtyValues.selectedChannelsModel
|
|
const count = model.count
|
|
|
|
for (let i = 0; i < count; i++)
|
|
selectedChannels.push(model.get(i).key)
|
|
}
|
|
|
|
inDropdown.setSelectedChannels(selectedChannels)
|
|
inDropdown.open()
|
|
}
|
|
|
|
ListModel {
|
|
id: inModelCommunity
|
|
|
|
Component.onCompleted: {
|
|
append({
|
|
imageSource: inDropdown.communityImage,
|
|
isIcon: false,
|
|
text: inDropdown.communityName,
|
|
operator: OperatorsUtils.Operators.None,
|
|
color: inDropdown.communityColor
|
|
})
|
|
}
|
|
}
|
|
|
|
ChannelsSelectionModel {
|
|
id: channelsSelectionModel
|
|
|
|
sourceModel: d.dirtyValues.selectedChannelsModel
|
|
|
|
channelsModel: root.channelsModel
|
|
}
|
|
|
|
InDropdown {
|
|
id: inDropdown
|
|
|
|
model: root.channelsModel
|
|
|
|
communityName: root.communityDetails.name
|
|
communityImage: root.communityDetails.image
|
|
communityColor: root.communityDetails.color
|
|
|
|
onChannelsSelected: {
|
|
d.dirtyValues.selectedChannelsModel.clear()
|
|
inSelector.model = 0
|
|
inSelector.wholeCommunitySelected = false
|
|
|
|
const modelData = channels.map(key => ({ key }))
|
|
d.dirtyValues.selectedChannelsModel.append(modelData)
|
|
|
|
inSelector.model = channelsSelectionModel
|
|
close()
|
|
}
|
|
|
|
onCommunitySelected: {
|
|
d.dirtyValues.selectedChannelsModel.clear()
|
|
inSelector.wholeCommunitySelected = true
|
|
inSelector.model = inModelCommunity
|
|
close()
|
|
}
|
|
}
|
|
|
|
addButton.onClicked: {
|
|
inDropdown.acceptMode = InDropdown.AcceptMode.Add
|
|
openInDropdown(inSelector.addButton,
|
|
inSelector.addButton.width + d.dropdownHorizontalOffset, 0)
|
|
}
|
|
|
|
onItemClicked: {
|
|
if (mouse.button !== Qt.LeftButton)
|
|
return
|
|
|
|
inDropdown.acceptMode = InDropdown.AcceptMode.Update
|
|
openInDropdown(item, mouse.x + d.dropdownHorizontalOffset,
|
|
d.dropdownVerticalOffset)
|
|
}
|
|
}
|
|
Separator {
|
|
Layout.topMargin: 24
|
|
}
|
|
|
|
HidePermissionPanel {
|
|
Layout.topMargin: 12
|
|
Layout.fillWidth: true
|
|
Layout.leftMargin: 16
|
|
Layout.rightMargin: Layout.leftMargin
|
|
|
|
enabled: d.dirtyValues.permissionType !== PermissionTypes.Type.Admin
|
|
checked: d.dirtyValues.isPrivate
|
|
onToggled: d.dirtyValues.isPrivate = checked
|
|
}
|
|
|
|
PermissionWarningPanel {
|
|
id: duplicationPanel
|
|
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 50 // by desing
|
|
|
|
text: {
|
|
if (root.permissionTypeLimitReached)
|
|
return PermissionTypes.getPermissionsLimitWarning(
|
|
d.dirtyValues.permissionType)
|
|
|
|
if (root.permissionDuplicated)
|
|
return qsTr("Permission with same properties is already active, edit properties to create a new permission.")
|
|
|
|
return ""
|
|
}
|
|
|
|
visible: root.permissionDuplicated || root.permissionTypeLimitReached
|
|
}
|
|
|
|
StatusButton {
|
|
Layout.preferredHeight: 44
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: Style.current.bigPadding
|
|
|
|
visible: !root.isEditState
|
|
text: qsTr("Create permission")
|
|
enabled: root.isFullyFilled
|
|
&& !root.permissionDuplicated
|
|
&& !root.permissionTypeLimitReached
|
|
|
|
onClicked: root.createPermissionClicked()
|
|
}
|
|
}
|
|
}
|