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
 
-        Avatar {
+        RowLayout {
-            Layout.preferredWidth: 96
-            Layout.preferredHeight: 96
-            Layout.alignment: Qt.AlignHCenter
-
-            hint: room ? room.displayName : "No name"
-            source: room ? room.avatarMediaId : null
-        }
-
-        Label {
             Layout.fillWidth: true
 
-            wrapMode: Label.Wrap
+            spacing: 16
-            horizontalAlignment: Text.AlignHCenter
+
-            text: room && room.id ? room.id : ""
+            Avatar {
+                Layout.preferredWidth: 72
+                Layout.preferredHeight: 72
+
+                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
+                    text: room ? room.displayName : "No Name"
+                }
+
+                Label {
+                    Layout.fillWidth: true
+
+                    wrapMode: Label.Wrap
+                    text: room ? room.totalMemberCount + " Members" : "No Member Count"
+                    color: MPalette.lighter
+                }
+            }
         }
 
-        Label {
+        MenuSeparator {
             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"
         }
 
         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
+                }
+
+                Label {
+                    Layout.fillWidth: true
+
+                    wrapMode: Label.Wrap
+                    text: "Main Alias"
+                    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
+                }
             }
+        }
 
-            ItemDelegate {
+        MenuSeparator {
-                Layout.preferredWidth: height
+            Layout.fillWidth: true
-                Layout.preferredHeight: parent.height
-
-                contentItem: MaterialIcon { icon: "\ue5ca" }
-
-                onClicked: room.setName(roomNameField.text)
-            }
         }
 
         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,36 +208,25 @@ Drawer {
 
             ScrollBar.vertical: ScrollBar {}
         }
+    }
 
-        Button {
+    Dialog {
-            Layout.fillWidth: true
+        anchors.centerIn: parent
+        width: 360
 
-            text: "Invite User"
+        id: inviteUserDialog
-            flat: true
-            highlighted: true
 
-            onClicked: inviteUserDialog.open()
+        parent: ApplicationWindow.overlay
 
-            Dialog {
+        title: "Invite User"
-                x: (window.width - width) / 2
+        modal: true
-                y: (window.height - height) / 2
+        standardButtons: Dialog.Ok | Dialog.Cancel
-                width: 360
 
-                id: inviteUserDialog
+        contentItem: AutoTextField {
-
+            id: inviteUserDialogTextField
-                parent: ApplicationWindow.overlay
+            placeholderText: "@bot:matrix.org"
-
-                title: "Input User ID"
-                modal: true
-                standardButtons: Dialog.Ok | Dialog.Cancel
-
-                contentItem: AutoTextField {
-                    id: inviteUserDialogTextField
-                    placeholderText: "@bot:matrix.org"
-                }
-
-                onAccepted: room.inviteToRoom(inviteUserDialogTextField.text)
-            }
         }
+
+        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