Tweak room drawer.

imports/Spectral/Panel/RoomDrawer.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.12
 
 import Spectral.Component 2.0
+import Spectral.Setting 0.1
 
 import Spectral 0.1
 
@@ -16,79 +17,133 @@ Drawer {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.margins: 16
+        anchors.margins: 24
+
+        RowLayout {
+            Layout.fillWidth: true
+
+            spacing: 16
 
             Avatar {
-            Layout.preferredWidth: 96
+                Layout.preferredWidth: 72
-            Layout.preferredHeight: 96
+                Layout.preferredHeight: 72
-            Layout.alignment: Qt.AlignHCenter
 
                 hint: room ? room.displayName : "No name"
                 source: room ? room.avatarMediaId : null
             }
 
+            ColumnLayout {
+                Layout.fillWidth: true
+
                 Label {
                     Layout.fillWidth: true
 
+                    font.pixelSize: 18
+                    font.bold: true
                     wrapMode: Label.Wrap
-            horizontalAlignment: Text.AlignHCenter
+                    text: room ? room.displayName : "No Name"
-            text: room && room.id ? room.id : ""
                 }
 
                 Label {
                     Layout.fillWidth: true
 
                     wrapMode: Label.Wrap
-            horizontalAlignment: Text.AlignHCenter
-            text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias"
-        }
-
-        Label {
-            Layout.fillWidth: true
-
-            wrapMode: Label.Wrap
-            horizontalAlignment: Text.AlignHCenter
                     text: room ? room.totalMemberCount + " Members" : "No Member Count"
+                    color: MPalette.lighter
+                }
+            }
+        }
+
+        MenuSeparator {
+            Layout.fillWidth: true
         }
 
         RowLayout {
             Layout.fillWidth: true
 
-            AutoTextField {
+            spacing: 8
+
+            MaterialIcon {
+                Layout.preferredWidth: 32
+                Layout.preferredHeight: 32
+                Layout.alignment: Qt.AlignTop
+
+                icon: "\ue88e"
+                color: MPalette.lighter
+            }
+
+            ColumnLayout {
                 Layout.fillWidth: true
 
-                id: roomNameField
+                Label {
-                text: room && room.name ? room.name : ""
+                    Layout.fillWidth: true
+
+                    wrapMode: Label.Wrap
+                    text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias"
+                    color: MPalette.accent
                 }
 
-            ItemDelegate {
+                Label {
-                Layout.preferredWidth: height
+                    Layout.fillWidth: true
-                Layout.preferredHeight: parent.height
 
-                contentItem: MaterialIcon { icon: "\ue5ca" }
+                    wrapMode: Label.Wrap
-
+                    text: "Main Alias"
-                onClicked: room.setName(roomNameField.text)
+                    color: MPalette.lighter
                 }
+
+                Label {
+                    Layout.fillWidth: true
+
+                    wrapMode: Label.Wrap
+                    text: room && room.topic ? room.topic : "No Topic"
+                    color: MPalette.accent
+                }
+
+                Label {
+                    Layout.fillWidth: true
+
+                    wrapMode: Label.Wrap
+                    text: "Topic"
+                    color: MPalette.lighter
+                }
+            }
+        }
+
+        MenuSeparator {
+            Layout.fillWidth: true
         }
 
         RowLayout {
             Layout.fillWidth: true
 
-            AutoTextField {
+            spacing: 8
-                Layout.fillWidth: true
 
-                id: roomTopicField
+            MaterialIcon {
+                Layout.preferredWidth: 32
+                Layout.preferredHeight: 32
 
-                text: room && room.topic ? room.topic : ""
+                icon: "\ue7ff"
+                color: MPalette.lighter
             }
 
-            ItemDelegate {
+            Label {
-                Layout.preferredWidth: height
+                Layout.fillWidth: true
-                Layout.preferredHeight: parent.height
 
-                contentItem: MaterialIcon { icon: "\ue5ca" }
+                wrapMode: Label.Wrap
+                text: room ? room.totalMemberCount + " Members" : "No Member Count"
+                color: MPalette.lighter
+            }
 
-                onClicked: room.setTopic(roomTopicField.text)
+            ToolButton {
+                Layout.preferredWidth: 32
+                Layout.preferredHeight: 32
+
+                contentItem: MaterialIcon {
+                    icon: "\ue145"
+                    color: MPalette.lighter
+                }
+
+                onClicked: inviteUserDialog.open()
             }
         }
 
@@ -153,26 +208,17 @@ Drawer {
 
             ScrollBar.vertical: ScrollBar {}
         }
-
+    }
-        Button {
-            Layout.fillWidth: true
-
-            text: "Invite User"
-            flat: true
-            highlighted: true
-
-            onClicked: inviteUserDialog.open()
 
     Dialog {
-                x: (window.width - width) / 2
+        anchors.centerIn: parent
-                y: (window.height - height) / 2
         width: 360
 
         id: inviteUserDialog
 
         parent: ApplicationWindow.overlay
 
-                title: "Input User ID"
+        title: "Invite User"
         modal: true
         standardButtons: Dialog.Ok | Dialog.Cancel
 
@@ -184,5 +230,3 @@ Drawer {
         onAccepted: room.inviteToRoom(inviteUserDialogTextField.text)
     }
 }
-    }
-}

qml/main.qml

@@ -493,7 +493,7 @@ ApplicationWindow {
         position: inPortrait ? 0 : 1
         visible: !inPortrait
 
-        id: drawer
+        id: roomListDrawer
 
         RoomListPanel {
             anchors.fill: parent
@@ -510,7 +510,7 @@ ApplicationWindow {
 
     RoomPanel {
         anchors.fill: parent
-        anchors.leftMargin: !inPortrait ? drawer.width : undefined
+        anchors.leftMargin: !inPortrait ? roomListDrawer.width : undefined
         anchors.rightMargin: !inPortrait && roomDrawer.visible ? roomDrawer.width : undefined
 
         id: roomForm