refactor(@desktop/chat): use StatusQ components for chat user list

This replaces the self-built components for the user list with StatusQ's
list item component and also addresses some of the quirks that existed in the UI
related to that original component.

The user list is now responsive and properly aligned.

**This depends on StatusQ v0.18.0**
This commit is contained in:
Pascal Precht 2021-11-30 13:27:08 +01:00 committed by r4bbit.eth
parent b4b28d2f98
commit 868c675f6e
4 changed files with 86 additions and 129 deletions

@ -1 +1 @@
Subproject commit e54211cb994ee8a650c49553c1e761670ea3d4f1 Subproject commit 2336b6aab17766b953f6c8d4d969c1bd9eda9aa2

View File

@ -9,94 +9,80 @@ import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
Item { StatusListItem {
id: wrapper id: root
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 8
anchors.left: parent.left anchors.left: parent.left
height: rectangle.height + 4 anchors.leftMargin: 8
implicitHeight: 44
leftPadding: 8
rightPadding: 8
property string publicKey: ""
property string profilePubKey
property var contactsList property var contactsList
property string name: "channelName"
property string lastSeen: ""
property string identicon
property int statusType: -1 property int statusType: -1
property bool hovered: false property string name: ""
property bool enableMouseArea: true property string publicKey: ""
property string profilePubKey: ""
property string identicon: ""
property bool isCurrentUser: (publicKey === profilePubKey)
property string profileImage: appMain.getProfileImage(publicKey) || ""
property bool highlighted: false
property string lastSeen: ""
property bool isOnline: false property bool isOnline: false
property var currentTime property var currentTime
property var messageContextMenu property var messageContextMenu
property color color: {
if (wrapper.hovered) {
return Style.current.menuBackgroundHover title: isCurrentUser ? qsTr("You") : Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(root.name)))
} image.source: profileImage || identicon
return Style.current.transparent image.isIdenticon: !profileImage
} image.width: 24
image.height: 24
statusListItemIcon.anchors.topMargin: 10
statusListItemTitle.elide: Text.ElideRight
statusListItemTitle.wrapMode: Text.NoWrap
color: sensor.containsMouse ?
Theme.palette.statusChatListItem.hoverBackgroundColor :
Theme.palette.baseColor4
sensor.onClicked: {
if (mouse.button === Qt.LeftButton) {
//TODO remove dynamic scoping //TODO remove dynamic scoping
property string profileImage: appMain.getProfileImage(publicKey) || "" openProfilePopup(root.name, root.publicKey, (root.profileImage || root.identicon), "", appMain.getUserNickname(root.publicKey));
property bool isCurrentUser: (publicKey === profilePubKey) }
else if (mouse.button === Qt.RightButton && !!messageContextMenu) {
// Set parent, X & Y positions for the messageContextMenu
messageContextMenu.parent = root
messageContextMenu.setXPosition = function() { return 0}
messageContextMenu.setYPosition = function() { return root.height}
messageContextMenu.isProfile = true;
messageContextMenu.show(root.name, root.publicKey, (root.profileImage || root.identicon), "", appMain.getUserNickname(root.publicKey))
}
}
Rectangle {
id: rectangle
width: parent.width
height: 40
radius: 8
color: wrapper.color
Connections { Connections {
enabled: !!wrapper.contactsList enabled: !!root.contactsList
target: wrapper.contactsList target: root.contactsList
onContactChanged: { onContactChanged: {
if (pubkey === wrapper.publicKey) { if (pubkey === root.publicKey) {
wrapper.profileImage = !!appMain.getProfileImage(wrapper.publicKey) ? root.profileImage = !!appMain.getProfileImage(root.publicKey) ?
appMain.getProfileImage(wrapper.publicKey) : "" appMain.getProfileImage(root.publicKey) : ""
} }
} }
} }
StatusSmartIdenticon {
id: contactImage
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
image: StatusImageSettings {
width: 28
height: 28
source: wrapper.profileImage || wrapper.identicon
isIdenticon: true
}
icon: StatusIconSettings {
width: 28
height: 28
letterSize: 15
}
name: wrapper.name
}
StyledText {
id: contactInfo
text: Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) + (isCurrentUser ? " " + qsTrId("(you)") : "")
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
elide: Text.ElideRight
color: Style.current.textColor
font.weight: Font.Medium
font.pixelSize: 15
anchors.left: contactImage.right
anchors.leftMargin: Style.current.halfPadding
anchors.verticalCenter: parent.verticalCenter
}
StatusBadge { StatusBadge {
id: statusBadge id: statusBadge
width: 15 width: 15
height: 15 height: 15
anchors.left: contactImage.right anchors.left: parent.left
anchors.leftMargin: -Style.current.smallPadding anchors.leftMargin: 22
anchors.bottom: contactImage.bottom anchors.bottom: parent.bottom
visible: wrapper.isOnline && !((statusType === -1) && (lastSeenMinutesAgo > 7)) anchors.bottomMargin: 6
visible: root.isOnline && !((root.statusType === -1) && (lastSeenMinutesAgo > 7))
border.width: 3 border.width: 3
border.color: Theme.palette.statusAppNavBar.backgroundColor border.color: root.sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
property real lastSeenMinutesAgo: ((currentTime/1000 - parseInt(lastSeen)) / 60); property real lastSeenMinutesAgo: ((currentTime/1000 - parseInt(lastSeen)) / 60);
color: { color: {
if (visible) { if (visible) {
@ -115,33 +101,4 @@ Item {
} }
} }
} }
MouseArea {
enabled: enableMouseArea
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: {
if (mouse.button === Qt.LeftButton) {
//TODO remove dynamic scoping
openProfilePopup(wrapper.name, wrapper.publicKey, (wrapper.profileImage || wrapper.identicon), "", appMain.getUserNickname(wrapper.publicKey));
}
else if (mouse.button === Qt.RightButton && !!messageContextMenu) {
// Set parent, X & Y positions for the messageContextMenu
messageContextMenu.parent = rectangle
messageContextMenu.setXPosition = function() { return 0}
messageContextMenu.setYPosition = function() { return rectangle.height}
messageContextMenu.isProfile = true;
messageContextMenu.show(wrapper.name, wrapper.publicKey, (wrapper.profileImage || wrapper.identicon), "", appMain.getUserNickname(wrapper.publicKey))
}
}
}
}
} }

View File

@ -44,11 +44,10 @@ Item {
policy: ScrollBar.AsNeeded policy: ScrollBar.AsNeeded
} }
anchors { anchors {
left: parent.left
top: titleText.bottom top: titleText.bottom
topMargin: Style.current.padding topMargin: Style.current.padding
left: parent.left
right: parent.right right: parent.right
rightMargin: Style.current.halfPadding
bottom: parent.bottom bottom: parent.bottom
bottomMargin: Style.current.bigPadding bottomMargin: Style.current.bigPadding
} }
@ -65,14 +64,14 @@ Item {
] ]
model: root.userList model: root.userList
delegate: UserDelegate { delegate: UserDelegate {
publicKey: model.publicKey
name: model.userName name: model.userName
publicKey: model.publicKey
profilePubKey: root.profilePubKey
identicon: model.identicon identicon: model.identicon
contactsList: root.contactsList
lastSeen: model.lastSeen / 1000 lastSeen: model.lastSeen / 1000
currentTime: root.currentTime currentTime: root.currentTime
isOnline: root.isOnline isOnline: root.isOnline
contactsList: root.contactsList
profilePubKey: root.profilePubKey
} }
} }
} }

View File

@ -14,6 +14,7 @@ import utils 1.0
import "../../controls" import "../../controls"
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
Item { Item {
@ -28,7 +29,7 @@ Item {
property string currentUserName: "" property string currentUserName: ""
property bool currentUserOnline: true property bool currentUserOnline: true
StyledText { StatusBaseText {
id: titleText id: titleText
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
@ -37,7 +38,8 @@ Item {
opacity: (root.width > 58) ? 1.0 : 0.0 opacity: (root.width > 58) ? 1.0 : 0.0
visible: (opacity > 0.1) visible: (opacity > 0.1)
font.pixelSize: Style.current.primaryTextFontSize font.pixelSize: Style.current.primaryTextFontSize
font.bold: true font.weight: Font.Medium
color: Theme.palette.directColor1
//% "Members" //% "Members"
text: qsTrId("members-label") text: qsTrId("members-label")
} }
@ -53,7 +55,6 @@ Item {
topMargin: Style.current.padding topMargin: Style.current.padding
left: parent.left left: parent.left
right: parent.right right: parent.right
rightMargin: Style.current.halfPadding
bottom: parent.bottom bottom: parent.bottom
bottomMargin: Style.current.bigPadding bottomMargin: Style.current.bigPadding
} }
@ -66,7 +67,7 @@ Item {
Item { Item {
width: parent.width width: parent.width
height: 24 height: 24
StyledText { StatusBaseText {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.current.padding anchors.leftMargin: Style.current.padding
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -87,16 +88,16 @@ Item {
] ]
model: community.members model: community.members
delegate: UserDelegate { delegate: UserDelegate {
publicKey: model.pubKey
name: model.userName name: model.userName
publicKey: model.pubKey
profilePubKey: root.profilePubKey
identicon: model.identicon identicon: model.identicon
contactsList: root.contactsList
lastSeen: model.lastSeen lastSeen: model.lastSeen
statusType: model.statusType statusType: model.statusType
currentTime: root.currentTime currentTime: root.currentTime
isOnline: (model.userName === root.currentUserName) ? isOnline: (model.userName === root.currentUserName) ?
root.currentUserOnline : model.online root.currentUserOnline : model.online
contactsList: root.contactsList
profilePubKey: root.profilePubKey
messageContextMenu: root.messageContextMenu messageContextMenu: root.messageContextMenu
} }
} }