Move encrypt room option to Security page

src/CMakeLists.txt

@@ -159,7 +159,7 @@ if(ANDROID)
         "zoom-out"
         "image-rotate-left-symbolic"
         "image-rotate-right-symbolic"
-        "channel-insecure-symbolic"
+        "channel-secure-symbolic"
         "download"
         "smiley"
         "tools-check-spelling"

src/qml/Panel/RoomDrawer.qml

@@ -117,6 +117,23 @@ Kirigami.OverlayDrawer {
 
                     name: room ? room.displayName : ""
                     source: room ? ("image://mxc/" +  room.avatarMediaId) : ""
+
+                    Rectangle {
+                        visible: room.usesEncryption
+                        color: Kirigami.Theme.backgroundColor
+
+                        width: Kirigami.Units.gridUnit
+                        height: Kirigami.Units.gridUnit
+                        anchors.bottom: parent.bottom
+                        anchors.right: parent.right
+
+                        radius: width / 2
+
+                        Kirigami.Icon {
+                            source: "channel-secure-symbolic"
+                            anchors.fill: parent
+                        }
+                    }
                 }
 
                 ColumnLayout {
@@ -206,20 +223,6 @@ Kirigami.OverlayDrawer {
 
                 onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0)
             }
-            Kirigami.BasicListItem {
-                id: encryptButton
-
-                icon: "channel-insecure-symbolic"
-                enabled: roomDrawer.room.canEncryptRoom
-                visible: !roomDrawer.room.usesEncryption && Controller.encryptionSupported
-                text: i18n("Enable encryption")
-
-                onClicked: {
-                    let dialog = confirmEncryptionDialog.createObject(applicationWindow(), {room: roomDrawer.room});
-                    roomDrawer.close();
-                    dialog.open();
-                }
-            }
 
             Kirigami.ListSectionHeader {
                 label: i18n("Members")
@@ -363,10 +366,4 @@ Kirigami.OverlayDrawer {
 
         UserDetailDialog {}
     }
-
-    Component {
-        id: confirmEncryptionDialog
-
-        ConfirmEncryptionDialog {}
-    }
 }

src/qml/RoomSettings/Security.qml

@@ -22,6 +22,29 @@ Kirigami.ScrollablePage {
     rightPadding: 0
 
     ColumnLayout {
+        MobileForm.FormCard {
+            visible: Controller.encryptionSupported
+            Layout.topMargin: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            contentItem: ColumnLayout {
+                spacing: 0
+                MobileForm.FormCardHeader {
+                    title: i18nc("@option:check", "Encryption")
+                }
+                MobileForm.FormSwitchDelegate {
+                    id: enableEncryptionSwitch
+                    text: i18n("Enable encryption")
+                    description: i18nc("option:check", "Once enabled, encryption cannot be disabled.")
+                    enabled: room.canEncryptRoom
+                    checked: room.usesEncryption
+                    onToggled: if (checked) {
+                        let dialog = confirmEncryptionDialog.createObject(applicationWindow(), {room: room});
+                        dialog.open();
+                    }
+                }
+            }
+        }
+
         MobileForm.FormCard {
             Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
@@ -132,5 +155,25 @@ Kirigami.ScrollablePage {
             }
         }
     }
+
+    Component {
+        id: confirmEncryptionDialog
+
+        ConfirmEncryptionDialog {
+            onClosed: {
+                // At the point this is executed, the state in the room is not yet changed.
+                // The value will be updated when room.onEncryption() emitted.
+                // This is in case if user simply closed the dialog.
+                enableEncryptionSwitch.checked = false
+            }
+        }
+    }
+
+    Connections {
+        target: room
+        onEncryption: {
+            enableEncryptionSwitch.checked = room.usesEncryption
+        }
+    }
 }