status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-09 05:52:41 +00:00
Code Issues Projects Releases Wiki Activity

feat(MembersTab): Update pending states based on new design

Browse Source 
Adding the pending state indicator as a separate item in the members tab listView.
Removing the pending indicator from Buttons.
This commit is contained in:
Alex Jbanca 2023-08-21 13:57:24 +03:00 committed by Alex Jbanca
parent 1a781c509f
commit 5fb057f61f
1 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,8 +129,8 @@ Item {
readonly property bool showOnHover: isHovered && ctaAllowed readonly property bool showOnHover: isHovered && ctaAllowed
/// Button visibility /// /// Button visibility ///
readonly property bool acceptButtonVisible: tabIsShowingAcceptButton && (isPending || isRejected || isRejectedPending) && showOnHover readonly property bool acceptButtonVisible: tabIsShowingAcceptButton && (isPending || isRejected || isRejectedPending || isAcceptedPending) && showOnHover
readonly property bool rejectButtonVisible: tabIsShowingRejectButton && (isPending || isAcceptedPending) && showOnHover readonly property bool rejectButtonVisible: tabIsShowingRejectButton && (isPending || isRejectedPending || isAcceptedPending) && showOnHover
readonly property bool acceptPendingButtonVisible: tabIsShowingAcceptButton && isAcceptedPending readonly property bool acceptPendingButtonVisible: tabIsShowingAcceptButton && isAcceptedPending
readonly property bool rejectPendingButtonVisible: tabIsShowingRejectButton && isRejectedPending readonly property bool rejectPendingButtonVisible: tabIsShowingRejectButton && isRejectedPending
readonly property bool kickButtonVisible: tabIsShowingKickBanButtons && isAccepted && showOnHover && canBeBanned readonly property bool kickButtonVisible: tabIsShowingKickBanButtons && isAccepted && showOnHover && canBeBanned
@ -139,6 +139,13 @@ Item {
readonly property bool banPendingButtonVisible: tabIsShowingKickBanButtons && isBanPending readonly property bool banPendingButtonVisible: tabIsShowingKickBanButtons && isBanPending
readonly property bool unbanButtonVisible: tabIsShowingUnbanButton && isBanned && showOnHover readonly property bool unbanButtonVisible: tabIsShowingUnbanButton && isBanned && showOnHover
/// Pending states ///
readonly property bool isPendingState: isAcceptedPending || isRejectedPending || isBanPending || isKickPending
readonly property string pendingStateText: isAcceptedPending ? qsTr("Accept pending...") :
isRejectedPending ? qsTr("Reject pending...") :
isBanPending ? qsTr("Ban pending...") :
isKickPending ? qsTr("Kick pending...") : ""
statusListItemComponentsSlot.spacing: 16 statusListItemComponentsSlot.spacing: 16
statusListItemTitleArea.anchors.rightMargin: 0 statusListItemTitleArea.anchors.rightMargin: 0
statusListItemSubTitle.elide: Text.ElideRight statusListItemSubTitle.elide: Text.ElideRight
@ -146,38 +153,45 @@ Item {
leftPadding: 12 leftPadding: 12
components: [ components: [
DisabledTooltipButton { StatusBaseText {
id: kickButton id: pendingText
width: Math.max(implicitWidth, d.pendingTextMaxWidth)
onImplicitWidthChanged: {
d.pendingTextMaxWidth = Math.max(implicitWidth, d.pendingTextMaxWidth)
}
visible: !!text && isPendingState
rightPadding: isKickPending || isBanPending ? 0 : Style.current.bigPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: kickButtonVisible || kickPendingButtonVisible text: pendingStateText
interactive: kickButtonVisible color: Theme.palette.baseColor1
tooltipText: qsTr("Waiting for owner node to come online") StatusToolTip {
buttonComponent: StatusButton { text: qsTr("Waiting for owner node to come online")
objectName: "MemberListItem_KickButton" visible: hoverHandler.hovered
text: kickButtonVisible ? qsTr("Kick") : qsTr("Kick pending") }
type: StatusBaseButton.Type.Danger HoverHandler {
size: StatusBaseButton.Size.Small id: hoverHandler
onClicked: root.kickUserClicked(model.pubKey, memberItem.title) enabled: pendingText.visible
enabled: kickButton.interactive
} }
}, },
StatusButton {
id: kickButton
anchors.verticalCenter: parent.verticalCenter
objectName: "MemberListItem_KickButton"
text: qsTr("Kick")
visible: kickButtonVisible
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.kickUserClicked(model.pubKey, memberItem.title)
},
DisabledTooltipButton { StatusButton {
id: banButton id: banButton
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
//using opacity instead of visible to avoid the acceptButton jumping around visible: banButtonVisible
opacity: banButtonVisible || banPendingButtonVisible text: qsTr("Ban")
visible: !!banButton.opacity || kickButton.visible type: StatusBaseButton.Type.Danger
enabled: !!opacity size: StatusBaseButton.Size.Small
interactive: banButtonVisible onClicked: root.banUserClicked(model.pubKey, memberItem.title)
tooltipText: qsTr("Waiting for owner node to come online")
buttonComponent: StatusButton {
text: banButtonVisible ? qsTr("Ban") : qsTr("Ban pending")
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.banUserClicked(model.pubKey, memberItem.title)
enabled: banButton.interactive
}
}, },
StatusButton { StatusButton {
@ -187,42 +201,30 @@ Item {
onClicked: root.unbanUserClicked(model.pubKey) onClicked: root.unbanUserClicked(model.pubKey)
}, },
DisabledTooltipButton { StatusButton {
id: acceptButton id: acceptButton
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: acceptButtonVisible || acceptPendingButtonVisible opacity: acceptButtonVisible
tooltipText: qsTr("Waiting for owner node to come online") text: qsTr("Accept")
interactive: acceptButtonVisible icon.name: "checkmark-circle"
buttonComponent: StatusButton { icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor
text: acceptButtonVisible ? qsTr("Accept") : qsTr("Accept Pending") normalColor: Theme.palette.successColor2
icon.name: "checkmark-circle" hoverColor: Theme.palette.successColor3
icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor textColor: Theme.palette.successColor1
normalColor: Theme.palette.successColor2 loading: model.requestToJoinLoading
hoverColor: Theme.palette.successColor3 enabled: !acceptPendingButtonVisible
textColor: Theme.palette.successColor1 onClicked: root.acceptRequestToJoin(model.requestToJoinId)
loading: model.requestToJoinLoading
enabled: acceptButton.interactive
onClicked: root.acceptRequestToJoin(model.requestToJoinId)
}
}, },
DisabledTooltipButton { StatusButton {
id: rejectButton id: rejectButton
anchors.verticalCenter: parent.verticalCenter opacity: rejectButtonVisible
//using opacity instead of visible to avoid the acceptButton jumping around text: qsTr("Reject")
opacity: rejectButtonVisible || rejectPendingButtonVisible type: StatusBaseButton.Type.Danger
enabled: !!opacity icon.name: "close-circle"
visible: !!rejectButton.opacity || acceptButton.visible icon.color: enabled ? Style.current.danger : disabledTextColor
tooltipText: qsTr("Waiting for owner node to come online") enabled: !rejectPendingButtonVisible
interactive: rejectButtonVisible onClicked: root.declineRequestToJoin(model.requestToJoinId)
buttonComponent: StatusButton {
text: rejectPendingButtonVisible ? qsTr("Reject pending") : qsTr("Reject")
type: StatusBaseButton.Type.Danger
icon.name: "close-circle"
icon.color: enabled ? Style.current.danger : disabledTextColor
enabled: rejectButton.interactive
onClicked: root.declineRequestToJoin(model.requestToJoinId)
}
} }
] ]
@ -279,4 +281,12 @@ Item {
} }
} }
} }
QtObject {
id: d
// This is used to calculate the max width of the pending text
// so that the text aligned on all rows (the text might be different on each row)
property real pendingTextMaxWidth: 0
}
onPanelTypeChanged: { d.pendingTextMaxWidth = 0 }
} }