Highlighting and cleanup for MemberDelegate

src/qml/Chat/RoomSidePane/MemberDelegate.qml

@@ -5,35 +5,42 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import "../../Base"
 
-MouseArea {
+HHighlightRectangle {
     id: memberDelegate
     width: memberList.width
     height: childrenRect.height
 
     property var memberInfo: users.find(model.userId)
 
-    HRowLayout {
+    Row {
-        width: parent.width
+        width: parent.width - leftPadding * 2
-        spacing: memberList.spacing
+        padding: roomSidePane.currentSpacing / 2
+        leftPadding: roomSidePane.currentSpacing
+        rightPadding: 0
 
-        HUserAvatar {
+        HRowLayout {
-            id: avatar
+            width: parent.width
-            userId: model.userId
+            spacing: roomSidePane.currentSpacing
-        }
 
-        HColumnLayout {
+            HUserAvatar {
-            Layout.fillWidth: true
+                id: avatar
-            Layout.maximumWidth:
+                userId: model.userId
-                parent.width - parent.totalSpacing - avatar.width
+            }
 
-            HLabel {
+            HColumnLayout {
-                id: memberName
+                Layout.fillWidth: true
-                text: memberInfo.displayName || model.userId
+                Layout.maximumWidth:
-                elide: Text.ElideRight
+                    parent.width - parent.totalSpacing - avatar.width
-                maximumLineCount: 1
-                verticalAlignment: Qt.AlignVCenter
 
-                Layout.maximumWidth: parent.width
+                HLabel {
+                    id: memberName
+                    text: memberInfo.displayName || model.userId
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                    verticalAlignment: Qt.AlignVCenter
+
+                    Layout.maximumWidth: parent.width
+                }
             }
         }
     }

src/qml/Chat/RoomSidePane/MembersView.qml

@@ -8,19 +8,9 @@ import "../../Base"
 import "../../utils.js" as Utils
 
 HColumnLayout {
-    property bool collapsed: false
-    property int normalSpacing: collapsed ? 0 : 8
-
-    Behavior on normalSpacing { HNumberAnimation {} }
-
     HListView {
         id: memberList
-
+        bottomMargin: currentSpacing
-        spacing: normalSpacing
-        topMargin: normalSpacing
-        bottomMargin: normalSpacing
-        Layout.leftMargin: normalSpacing
-        Layout.rightMargin: normalSpacing
 
         model: HListModel {
             sourceModel: chatPage.roomInfo.members

src/qml/Chat/RoomSidePane/RoomSidePane.qml

@@ -11,8 +11,12 @@ HRectangle {
     property bool collapsed: false
     property var activeView: null
 
+    property int normalSpacing: 8
+    readonly property int currentSpacing: collapsed ? 0 : normalSpacing
+
+    Behavior on normalSpacing { HNumberAnimation {} }
+
     MembersView {
         anchors.fill: parent
-        collapsed: parent.collapsed
     }
 }

src/qml/SidePane/RoomDelegate.qml

@@ -18,7 +18,7 @@ HHighlightRectangle {
     }
 
     Row {
-        width: parent.width - sidePane.currentSpacing * 2
+        width: parent.width - leftPadding * 2
         padding: sidePane.currentSpacing / 2
         leftPadding: sidePane.currentSpacing
         rightPadding: 0

src/qml/SidePane/SidePane.qml

@@ -11,9 +11,9 @@ HRectangle {
     // Avoid artifacts when collapsed
     clip: true
 
-    property int normalSpacing: 8
-    property int currentSpacing: collapsed ? 0 : normalSpacing
     property bool collapsed: false
+    property int normalSpacing: 8
+    readonly property int currentSpacing: collapsed ? 0 : normalSpacing
 
     HColumnLayout {
         anchors.fill: parent