From c5635bb36a29c229a1e560f6a3d7a29a09b3029a Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Fri, 18 Feb 2022 02:11:56 +0200 Subject: [PATCH] fix(StatusTagSelector): Updates and fixes in the component Moved `remove` function below remove contact signal also removed online status badge from CreateChatView Fixed as well name tags to be adapting on parent's width and scrolling the list to the end when this is bigger than the available width. Switcehd to use nameCountLimit property where needed --- ui/StatusQ/sandbox/demoapp/CreateChatView.qml | 21 ---- .../StatusQ/Components/StatusTagSelector.qml | 95 +++++++++++-------- 2 files changed, 53 insertions(+), 63 deletions(-) diff --git a/ui/StatusQ/sandbox/demoapp/CreateChatView.qml b/ui/StatusQ/sandbox/demoapp/CreateChatView.qml index 8b714bd348..5fc7990d55 100644 --- a/ui/StatusQ/sandbox/demoapp/CreateChatView.qml +++ b/ui/StatusQ/sandbox/demoapp/CreateChatView.qml @@ -170,27 +170,6 @@ Page { font.pixelSize: 15 } - StatusBadge { - id: statusBadge - width: 15 - height: 15 - anchors.left: contactImage.right - anchors.leftMargin: -8 - anchors.bottom: contactImage.bottom - border.width: 3 - border.color: Theme.palette.statusAppNavBar.backgroundColor - color: { - if (model.onlineStatus === 1) - return Theme.palette.successColor1; - else if (model.onlineStatus === 2) - return Theme.palette.pinColor1; - else if (model.onlineStatus === 3) - return Theme.palette.dangerColor1; - - return "transparent" - } - } - MouseArea { cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor acceptedButtons: Qt.LeftButton | Qt.RightButton diff --git a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml index 036349554f..6865ba9acd 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml @@ -19,17 +19,21 @@ Item { property ListModel namesModel: ListModel { } function find(model, criteria) { - for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i); - return null; + for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i); + return null; } function insertTag(name, id) { if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) { namesModel.insert(namesModel.count, {"name": name, "publicId": id}); + addMember(id); edit.clear(); } } + signal addMember(string memberId) + signal removeMember(string memberId) + Rectangle { anchors.fill: parent radius: 8 @@ -47,47 +51,53 @@ Item { text: root.toLabelText } - ListView { - id: namesList - Layout.preferredWidth: (count >= 5) ? (parent.width - warningTextLabel.width - 30) : childrenRect.width + ScrollView { + Layout.fillWidth: true implicitHeight: 30 - visible: (count > 0) Layout.alignment: Qt.AlignVCenter - model: namesModel - orientation: ListView.Horizontal - spacing: 8 + visible: (namesList.count > 0) + contentWidth: namesList.contentWidth + ScrollBar.vertical.policy: ScrollBar.AlwaysOff + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff clip: true - onWidthChanged: { - positionViewAtEnd(); - } - - delegate: Rectangle { - id: nameDelegate - width: (nameText.contentWidth + 34) - height: 30 - color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1 - radius: 8 - StatusBaseText { - id: nameText - anchors.left: parent.left - anchors.leftMargin: 8 - anchors.verticalCenter: parent.verticalCenter - color: Theme.palette.indirectColor1 - text: name + ListView { + id: namesList + anchors.fill: parent + model: namesModel + orientation: ListView.Horizontal + spacing: 8 + onContentWidthChanged: { + positionViewAtEnd(); } - StatusIcon { - anchors.left: nameText.right - anchors.verticalCenter: parent.verticalCenter - color: Theme.palette.indirectColor1 - icon: "close" - } - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - namesModel.remove(index, 1); + delegate: Rectangle { + id: nameDelegate + width: (nameText.contentWidth + 34) + height: 30 + color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1 + radius: 8 + StatusBaseText { + id: nameText + anchors.left: parent.left + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.indirectColor1 + text: name + } + StatusIcon { + anchors.left: nameText.right + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.indirectColor1 + icon: "close" + } + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + removeMember(publicId); + namesModel.remove(index, 1); + } } } } @@ -106,7 +116,8 @@ Item { color: Theme.palette.directColor1 Keys.onPressed: { if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape) - && getText(cursorPosition, (cursorPosition-1)) === "") { + && getText(cursorPosition, (cursorPosition-1)) === "") { + removeMember(namesModel.get(namesList.count-1).publicId); namesModel.remove((namesList.count-1), 1); } } @@ -114,12 +125,12 @@ Item { StatusBaseText { id: warningTextLabel - visible: (namesModel.count === 5) + visible: (namesModel.count === root.nameCountLimit) Layout.preferredWidth: 120 Layout.alignment: Qt.AlignVCenter | Qt.AlignRight font.pixelSize: 10 color: Theme.palette.dangerColor1 - text: root.warningText + text: root.nameCountLimit + " " + root.warningText } } }