From 6b6a318a8ccd8afae3962749ee475940729a3cde Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Wed, 17 Mar 2021 10:24:24 +0100 Subject: [PATCH] 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 --- .../CommunityProfilePopupMembersList.qml | 97 +++++++++++-------- 1 file changed, 59 insertions(+), 38 deletions(-) diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml index 7c65debd3a..de75a7dc57 100644 --- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml +++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml @@ -78,16 +78,21 @@ Item { anchors.bottomMargin: Style.current.halfPadding spacing: 4 model: community.members - delegate: Item { + delegate: Rectangle { id: contactRow 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) StatusImageIdenticon { id: identicon anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter source: model.identicon } @@ -99,23 +104,36 @@ Item { anchors.right: parent.right anchors.rightMargin: Style.current.smallPadding 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 - text: "..." - font.letterSpacing: 0.5 - font.bold: true - lineHeight: 1.4 - font.pixelSize: 25 anchors.right: parent.right - anchors.rightMargin: Style.current.smallPadding + anchors.rightMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter MouseArea { 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 + onExited: { + contactRow.isHovered = false + moreActionsBtn.highlighted = false + } + onEntered: { + contactRow.isHovered = true + moreActionsBtn.highlighted = true + } PopupMenu { id: contextMenu Action { @@ -126,16 +144,19 @@ Item { text: qsTrId("view-profile") onTriggered: openProfilePopup(model.userName, model.pubKey, model.identicon, '', contactRow.nickname) } - Action { - icon.source: "../../../img/communities/menu/roles.svg" - icon.width: 16 - icon.height: 16 - //% "Roles" - text: qsTrId("roles") - onTriggered: console.log("TODO") + /* Action { */ + /* icon.source: "../../../img/communities/menu/roles.svg" */ + /* icon.width: 16 */ + /* icon.height: 16 */ + /* //% "Roles" */ + /* text: qsTrId("roles") */ + /* onTriggered: console.log("TODO") */ + /* } */ + Separator { + height: 10 } - Separator {} Action { + property string type: "danger" icon.source: "../../../img/communities/menu/kick.svg" icon.width: 16 icon.height: 16 @@ -144,25 +165,25 @@ Item { text: qsTrId("kick") onTriggered: chatsModel.removeUserFromCommunity(model.pubKey) } - Action { - icon.source: "../../../img/communities/menu/ban.svg" - icon.width: 16 - icon.height: 16 - icon.color: Style.current.red - //% "Ban" - text: qsTrId("ban") - onTriggered: console.log("TODO") - } - Separator {} - Action { - icon.source: "../../../img/communities/menu/transfer-ownership.svg" - icon.width: 16 - icon.height: 16 - icon.color: Style.current.red - //% "Transfer ownership" - text: qsTrId("transfer-ownership") - onTriggered: console.log("TODO") - } + /* Action { */ + /* icon.source: "../../../img/communities/menu/ban.svg" */ + /* icon.width: 16 */ + /* icon.height: 16 */ + /* icon.color: Style.current.red */ + /* //% "Ban" */ + /* text: qsTrId("ban") */ + /* onTriggered: console.log("TODO") */ + /* } */ + /* Separator {} */ + /* Action { */ + /* icon.source: "../../../img/communities/menu/transfer-ownership.svg" */ + /* icon.width: 16 */ + /* icon.height: 16 */ + /* icon.color: Style.current.red */ + /* //% "Transfer ownership" */ + /* text: qsTrId("transfer-ownership") */ + /* onTriggered: console.log("TODO") */ + /* } */ } } }