Add a basic member list pane to rooms

harmonyqml/components/Chat/Chat.qml

@@ -3,9 +3,9 @@ import QtQuick.Layouts 1.3
 import "../Base"
 import "Banners"
 import "RoomEventList"
-import "DetailsPane"
+import "RoomSidePane"
 
-HSplitView {
+HColumnLayout {
     property string userId: ""
     property string category: ""
     property string roomId: ""
@@ -32,46 +32,58 @@ HSplitView {
         }
     )
 
-    HColumnLayout {
+    RoomHeader {
+        id: roomHeader
+        displayName: roomInfo.displayName
+        topic: roomInfo.topic || ""
+
         Layout.fillWidth: true
-
-        RoomHeader {
-            displayName: roomInfo.displayName
-            topic: roomInfo.topic || ""
-        }
-
-        RoomEventList {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
-
-        TypingMembersBar {}
-
-        InviteBanner {
-            visible: category === "Invites"
-            inviter: roomInfo.inviter
-        }
-
-        UnknownDevicesBanner {
-            visible: category == "Rooms" && hasUnknownDevices
-        }
-
-        SendBox {
-            id: sendBox
-            visible: category == "Rooms" && ! hasUnknownDevices
-        }
-
-        LeftBanner {
-            visible: category === "Left"
-            leftEvent: roomInfo.leftEvent
-        }
+        Layout.preferredHeight: 32
     }
 
-    DetailsPane {
-        property int parentWidth: parent.width
-        onParentWidthChanged: width = Math.min(parent.width * 0.3, 300)
 
-        Layout.minimumWidth: 36
-        Layout.maximumWidth: parent.width
+    HSplitView {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        HColumnLayout {
+            Layout.fillWidth: true
+
+            RoomEventList {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            TypingMembersBar {}
+
+            InviteBanner {
+                visible: category === "Invites"
+                inviter: roomInfo.inviter
+            }
+
+            UnknownDevicesBanner {
+                visible: category == "Rooms" && hasUnknownDevices
+            }
+
+            SendBox {
+                id: sendBox
+                visible: category == "Rooms" && ! hasUnknownDevices
+            }
+
+            LeftBanner {
+                visible: category === "Left"
+                leftEvent: roomInfo.leftEvent
+            }
+        }
+
+        RoomSidePane {
+            id: roomSidePane
+
+            property int referenceWidth: roomHeader.buttonsWidth
+            onReferenceWidthChanged: width = referenceWidth
+
+            Layout.minimumWidth: 36
+            Layout.maximumWidth: parent.width
+        }
     }
 }

harmonyqml/components/Chat/RoomHeader.qml

@@ -6,15 +6,14 @@ HRectangle {
     property string displayName: ""
     property string topic: ""
 
+    property bool collapseButtons: width < 480
+    property alias buttonsWidth: viewButtons.width
+
     id: roomHeader
     color: HStyle.chat.roomHeader.background
 
-    Layout.fillWidth: true
-    Layout.preferredHeight: 32
-
     HRowLayout {
         id: row
-        spacing: 8
         anchors.fill: parent
 
         HAvatar {
@@ -30,7 +29,12 @@ HRectangle {
             font.pixelSize: HStyle.fontSize.big
             elide: Text.ElideRight
             maximumLineCount: 1
-            Layout.maximumWidth: row.width - row.totalSpacing - avatar.width
+
+            Layout.maximumWidth:
+                row.width - Layout.leftMargin * 2 - avatar.width -
+                viewButtons.width -
+                (expandButton.visible ? expandButton.width : 0)
+            Layout.leftMargin: 8
         }
 
         HLabel {
@@ -39,10 +43,56 @@ HRectangle {
             font.pixelSize: HStyle.fontSize.small
             elide: Text.ElideRight
             maximumLineCount: 1
+
             Layout.maximumWidth:
-                row.width - row.totalSpacing - avatar.width - roomName.width
+                row.width - Layout.leftMargin * 2 - avatar.width -
+                roomName.width - viewButtons.width -
+                (expandButton.visible ? expandButton.width : 0)
+            Layout.leftMargin: 8
         }
 
         HSpacer {}
+
+        Row {
+            id: viewButtons
+            Layout.maximumWidth: collapseButtons ? 0 : implicitWidth
+
+            HButton {
+                iconName: "room_view_members"
+            }
+
+            HButton {
+                iconName: "room_view_files"
+            }
+
+            HButton {
+                iconName: "room_view_notifications"
+            }
+
+            HButton {
+                iconName: "room_view_history"
+            }
+
+            HButton {
+                iconName: "room_view_settings"
+            }
+
+            Behavior on Layout.maximumWidth {
+                NumberAnimation { id: buttonsAnimation; duration: 150 }
+            }
+        }
+    }
+
+    HButton {
+        id: expandButton
+        z: 1
+        anchors.right: parent.right
+        opacity: collapseButtons ? 1 : 0
+        visible: opacity > 0
+        iconName: "reduced_room_buttons"
+
+        Behavior on opacity {
+            NumberAnimation { duration: buttonsAnimation.duration * 2 }
+        }
     }
 }

harmonyqml/components/Chat/RoomSidePane/MemberDelegate.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import "../../Base"
+
+MouseArea {
+    id: memberDelegate
+    width: memberList.width
+    height: childrenRect.height
+
+    property var member: Backend.users.get(modelData)
+
+    HRowLayout {
+        width: parent.width
+        spacing: memberList.spacing
+
+        HAvatar {
+            id: memberAvatar
+            name: member.displayName.value
+        }
+
+        HColumnLayout {
+            Layout.fillWidth: true
+            Layout.maximumWidth:
+                parent.width - parent.totalSpacing - memberAvatar.width
+
+            HLabel {
+                id: memberName
+                text: member.displayName.value
+                elide: Text.ElideRight
+                maximumLineCount: 1
+                verticalAlignment: Qt.AlignVCenter
+
+                Layout.maximumWidth: parent.width
+            }
+        }
+    }
+}

harmonyqml/components/Chat/RoomSidePane/MembersView.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import "../../Base"
+
+Column {
+    property int normalSpacing: 8
+    property bool collapsed:
+        width < roomSidePane.Layout.minimumWidth + normalSpacing
+
+    leftPadding: collapsed ? 0 : normalSpacing
+    rightPadding: leftPadding
+
+    ListView {
+        width: parent.width
+        height: parent.height
+
+        id: memberList
+
+        spacing: collapsed ? 0 : normalSpacing
+        topMargin: spacing
+        bottomMargin: topMargin
+
+        Behavior on spacing {
+            NumberAnimation { duration: 150 }
+        }
+
+        model: chatPage.roomInfo.members
+        delegate: MemberDelegate {}
+    }
+}

harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import "../../Base"
+
+HRectangle {
+    id: roomSidePane
+
+    HColumnLayout {
+        anchors.fill: parent
+
+        MembersView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}