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

refactor(Communities): make member list look as intended 

This change aligns the member list's look & feel of the community profile popup
with the designs by implementing the proper member list items styles, hover effects
and fine-tuning the context menu.

This commit also comments some of the actions provided by the context menu,
which aren't implemented yet. There's no point in having UI components that don't or
can't function.

Those will be re-introduced once they are actually implemented.

Closes #1959
This commit is contained in:
Pascal Precht 2021-03-17 10:24:24 +01:00
parent 05a8303d5b
commit 6b6a318a8c
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
1 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml
View File

@ -78,16 +78,21 @@ Item {
anchors.bottomMargin: Style.current.halfPadding anchors.bottomMargin: Style.current.halfPadding
spacing: 4 spacing: 4
model: community.members model: community.members
delegate: Item { delegate: Rectangle {
id: contactRow id: contactRow
width: parent.width width: parent.width
height: identicon.height height: 64
radius: Style.current.radius
color: isHovered ? Style.current.backgroundHover : Style.current.transparent
property bool isHovered: false
property string nickname: appMain.getUserNickname(model.pubKey) property string nickname: appMain.getUserNickname(model.pubKey)
StatusImageIdenticon { StatusImageIdenticon {
id: identicon id: identicon
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
source: model.identicon source: model.identicon
} }
@ -99,23 +104,36 @@ Item {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding anchors.rightMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 13 font.pixelSize: 15
} }
StyledText { MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onEntered: contactRow.isHovered = true
onExited: contactRow.isHovered = false
acceptedButtons: Qt.LeftButton | Qt.RightButton
}
StatusContextMenuButton {
id: moreActionsBtn id: moreActionsBtn
text: "..."
font.letterSpacing: 0.5
font.bold: true
lineHeight: 1.4
font.pixelSize: 25
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: contextMenu.popup(-contextMenu.width / 2 + moreActionsBtn.width / 2, moreActionsBtn.height) onClicked: contextMenu.popup(-contextMenu.width + moreActionsBtn.width, moreActionsBtn.height + 4)
hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onExited: {
contactRow.isHovered = false
moreActionsBtn.highlighted = false
}
onEntered: {
contactRow.isHovered = true
moreActionsBtn.highlighted = true
}
PopupMenu { PopupMenu {
id: contextMenu id: contextMenu
Action { Action {
@ -126,16 +144,19 @@ Item {
text: qsTrId("view-profile") text: qsTrId("view-profile")
onTriggered: openProfilePopup(model.userName, model.pubKey, model.identicon, '', contactRow.nickname) onTriggered: openProfilePopup(model.userName, model.pubKey, model.identicon, '', contactRow.nickname)
} }
Action { /* Action { */
icon.source: "../../../img/communities/menu/roles.svg" /* icon.source: "../../../img/communities/menu/roles.svg" */
icon.width: 16 /* icon.width: 16 */
icon.height: 16 /* icon.height: 16 */
//% "Roles" /* //% "Roles" */
text: qsTrId("roles") /* text: qsTrId("roles") */
onTriggered: console.log("TODO") /* onTriggered: console.log("TODO") */
/* } */
Separator {
height: 10
} }
Separator {}
Action { Action {
property string type: "danger"
icon.source: "../../../img/communities/menu/kick.svg" icon.source: "../../../img/communities/menu/kick.svg"
icon.width: 16 icon.width: 16
icon.height: 16 icon.height: 16
@ -144,25 +165,25 @@ Item {
text: qsTrId("kick") text: qsTrId("kick")
onTriggered: chatsModel.removeUserFromCommunity(model.pubKey) onTriggered: chatsModel.removeUserFromCommunity(model.pubKey)
} }
Action { /* Action { */
icon.source: "../../../img/communities/menu/ban.svg" /* icon.source: "../../../img/communities/menu/ban.svg" */
icon.width: 16 /* icon.width: 16 */
icon.height: 16 /* icon.height: 16 */
icon.color: Style.current.red /* icon.color: Style.current.red */
//% "Ban" /* //% "Ban" */
text: qsTrId("ban") /* text: qsTrId("ban") */
onTriggered: console.log("TODO") /* onTriggered: console.log("TODO") */
} /* } */
Separator {} /* Separator {} */
Action { /* Action { */
icon.source: "../../../img/communities/menu/transfer-ownership.svg" /* icon.source: "../../../img/communities/menu/transfer-ownership.svg" */
icon.width: 16 /* icon.width: 16 */
icon.height: 16 /* icon.height: 16 */
icon.color: Style.current.red /* icon.color: Style.current.red */
//% "Transfer ownership" /* //% "Transfer ownership" */
text: qsTrId("transfer-ownership") /* text: qsTrId("transfer-ownership") */
onTriggered: console.log("TODO") /* onTriggered: console.log("TODO") */
} /* } */
} }
} }
} }