import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQml 2.15 import AppLayouts.Chat.controls.community 1.0 import utils 1.0 import SortFilterProxyModel 0.2 import Storybook 1.0 SplitView { id: root property bool globalUtilsReady: false property bool mainModuleReady: false orientation: Qt.Vertical Logs { id: logs } QtObject { function isCompressedPubKey(publicKey) { return true } function getColorId(publicKey) { return Math.floor(Math.random() * 10) } Component.onCompleted: { Utils.globalUtilsInst = this globalUtilsReady = true } Component.onDestruction: { globalUtilsReady = false Utils.globalUtilsInst = {} } } QtObject { function getContactDetailsAsJson() { return JSON.stringify({ ensVerified: true }) } Component.onCompleted: { mainModuleReady = true Utils.mainModuleInst = this } Component.onDestruction: { mainModuleReady = false Utils.mainModuleInst = {} } } ListModel { id: members property int counter: 0 function addMember() { const i = counter++ const key = `pub_key_${i}` const firstLetters = ["a", "b", "c", "d"] const firstLetterIdx = Math.min(Math.floor(i / firstLetters.length), firstLetters.length - 1) const firstLetter = firstLetters[firstLetterIdx] append({ alias: "", colorId: "1", displayName: `${firstLetter}contact ${i}`, ensName: "", icon: "", isContact: true, localNickname: "", onlineStatus: 1, pubKey: key, isVerified: true, isUntrustworthy: false }) } Component.onCompleted: { for (let i = 0; i < 33; i++) addMember() } } Pane { id: container SplitView.fillWidth: true SplitView.fillHeight: true Rectangle { id: startRect border.color: "green" color: "lightgreen" border.width: 3 width: 50 height: width x: 70 y: 70 radius: width / 2 Drag.active: dragArea.drag.active MouseArea { id: dragArea anchors.fill: parent drag.target: parent } } Loader { id: loader anchors.centerIn: parent active: globalUtilsReady && mainModuleReady sourceComponent: MembersDropdown { id: membersDropdown closePolicy: Popup.NoAutoClose model: SortFilterProxyModel { Binding on sourceModel { when: globalUtilsReady && mainModuleReady value: members restoreMode: Binding.RestoreBindingOrValue } filters: [ ExpressionFilter { enabled: membersDropdown.searchText !== "" function matchesAlias(name, filter) { return name.split(" ").some(p => p.startsWith(filter)) } expression: { membersDropdown.selectedKeys membersDropdown.searchText if (membersDropdown.selectedKeys.indexOf(model.pubKey) > -1) return true const filter = membersDropdown.searchText.toLowerCase() return matchesAlias(model.alias.toLowerCase(), filter) || model.displayName.toLowerCase().includes(filter) || model.ensName.toLowerCase().includes(filter) || model.localNickname.toLowerCase().includes(filter) || model.pubKey.toLowerCase().includes(filter) } } ] } onBackButtonClicked: { logs.logEvent("MembersDropdown::backButtonClicked") } onAddButtonClicked: { logs.logEvent("MembersDropdown::addButtonClicked, keys: " + membersDropdown.selectedKeys) } Component.onCompleted: open() } } } LogsAndControlsPanel { SplitView.minimumHeight: 100 SplitView.preferredHeight: 250 logsView.logText: logs.logText Loader { active: loader.item anchors.left: parent.left anchors.right: parent.right sourceComponent: ColumnLayout { readonly property MembersDropdown membersDropdown: loader.item RowLayout { Label { text: "maximum list height:" } Slider { id: maxListHeightSlider from: 100 to: 500 stepSize: 1 Component.onCompleted: { value = membersDropdown.maximumListHeight membersDropdown.maximumListHeight = Qt.binding(() => value) } } Label { text: maxListHeightSlider.value } } RowLayout { Label { text: "margins:" } Slider { id: marginsSlider from: -1 to: 50 stepSize: 1 Component.onCompleted: { value = membersDropdown.margins membersDropdown.margins = Qt.binding(() => value) } } Label { text: marginsSlider.value } } RowLayout { Label { text: "bottom inset:" } Slider { id: bottomInsetSlider from: 0 to: 50 stepSize: 1 Component.onCompleted: { value = membersDropdown.bottomInset membersDropdown.bottomInset = Qt.binding(() => value) } } Label { text: bottomInsetSlider.value } } RowLayout { RadioButton { id: anchorToItemRadioButton text: "anchor to item" checked: true } RadioButton { id: anchorToOverlayRadioButton text: "anchor to overlay" } Binding { target: membersDropdown property: "parent" value: anchorToItemRadioButton.checked ? startRect : membersDropdown.Overlay.overlay } Binding { target: membersDropdown.anchors when: anchorToOverlayRadioButton.checked property: "centerIn" value: membersDropdown.parent restoreMode: Binding.RestoreBindingOrValue } Binding { target: membersDropdown property: "x" value: anchorToItemRadioButton.checked ? startRect.width / 2 : 0 } Binding { target: membersDropdown property: "y" value: anchorToItemRadioButton.checked ? startRect.height / 2 : 0 } } Label { Layout.fillWidth: true text: `selected members: ${membersDropdown.selectedKeys}` wrapMode: Label.Wrap } } } } }