AddChat page

TODO.md

@@ -4,6 +4,8 @@
   - Handle upload errors: non existent path, path is a dir, file too big, etc
   - Show real progression for mxc thumbnail loadings, uploads and downloads
 
+  - Login: use new exception python/qml mechanism
+
   - Support m.file thumbnails
   - Generate video thumbnails
   - GIFs can use the video player

src/qml/Base/HCheckBox.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 import "../utils.js" as Utils
 
 CheckBox {
@@ -12,12 +13,16 @@ CheckBox {
     opacity: enabled ? 1 : theme.disabledElementsOpacity
 
 
+    property alias mainText: mainText
+    property alias subtitle: subtitleText
+
+
     Behavior on opacity { HNumberAnimation { factor: 2 } }
 
 
     indicator: Rectangle {
         implicitWidth: implicitHeight
-        implicitHeight: box.contentItem.font.pixelSize * 1.5
+        implicitHeight: mainText.font.pixelSize * 1.5
         x: box.leftPadding
         y: box.topPadding + box.availableHeight / 2 - height / 2
         radius: theme.radius / 1.5
@@ -51,13 +56,33 @@ CheckBox {
         }
     }
 
-    contentItem: HLabel {
-        text: box.text
-        color: theme.controls.checkBox.text
+    contentItem: HColumnLayout {
+        HLabel {
+            id: mainText
+            text: box.text
+            color: theme.controls.checkBox.text
 
-        // Set a width on CheckBox for wrapping to work, e.g. Layout.fillWidth
-        wrapMode: Text.Wrap
-        leftPadding: box.indicator.width + box.spacing
-        verticalAlignment: Text.AlignVCenter
+            // Set a width on CheckBox for wrapping to work,
+            // e.g. by using Layout.fillWidth
+            wrapMode: Text.Wrap
+            leftPadding: box.indicator.width + box.spacing
+            verticalAlignment: Text.AlignVCenter
+
+            Layout.fillWidth: true
+        }
+
+        HLabel {
+            id: subtitleText
+            visible: Boolean(text)
+            text: box.subtitle
+            color: theme.controls.checkBox.subtitle
+            font.pixelSize: theme.fontSize.small
+
+            wrapMode: mainText.wrapMode
+            leftPadding: mainText.leftPadding
+            verticalAlignment: mainText.verticalAlignment
+
+            Layout.fillWidth: true
+        }
     }
 }

src/qml/Base/HTile.qml

@@ -78,10 +78,6 @@ HButton {
     }
 
 
-    // Binding { target: details; property: "parent"; value: contentItem }
-    // Binding { target: image; property: "parent"; value: contentItem }
-
-
     TapHandler {
         acceptedButtons: Qt.LeftButton
         onTapped: leftClicked()

src/qml/Pages/AddChat/AddChat.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+
+HPage {
+    onFocusChanged: createRoom.forceActiveFocus()
+
+    HBox {
+        id: rootBox
+        multiplyWidth: 1.11
+        multiplyHorizontalSpacing: 0
+        multiplyVerticalSpacing: 0
+        Layout.alignment: Qt.AlignCenter
+
+        TabBar {
+            id: tabBar
+            position: TabBar.Header
+            currentIndex: 1
+
+            Layout.fillWidth: true
+
+            Repeater {
+                model: [
+                    qsTr("Find someone"),
+                    qsTr("Create room"),
+                    qsTr("Join room"),
+                ]
+
+                TabButton {
+                    text: modelData
+                }
+            }
+        }
+
+
+        SwipeView {
+            clip: true
+            currentIndex: tabBar.currentIndex
+
+            Layout.fillWidth: true
+
+            Item {}
+
+            CreateRoom {
+                id: createRoom
+                color: "transparent"
+            }
+
+            Item {}
+        }
+    }
+}

src/qml/Pages/AddChat/CreateRoom.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+
+HBox {
+    id: addChatBox
+    clickButtonOnEnter: "create"
+
+    onFocusChanged: nameField.forceActiveFocus()
+
+    buttonModel: [
+        { name: "apply", text: qsTr("Create"), iconName: "apply" },
+        { name: "cancel", text: qsTr("Cancel"), iconName: "cancel" },
+    ]
+
+    buttonCallbacks: ({
+    })
+
+    HTextField {
+        id: nameField
+        placeholderText: qsTr("Name (optional)")
+
+        Layout.fillWidth: true
+    }
+
+    HTextField {
+        id: topicField
+        placeholderText: qsTr("Topic (optional)")
+
+        Layout.fillWidth: true
+    }
+
+    HCheckBox {
+        id: publicCheckBox
+        text: qsTr("Make this room public")
+        subtitle.text: qsTr("Anyone can join without being invited")
+        spacing: addChatBox.horizontalSpacing
+
+        Layout.maximumWidth: parent.width
+    }
+
+    HCheckBox {
+        id: encryptCheckBox
+        text: qsTr("Encrypt messages")
+        subtitle.text:
+            qsTr("Only you and users you trust will be able to read them") +
+            "<br><font color='" + theme.colors.middleBackground + "'>" +
+            qsTr("Cannot be disabled later!") +
+            "</font>"
+        subtitle.textFormat: Text.StyledText
+        spacing: addChatBox.horizontalSpacing
+
+        Layout.maximumWidth: parent.width
+    }
+
+    HCheckBox {
+        id: blockOtherServersCheckBox
+        text: qsTr("Reject users from other matrix servers")
+        subtitle.text: qsTr("Cannot be changed later!")
+        subtitle.color: theme.colors.middleBackground
+        spacing: addChatBox.horizontalSpacing
+
+        Layout.maximumWidth: parent.width
+    }
+
+    HLabel {
+        id: errorMessage
+        wrapMode: Text.Wrap
+        horizontalAlignment: Text.AlignHCenter
+        color: theme.colors.errorText
+
+        visible: Layout.maximumHeight > 0
+        Layout.maximumHeight: text ? implicitHeight : 0
+        Behavior on Layout.maximumHeight { HNumberAnimation {} }
+
+        Layout.fillWidth: true
+    }
+}

src/qml/SidePane/AccountDelegate.qml

@@ -63,7 +63,7 @@ HTileDelegate {
         icon.name: "add-account"  // TODO
         backgroundColor: "transparent"
         toolTip.text: qsTr("Add new chat")
-        // onClicked: accountDelegate.toggleCollapse()
+        onClicked: pageLoader.showPage("AddChat/AddChat")
 
         leftPadding: theme.spacing / 2
         rightPadding: leftPadding

src/themes/Default.qpl

@@ -138,6 +138,7 @@ controls:
         color boxPressedBorder: colors.strongAccentBackground
 
         color text: controls.button.text
+        color subtitle: colors.dimText
 
     listView:
         color highlight: hsluv(0, 0, 50, 0.3)