status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Alexandra Betouni 2022-02-18 02:11:56 +02:00 committed by Michał Cieślak
parent 9f66a36b69
commit c5635bb36a
2 changed files with 53 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/StatusQ/sandbox/demoapp/CreateChatView.qml
View File

@ -170,27 +170,6 @@ Page {
font.pixelSize: 15 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 { MouseArea {
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton

95
ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml
View File

@ -19,17 +19,21 @@ Item {
property ListModel namesModel: ListModel { } property ListModel namesModel: ListModel { }
function find(model, criteria) { function find(model, criteria) {
for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i); for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
return null; return null;
} }
function insertTag(name, id) { function insertTag(name, id) {
if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) { if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
namesModel.insert(namesModel.count, {"name": name, "publicId": id}); namesModel.insert(namesModel.count, {"name": name, "publicId": id});
addMember(id);
edit.clear(); edit.clear();
} }
} }
signal addMember(string memberId)
signal removeMember(string memberId)
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 8 radius: 8
@ -47,47 +51,53 @@ Item {
text: root.toLabelText text: root.toLabelText
} }
ListView { ScrollView {
id: namesList Layout.fillWidth: true
Layout.preferredWidth: (count >= 5) ? (parent.width - warningTextLabel.width - 30) : childrenRect.width
implicitHeight: 30 implicitHeight: 30
visible: (count > 0)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
model: namesModel visible: (namesList.count > 0)
orientation: ListView.Horizontal contentWidth: namesList.contentWidth
spacing: 8 ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true clip: true
onWidthChanged: { ListView {
positionViewAtEnd(); id: namesList
} anchors.fill: parent
model: namesModel
delegate: Rectangle { orientation: ListView.Horizontal
id: nameDelegate spacing: 8
width: (nameText.contentWidth + 34) onContentWidthChanged: {
height: 30 positionViewAtEnd();
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 { delegate: Rectangle {
anchors.left: nameText.right id: nameDelegate
anchors.verticalCenter: parent.verticalCenter width: (nameText.contentWidth + 34)
color: Theme.palette.indirectColor1 height: 30
icon: "close" color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
} radius: 8
MouseArea { StatusBaseText {
id: mouseArea id: nameText
anchors.fill: parent anchors.left: parent.left
hoverEnabled: true anchors.leftMargin: 8
cursorShape: Qt.PointingHandCursor anchors.verticalCenter: parent.verticalCenter
onClicked: { color: Theme.palette.indirectColor1
namesModel.remove(index, 1); 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 color: Theme.palette.directColor1
Keys.onPressed: { Keys.onPressed: {
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape) 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); namesModel.remove((namesList.count-1), 1);
} }
} }
@ -114,12 +125,12 @@ Item {
StatusBaseText { StatusBaseText {
id: warningTextLabel id: warningTextLabel
visible: (namesModel.count === 5) visible: (namesModel.count === root.nameCountLimit)
Layout.preferredWidth: 120 Layout.preferredWidth: 120
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
font.pixelSize: 10 font.pixelSize: 10
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
text: root.warningText text: root.nameCountLimit + " " + root.warningText
} }
} }
} }