From 14c15ebbfae036092500763911af7866c149eeee Mon Sep 17 00:00:00 2001 From: Alexandra Betouni Date: Wed, 23 Mar 2022 23:31:30 +0200 Subject: [PATCH] fix(StatusTagSelector): move suggestions popup inside component Closes https://github.com/status-im/StatusQ/issues/531 --- ui/StatusQ | 2 +- .../AppLayouts/Chat/views/CreateChatView.qml | 159 +----------------- 2 files changed, 6 insertions(+), 155 deletions(-) diff --git a/ui/StatusQ b/ui/StatusQ index b6c3231e30..475eb81b2a 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit b6c3231e307cfb20fbf2d4afc228619afdfd41cb +Subproject commit 475eb81b2aefb12dba263c3fb8c246a24fc787d8 diff --git a/ui/app/AppLayouts/Chat/views/CreateChatView.qml b/ui/app/AppLayouts/Chat/views/CreateChatView.qml index 1bc5305646..f5de09e77b 100644 --- a/ui/app/AppLayouts/Chat/views/CreateChatView.qml +++ b/ui/app/AppLayouts/Chat/views/CreateChatView.qml @@ -98,34 +98,20 @@ Page { Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.leftMargin: 17 - implicitHeight: 44 + maxHeight: root.height + listLabel: qsTr("Contacts") toLabelText: qsTr("To: ") warningText: qsTr("USER LIMIT REACHED") - - //simulate model filtering, TODO this - //makes more sense to be provided by the backend - //figure how real implementation should look like - property ListModel sortedList: ListModel { } onTextChanged: { - sortedList.clear(); - if (text !== "") { - for (var i = 0; i < contactsModel.count; i++ ) { - var entry = contactsModel.get(i); - if (entry.name.toLowerCase().includes(text.toLowerCase())) { - sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name, - "icon": entry.icon, "isIdenticon": entry.isIdenticon}); - userListView.model = sortedList; - } - } - } else { - userListView.model = contactsModel; - } + sortModel(root.contactsModel); } + Component.onCompleted: { sortModel(root.contactsModel); } } StatusButton { id: confirmButton implicitHeight: 44 + Layout.alignment: Qt.AlignTop enabled: (tagSelector.namesModel.count > 0) text: "Confirm" onClicked: { @@ -140,141 +126,6 @@ Page { anchors.fill: parent anchors.topMargin: headerRow.height + 32 - Item { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: chatInput.visible? chatInput.top : parent.bottom - visible: (contactsModel.count > 0) - - Component.onCompleted: { - if (visible) { - tagSelector.textEdit.forceActiveFocus(); - } - } - - StatusBaseText { - id: contactsLabel - font.pixelSize: 15 - anchors.left: parent.left - anchors.leftMargin: 8 - color: Theme.palette.baseColor1 - text: qsTr("Contacts") - } - - Control { - width: 360 - anchors { - top: contactsLabel.bottom - topMargin: Style.current.halfPadding - bottom: !statusPopupMenuBackgroundContent.visible ? parent.bottom : undefined - } - height: Style.current.padding + (!statusPopupMenuBackgroundContent.visible ? parent.height : - (((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64))) - x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) && - ((tagSelector.textEdit.x + Style.current.bigPadding + statusPopupMenuBackgroundContent.width) < parent.width)) - ? (tagSelector.textEdit.x + Style.current.bigPadding) : 0 - background: Rectangle { - id: statusPopupMenuBackgroundContent - anchors.fill: parent - visible: (tagSelector.sortedList.count > 0) - color: Theme.palette.statusPopupMenu.backgroundColor - radius: 8 - layer.enabled: true - layer.effect: DropShadow { - width: statusPopupMenuBackgroundContent.width - height: statusPopupMenuBackgroundContent.height - x: statusPopupMenuBackgroundContent.x - visible: statusPopupMenuBackgroundContent.visible - source: statusPopupMenuBackgroundContent - horizontalOffset: 0 - verticalOffset: 4 - radius: 12 - samples: 25 - spread: 0.2 - color: Theme.palette.dropShadow - } - } - contentItem: ListView { - id: userListView - anchors.fill: parent - anchors.topMargin: 8 - anchors.bottomMargin: 8 - clip: true - model: contactsModel - ScrollBar.vertical: ScrollBar { - policy: ScrollBar.AsNeeded - } - boundsBehavior: Flickable.StopAtBounds - delegate: Item { - id: wrapper - anchors.right: parent.right - anchors.left: parent.left - height: 64 - property bool hovered: false - Rectangle { - id: rectangle - anchors.fill: parent - anchors.rightMargin: Style.current.halfPadding - anchors.leftMargin: Style.current.halfPadding - radius: Style.current.radius - visible: (tagSelector.sortedList.count > 0) - color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent" - } - - StatusSmartIdenticon { - id: contactImage - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.verticalCenter: parent.verticalCenter - name: model.name - icon: StatusIconSettings { - width: 28 - height: 28 - letterSize: 15 - } - image: StatusImageSettings { - width: 28 - height: 28 - source: model.icon - isIdenticon: model.isIdenticon - } - } - - StatusBaseText { - id: contactInfo - text: model.name - anchors.right: parent.right - anchors.rightMargin: 8 - anchors.left: contactImage.right - anchors.leftMargin: 16 - anchors.verticalCenter: parent.verticalCenter - elide: Text.ElideRight - color: Theme.palette.directColor1 - font.weight: Font.Medium - font.pixelSize: 15 - } - - MouseArea { - cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor - acceptedButtons: Qt.LeftButton | Qt.RightButton - anchors.fill: parent - hoverEnabled: true - onEntered: { - wrapper.hovered = true; - } - onExited: { - wrapper.hovered = false; - } - onClicked: { - tagSelector.insertTag(model.name, model.publicId); - } - } - } - } - } - } - StatusChatInput { id: chatInput anchors.bottom: parent.bottom