From d924768892c2016b10f344f253becb15ce615dea 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(Components/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 --- sandbox/demoapp/CreateChatView.qml | 21 ----- src/StatusQ/Components/StatusTagSelector.qml | 95 +++++++++++--------- 2 files changed, 53 insertions(+), 63 deletions(-) diff --git a/sandbox/demoapp/CreateChatView.qml b/sandbox/demoapp/CreateChatView.qml index 8b714bd3..5fc7990d 100644 --- a/sandbox/demoapp/CreateChatView.qml +++ b/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/src/StatusQ/Components/StatusTagSelector.qml b/src/StatusQ/Components/StatusTagSelector.qml index 03634955..6865ba9a 100644 --- a/src/StatusQ/Components/StatusTagSelector.qml +++ b/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 } } }