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

@@ -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

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
             }
         }
     }