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: the member search is adding empty spaces on the search results 

Also fix other smaller issues found in this panel:
- display correct user name (not just `model.displayName`)
- do not display tooltips for invisible buttons
- vertically center the action buttons
- use `SearchBox` for consistency

Fixes #11848
This commit is contained in:
Lukáš Tinkl 2023-08-17 10:55:28 +02:00 committed by Lukáš Tinkl
parent 4d770e6a7f
commit 5b2a7b9264
4 changed files with 91 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/pages/CommunityTokenViewPage.qml
View File

@ -333,14 +333,14 @@ SplitView {
CheckBox {
id: transferibleChecker
text: "Tranferible"
text: "Tranferable"
checked: true
}
CheckBox {
id: selfdestructChecker
text: "Remote self-desctruct"
text: "Remote self-destruct"
checked: true
}
}

54
storybook/pages/MembersTabPanelPage.qml
View File

@ -12,38 +12,78 @@ import Models 1.0
import SortFilterProxyModel 0.2
import Storybook 1.0
import StatusQ.Core.Utils 0.1 as SQUtils
SplitView {
id: root
orientation: Qt.Vertical
Logs { id: logs }
// Utils.globalUtilsInst mock
QtObject {
function getEmojiHashAsJson(publicKey) {
return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
}
function getColorId(publicKey) {
return SQUtils.ModelUtils.getByKey(usersModel, "pubKey", publicKey, "colorId")
}
function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
function getColorHashAsJson(publicKey) {
return JSON.stringify([{colorId: 0, segmentLength: 1},
{colorId: 19, segmentLength: 2}])
}
function isCompressedPubKey(publicKey) { return true }
Component.onCompleted: {
Utils.globalUtilsInst = this
}
Component.onDestruction: {
Utils.globalUtilsInst = {}
}
}
// Global.userProfile mock
QtObject {
readonly property string pubKey: "0x043a7ed0e8d1012cf04" // Mike from UsersModel
Component.onCompleted: {
Global.userProfile = this
}
Component.onDestruction: {
Utils.userProfile = {}
}
}
MembersTabPanel {
id: membersTabPanelPage
SplitView.fillWidth: true
SplitView.fillHeight: true
placeholderText: "Placeholder text"
placeholderText: "Search users"
model: usersModelWithMembershipState
panelType: viewStateSelector.currentValue
onKickUserClicked: {
logs.logEvent("MembersTabPanel::onKickUserClicked")
logs.logEvent("MembersTabPanel::onKickUserClicked", ["id", "name"], arguments)
}
onBanUserClicked: {
logs.logEvent("MembersTabPanel::onBanUserClicked")
logs.logEvent("MembersTabPanel::onBanUserClicked", ["id", "name"], arguments)
}
onUnbanUserClicked: {
logs.logEvent("MembersTabPanel::onUnbanUserClicked")
logs.logEvent("MembersTabPanel::onUnbanUserClicked", ["id"], arguments)
}
onAcceptRequestToJoin: {
logs.logEvent("MembersTabPanel::onAcceptRequestToJoin")
logs.logEvent("MembersTabPanel::onAcceptRequestToJoin", ["id"], arguments)
}
onDeclineRequestToJoin: {
logs.logEvent("MembersTabPanel::onDeclineRequestToJoin")
logs.logEvent("MembersTabPanel::onDeclineRequestToJoin", ["id"], arguments)
}
}
@ -51,7 +91,6 @@ SplitView {
id: usersModel
}
SortFilterProxyModel {
id: usersModelWithMembershipState
readonly property var membershipStatePerView: [
@ -106,7 +145,6 @@ SplitView {
}
}
}
}
Settings {

39
storybook/src/Models/UsersModel.qml
View File

@ -7,9 +7,9 @@ ListModel {
pubKey: "0x043a7ed0e8d1012cf04"
onlineStatus: 1
isContact: true
isVerified: true
isVerified: false
isAdmin: false
isUntrustworthy: false
isUntrustworthy: true
displayName: "Mike"
alias: ""
localNickname: ""
@ -17,12 +17,13 @@ ListModel {
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
colorId: 7
isEnsVerified: false
}
ListElement {
pubKey: "0x04df12f12f12f12f1234"
onlineStatus: 0
isContact: true
isVerified: true
isContact: false
isVerified: false
isAdmin: false
isUntrustworthy: false
displayName: "Jane"
@ -30,24 +31,26 @@ ListModel {
localNickname: ""
ensName: ""
icon: ""
colorId: 7
colorId: 9
isEnsVerified: false
}
ListElement {
pubKey: "0x04d1b7cc0ef3f470f1238"
onlineStatus: 0
isContact: true
isContact: false
isVerified: false
isAdmin: false
isUntrustworthy: true
displayName: "John"
alias: ""
localNickname: "Johny Johny"
localNickname: "Johnny Johny"
ensName: ""
icon: ""
colorId: 7
colorId: 4
isEnsVerified: false
}
ListElement {
pubKey: "0x04d1bed192343f470f1255"
pubKey: "0x04d1bed192343f470f1257"
onlineStatus: 1
isContact: true
isVerified: true
@ -58,6 +61,22 @@ ListModel {
localNickname: ""
ensName: "maria.eth"
icon: ""
colorId: 7
colorId: 5
isEnsVerified: true
}
ListElement {
pubKey: "0x04d1bed192343f470f1255"
onlineStatus: 1
isContact: true
isVerified: true
isAdmin: true
isUntrustworthy: true
displayName: ""
alias: "Richard The Lionheart"
localNickname: ""
ensName: "richard-the-lionheart.eth"
icon: ""
colorId: 3
isEnsVerified: true
}
}

29
ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml
View File

@ -42,20 +42,15 @@ Item {
anchors.fill: parent
spacing: 30
StatusInput {
SearchBox {
id: memberSearch
Layout.preferredWidth: 400
Layout.leftMargin: 12
maximumHeight: 36
topPadding: 0
bottomPadding: 0
rightPadding: 0
placeholderText: root.placeholderText
input.asset.name: "search"
enabled: !!model && model.count > 0
}
ListView {
StatusListView {
id: membersList
objectName: "CommunityMembersTabPanel_MembersListViews"
@ -63,13 +58,12 @@ Item {
Layout.fillHeight: true
model: root.model
clip: true
spacing: 15
spacing: 0
delegate: StatusMemberListItem {
id: memberItem
readonly property bool itsMe: model.pubKey.toLowerCase() === userProfile.pubKey.toLowerCase()
readonly property bool itsMe: model.pubKey.toLowerCase() === Global.userProfile.pubKey.toLowerCase()
readonly property bool isHovered: memberItem.sensor.containsMouse
readonly property bool canBeBanned: !memberItem.itsMe && (model.memberRole !== Constants.memberRole.owner && model.memberRole !== Constants.memberRole.admin)
readonly property bool canEnableKickBanButtons: canBeBanned && root.panelType === MembersTabPanel.TabType.AllMembers
@ -91,6 +85,7 @@ Item {
components: [
DisabledTooltipButton {
id: kickButton
anchors.verticalCenter: parent.verticalCenter
visible: kickVisible
interactive: kickEnabled
tooltipText: qsTr("Waiting for owner node to come online")
@ -99,27 +94,29 @@ Item {
text: model.membershipRequestState === Constants.CommunityMembershipRequestState.KickedPending ? qsTr("Kick pending") : qsTr("Kick")
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.kickUserClicked(model.pubKey, model.displayName)
onClicked: root.kickUserClicked(model.pubKey, memberItem.title)
enabled: kickButton.interactive
}
},
DisabledTooltipButton {
id: banButton
anchors.verticalCenter: parent.verticalCenter
//using opacity instead of visible to avoid the acceptButton jumping around
opacity: banVisible
interactive: banEnabled
tooltipText: qsTr("Waiting for owner node to come online")
tooltipText: banVisible ? qsTr("Waiting for owner node to come online") : ""
buttonComponent: StatusButton {
text: model.membershipRequestState === Constants.CommunityMembershipRequestState.BannedPending || !banVisible ? qsTr("Ban pending") : qsTr("Ban")
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.banUserClicked(model.pubKey, model.displayName)
onClicked: root.banUserClicked(model.pubKey, memberItem.title)
enabled: banButton.interactive
}
},
StatusButton {
anchors.verticalCenter: parent.verticalCenter
visible: unBanVisible
text: qsTr("Unban")
onClicked: root.unbanUserClicked(model.pubKey)
@ -127,6 +124,7 @@ Item {
DisabledTooltipButton {
id: acceptButton
anchors.verticalCenter: parent.verticalCenter
visible: ((root.panelType === MembersTabPanel.TabType.PendingRequests ||
root.panelType === MembersTabPanel.TabType.DeclinedRequests) && isHovered) ||
isAcceptedPending
@ -149,6 +147,7 @@ Item {
DisabledTooltipButton {
id: rejectButton
anchors.verticalCenter: parent.verticalCenter
//using opacity instead of visible to avoid the acceptButton jumping around
opacity: ((root.panelType === MembersTabPanel.TabType.PendingRequests) && isHovered) || isRejectedPending
//TODO: Only the current user can reject a pending request, so we should check that here
@ -188,7 +187,7 @@ Item {
if(mouse.button === Qt.RightButton) {
Global.openMenu(memberContextMenuComponent, this, {
selectedUserPublicKey: model.pubKey,
selectedUserDisplayName: userName,
selectedUserDisplayName: memberItem.title,
selectedUserIcon: asset.name,
})
} else {
@ -205,7 +204,7 @@ Item {
ProfileContextMenu {
id: memberContextMenuView
store: root.rootStore
myPublicKey: userProfile.pubKey
myPublicKey: Global.userProfile.pubKey
onOpenProfileClicked: {
Global.openProfilePopup(publicKey, null)