fix(StatusTagSelector): move suggestions popup inside component
Closes https://github.com/status-im/StatusQ/issues/531
This commit is contained in:
Alexandra Betouni
Iuri Matias
parent
3711ab613a
commit
14c15ebbfa
|
|
@ -1 +1 @@
|
||||||
Subproject commit b6c3231e307cfb20fbf2d4afc228619afdfd41cb
|
Subproject commit 475eb81b2aefb12dba263c3fb8c246a24fc787d8
|
||||||
|
|
@ -98,34 +98,20 @@ Page {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||||
Layout.leftMargin: 17
|
Layout.leftMargin: 17
|
||||||
implicitHeight: 44
|
maxHeight: root.height
|
||||||
|
listLabel: qsTr("Contacts")
|
||||||
toLabelText: qsTr("To: ")
|
toLabelText: qsTr("To: ")
|
||||||
warningText: qsTr("USER LIMIT REACHED")
|
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: {
|
onTextChanged: {
|
||||||
sortedList.clear();
|
sortModel(root.contactsModel);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: { sortModel(root.contactsModel); }
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusButton {
|
StatusButton {
|
||||||
id: confirmButton
|
id: confirmButton
|
||||||
implicitHeight: 44
|
implicitHeight: 44
|
||||||
|
Layout.alignment: Qt.AlignTop
|
||||||
enabled: (tagSelector.namesModel.count > 0)
|
enabled: (tagSelector.namesModel.count > 0)
|
||||||
text: "Confirm"
|
text: "Confirm"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
|
|
@ -140,141 +126,6 @@ Page {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.topMargin: headerRow.height + 32
|
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 {
|
StatusChatInput {
|
||||||
id: chatInput
|
id: chatInput
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue