Merge pull request #965 from maltee1/mobile_room_settings

Mobile room settings

resources/qml/dialogs/RoomSettings.qml

@@ -17,8 +17,10 @@ ApplicationWindow {
 
     property var roomSettings
 
-    minimumWidth: 450
+    minimumWidth: 340
-    minimumHeight: 680
+    minimumHeight: 450
+    width: 450
+    height: 680
     palette: Nheko.colors
     color: Nheko.colors.window
     modality: Qt.NonModal
@@ -29,119 +31,134 @@ ApplicationWindow {
         sequence: StandardKey.Cancel
         onActivated: roomSettingsDialog.close()
     }
-
+    ScrollHelper {
-    ColumnLayout {
+        flickable: flickable
-        id: contentLayout1
+        anchors.fill: flickable
-
+    }
+    Flickable {
+        id: flickable
+        boundsBehavior: Flickable.StopAtBounds
         anchors.fill: parent
-        anchors.margins: Nheko.paddingMedium
+        clip: true
-        spacing: Nheko.paddingMedium
+        flickableDirection: Flickable.VerticalFlick
-
+        contentWidth: roomSettingsDialog.width
-        Avatar {
+        contentHeight: contentLayout1.height
-            url: roomSettings.roomAvatarUrl.replace("mxc://", "image://MxcImage/")
-            roomid: roomSettings.roomId
-            displayName: roomSettings.roomName
-            height: 130
-            width: 130
-            Layout.alignment: Qt.AlignHCenter
-            onClicked: {
-                if (roomSettings.canChangeAvatar)
-                    roomSettings.updateAvatar();
-
-            }
-        }
-
-        Spinner {
-            Layout.alignment: Qt.AlignHCenter
-            visible: roomSettings.isLoading
-            foreground: Nheko.colors.mid
-            running: roomSettings.isLoading
-        }
-
-        Text {
-            id: errorText
-
-            color: "red"
-            visible: opacity > 0
-            opacity: 0
-            Layout.alignment: Qt.AlignHCenter
-        }
-
-        SequentialAnimation {
-            id: hideErrorAnimation
-
-            running: false
-
-            PauseAnimation {
-                duration: 4000
-            }
-
-            NumberAnimation {
-                target: errorText
-                property: 'opacity'
-                to: 0
-                duration: 1000
-            }
-
-        }
-
-        Connections {
-            target: roomSettings
-            function onDisplayError(errorMessage) {
-                errorText.text = errorMessage;
-                errorText.opacity = 1;
-                hideErrorAnimation.restart();
-            }
-        }
-
         ColumnLayout {
-            Layout.alignment: Qt.AlignHCenter
+            id: contentLayout1
+            width: parent.width
+            spacing: Nheko.paddingMedium
 
-            MatrixText {
+            Avatar {
-                text: roomSettings.roomName
+                Layout.topMargin: Nheko.paddingMedium
-                font.pixelSize: fontMetrics.font.pixelSize * 2
+                url: roomSettings.roomAvatarUrl.replace("mxc://", "image://MxcImage/")
-                Layout.fillWidth: true
+                roomid: roomSettings.roomId
-                horizontalAlignment: TextEdit.AlignHCenter
+                displayName: roomSettings.roomName
-            }
+                height: 130
-
+                width: 130
-            MatrixText {
-                text: qsTr("%n member(s)", "", roomSettings.memberCount)
                 Layout.alignment: Qt.AlignHCenter
+                onClicked: {
+                    if (roomSettings.canChangeAvatar)
+                        roomSettings.updateAvatar();
 
-                TapHandler {
+                }
-                    onSingleTapped: TimelineManager.openRoomMembers(Rooms.getRoomById(roomSettings.roomId))
+            }
+
+            Spinner {
+                Layout.alignment: Qt.AlignHCenter
+                visible: roomSettings.isLoading
+                foreground: Nheko.colors.mid
+                running: roomSettings.isLoading
+            }
+
+            Text {
+                id: errorText
+
+                color: "red"
+                visible: opacity > 0
+                opacity: 0
+                Layout.alignment: Qt.AlignHCenter
+                wrapMode: Text.Wrap // somehow still doesn't wrap
+                Layout.fillWidth: true
+            }
+
+            SequentialAnimation {
+                id: hideErrorAnimation
+
+                running: false
+
+                PauseAnimation {
+                    duration: 4000
                 }
 
-                CursorShape {
+                NumberAnimation {
-                    cursorShape: Qt.PointingHandCursor
+                    target: errorText
-                    anchors.fill: parent
+                    property: 'opacity'
+                    to: 0
+                    duration: 1000
                 }
 
             }
 
-        }
+            Connections {
+                target: roomSettings
+                function onDisplayError(errorMessage) {
+                    errorText.text = errorMessage;
+                    errorText.opacity = 1;
+                    hideErrorAnimation.restart();
+                }
+            }
+                Label {
+                    text: roomSettings.roomName
+                    Layout.alignment: Qt.AlignHCenter
+                    font.pixelSize: fontMetrics.font.pixelSize * 2
+                    Layout.fillWidth: true
+                    horizontalAlignment: TextEdit.AlignHCenter
+                    color: Nheko.colors.text
+                    wrapMode: Text.Wrap
+                    textFormat: Text.RichText
+                }
 
-        ImageButton {
+                Label {
-            Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("%n member(s)", "", roomSettings.memberCount)
-            image: ":/icons/icons/ui/edit.svg"
+                    Layout.alignment: Qt.AlignHCenter
-            visible: roomSettings.canChangeNameAndTopic
+                    color: Nheko.colors.text
-            onClicked: roomSettings.openEditModal()
-        }
 
-        ScrollView {
+                    TapHandler {
-            Layout.fillHeight: true
+                        onSingleTapped: TimelineManager.openRoomMembers(Rooms.getRoomById(roomSettings.roomId))
-            Layout.alignment: Qt.AlignHCenter
+                    }
-            Layout.fillWidth: true
+
-            Layout.leftMargin: Nheko.paddingLarge
+                    CursorShape {
-            Layout.rightMargin: Nheko.paddingLarge
+                        cursorShape: Qt.PointingHandCursor
+                        anchors.fill: parent
+                    }
+
+                }
+
+            ImageButton {
+                Layout.alignment: Qt.AlignHCenter
+                image: ":/icons/icons/ui/edit.svg"
+                visible: roomSettings.canChangeNameAndTopic
+                onClicked: roomSettings.openEditModal()
+            }
 
             TextArea {
+                id: roomTopic
+                property bool cut: implicitHeight > 100
+                property bool showMore
+                clip: true
+                Layout.maximumHeight: showMore? Number.POSITIVE_INFINITY : 100
+                Layout.preferredHeight: implicitHeight
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                Layout.leftMargin: Nheko.paddingLarge
+                Layout.rightMargin: Nheko.paddingLarge
+
                 text: TimelineManager.escapeEmoji(roomSettings.roomTopic)
                 wrapMode: TextEdit.WordWrap
                 textFormat: TextEdit.RichText
                 readOnly: true
                 background: null
-                selectByMouse: true
+                selectByMouse: !Settings.mobileMode
                 color: Nheko.colors.text
                 horizontalAlignment: TextEdit.AlignHCenter
                 onLinkActivated: Nheko.openLink(link)
@@ -152,171 +169,222 @@ ApplicationWindow {
                 }
 
             }
-
-        }
-
-        GridLayout {
-            columns: 2
-            rowSpacing: Nheko.paddingMedium
-
-            MatrixText {
-                text: qsTr("SETTINGS")
-                font.bold: true
-            }
-
             Item {
-                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
+                id: showMorePlaceholder
+                Layout.preferredHeight: showMoreButton.height
+                Layout.preferredWidth: showMoreButton.width
+                visible: roomTopic.cut
             }
 
-            MatrixText {
+            GridLayout {
-                text: qsTr("Notifications")
+                columns: 2
+                rowSpacing: Nheko.paddingMedium
+                Layout.margins: Nheko.paddingMedium
                 Layout.fillWidth: true
-            }
 
-            ComboBox {
+                Label {
-                model: [qsTr("Muted"), qsTr("Mentions only"), qsTr("All messages")]
+                    text: qsTr("SETTINGS")
-                currentIndex: roomSettings.notifications
+                    font.bold: true
-                onActivated: {
+                    color: Nheko.colors.text
-                    roomSettings.changeNotifications(index);
                 }
-                Layout.fillWidth: true
-            }
 
-            MatrixText {
+                Item {
-                text: qsTr("Room access")
+                    Layout.fillWidth: true
-                Layout.fillWidth: true
-            }
-
-            ComboBox {
-                enabled: roomSettings.canChangeJoinRules
-                model: {
-                    let opts = [qsTr("Anyone and guests"), qsTr("Anyone"), qsTr("Invited users")];
-                    if (roomSettings.supportsKnocking)
-                        opts.push(qsTr("By knocking"));
-
-                    if (roomSettings.supportsRestricted)
-                        opts.push(qsTr("Restricted by membership in other rooms"));
-
-                    return opts;
                 }
-                currentIndex: roomSettings.accessJoinRules
+
-                onActivated: {
+                Label {
-                    roomSettings.changeAccessRules(index);
+                    text: qsTr("Notifications")
+                    Layout.fillWidth: true
+                    color: Nheko.colors.text
                 }
-                Layout.fillWidth: true
-            }
 
-            MatrixText {
+                ComboBox {
-                text: qsTr("Encryption")
+                    model: [qsTr("Muted"), qsTr("Mentions only"), qsTr("All messages")]
-            }
+                    currentIndex: roomSettings.notifications
-
+                    onActivated: {
-            ToggleButton {
+                        roomSettings.changeNotifications(index);
-                id: encryptionToggle
-
-                checked: roomSettings.isEncryptionEnabled
-                onCheckedChanged: {
-                    if (roomSettings.isEncryptionEnabled) {
-                        checked = true;
-                        return ;
                     }
-                    confirmEncryptionDialog.open();
+                    Layout.fillWidth: true
+                    WheelHandler{} // suppress scrolling changing values
                 }
-                Layout.alignment: Qt.AlignRight
-            }
 
-            Platform.MessageDialog {
+                Label {
-                id: confirmEncryptionDialog
+                    text: qsTr("Room access")
-
+                    Layout.fillWidth: true
-                title: qsTr("End-to-End Encryption")
+                    color: Nheko.colors.text
-                text: qsTr("Encryption is currently experimental and things might break unexpectedly. <br>
-                            Please take note that it can't be disabled afterwards.")
-                modality: Qt.NonModal
-                onAccepted: {
-                    if (roomSettings.isEncryptionEnabled)
-                        return ;
-
-                    roomSettings.enableEncryption();
                 }
-                onRejected: {
+
-                    encryptionToggle.checked = false;
+                ComboBox {
+                    enabled: roomSettings.canChangeJoinRules
+                    model: {
+                        let opts = [qsTr("Anyone and guests"), qsTr("Anyone"), qsTr("Invited users")];
+                        if (roomSettings.supportsKnocking)
+                            opts.push(qsTr("By knocking"));
+
+                        if (roomSettings.supportsRestricted)
+                            opts.push(qsTr("Restricted by membership in other rooms"));
+
+                        return opts;
+                    }
+                    currentIndex: roomSettings.accessJoinRules
+                    onActivated: {
+                        roomSettings.changeAccessRules(index);
+                    }
+                    Layout.fillWidth: true
+                    WheelHandler{} // suppress scrolling changing values
                 }
-                buttons: Platform.MessageDialog.Ok | Platform.MessageDialog.Cancel
-            }
 
-            MatrixText {
+                Label {
-                text: qsTr("Sticker & Emote Settings")
+                    text: qsTr("Encryption")
-            }
+                    color: Nheko.colors.text
+                }
 
-            Button {
+                ToggleButton {
-                text: qsTr("Change")
+                    id: encryptionToggle
-                ToolTip.text: qsTr("Change what packs are enabled, remove packs or create new ones")
-                onClicked: TimelineManager.openImagePackSettings(roomSettings.roomId)
-                Layout.alignment: Qt.AlignRight
-            }
 
-            MatrixText {
+                    checked: roomSettings.isEncryptionEnabled
-                text: qsTr("Hidden events")
+                    onCheckedChanged: {
-            }
+                        if (roomSettings.isEncryptionEnabled) {
+                            checked = true;
+                            return ;
+                        }
+                        confirmEncryptionDialog.open();
+                    }
+                    Layout.alignment: Qt.AlignRight
+                }
 
-            HiddenEventsDialog {
+                Platform.MessageDialog {
-                id: hiddenEventsDialog
+                    id: confirmEncryptionDialog
-                roomid: roomSettings.roomId
-                roomName: roomSettings.roomName
-            }
 
-            Button {
+                    title: qsTr("End-to-End Encryption")
-                text: qsTr("Configure")
+                    text: qsTr("Encryption is currently experimental and things might break unexpectedly. <br>
-                ToolTip.text: qsTr("Select events to hide in this room")
+                                Please take note that it can't be disabled afterwards.")
-                onClicked: hiddenEventsDialog.show()
+                    modality: Qt.NonModal
-                Layout.alignment: Qt.AlignRight
+                    onAccepted: {
-            }
+                        if (roomSettings.isEncryptionEnabled)
+                            return ;
 
-            Item {
+                        roomSettings.enableEncryption();
-                // for adding extra space between sections
+                    }
-                Layout.fillWidth: true
+                    onRejected: {
-            }
+                        encryptionToggle.checked = false;
+                    }
+                    buttons: Platform.MessageDialog.Ok | Platform.MessageDialog.Cancel
+                }
 
-            Item {
+                Label {
-                // for adding extra space between sections
+                    text: qsTr("Sticker & Emote Settings")
-                Layout.fillWidth: true
+                    color: Nheko.colors.text
-            }
+                }
 
-            MatrixText {
+                Button {
-                text: qsTr("INFO")
+                    text: qsTr("Change")
-                font.bold: true
+                    ToolTip.text: qsTr("Change what packs are enabled, remove packs or create new ones")
-            }
+                    onClicked: TimelineManager.openImagePackSettings(roomSettings.roomId)
+                    Layout.alignment: Qt.AlignRight
+                }
 
-            Item {
+                Label {
-                Layout.fillWidth: true
+                    text: qsTr("Hidden events")
-            }
+                    color: Nheko.colors.text
+                }
 
-            MatrixText {
+                HiddenEventsDialog {
-                text: qsTr("Internal ID")
+                    id: hiddenEventsDialog
-            }
+                    roomid: roomSettings.roomId
+                    roomName: roomSettings.roomName
+                }
 
-            MatrixText {
+                Button {
-                text: roomSettings.roomId
+                    text: qsTr("Configure")
-                font.pixelSize: Math.floor(fontMetrics.font.pixelSize * 0.8)
+                    ToolTip.text: qsTr("Select events to hide in this room")
-                Layout.alignment: Qt.AlignRight
+                    onClicked: hiddenEventsDialog.show()
-            }
+                    Layout.alignment: Qt.AlignRight
+                }
 
-            MatrixText {
+                Item {
-                text: qsTr("Room Version")
+                    // for adding extra space between sections
-            }
+                    Layout.fillWidth: true
+                }
 
-            MatrixText {
+                Item {
-                text: roomSettings.roomVersion
+                    // for adding extra space between sections
-                font.pixelSize: fontMetrics.font.pixelSize
+                    Layout.fillWidth: true
-                Layout.alignment: Qt.AlignRight
+                }
-            }
 
+                Label {
+                    text: qsTr("INFO")
+                    font.bold: true
+                    color: Nheko.colors.text
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                Label {
+                    text: qsTr("Internal ID")
+                    color: Nheko.colors.text
+                }
+
+                AbstractButton { // AbstractButton does not allow setting text color
+                    Layout.alignment: Qt.AlignRight
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: idLabel.height
+                    Label { // TextEdit does not trigger onClicked
+                        id: idLabel
+                        text: roomSettings.roomId
+                        font.pixelSize: Math.floor(fontMetrics.font.pixelSize * 0.8)
+                        color: Nheko.colors.text
+                        width: parent.width
+                        horizontalAlignment: Text.AlignRight
+                        wrapMode: Text.WrapAnywhere
+                        ToolTip.text: qsTr("Copied to clipboard")
+                        ToolTip.visible: toolTipTimer.running
+                    }
+                    TextEdit{ // label does not allow selection
+                        id: textEdit
+                        visible: false
+                        text: roomSettings.roomId
+                    }
+                    onClicked: {
+                        textEdit.selectAll()
+                        textEdit.copy()
+                        toolTipTimer.start()
+                    }
+                    Timer {
+                        id: toolTipTimer
+                    }
+                }
+
+                Label {
+                    text: qsTr("Room Version")
+                    color: Nheko.colors.text
+                }
+
+                Label {
+                    text: roomSettings.roomVersion
+                    font.pixelSize: fontMetrics.font.pixelSize
+                    Layout.alignment: Qt.AlignRight
+                    color: Nheko.colors.text
+                }
+
+            }
         }
-
+    }
-        DialogButtonBox {
+    Button {
-            Layout.fillWidth: true
+        id: showMoreButton
-            standardButtons: DialogButtonBox.Ok
+        anchors.horizontalCenter: flickable.horizontalCenter
-            onAccepted: close()
+        y: Math.min(showMorePlaceholder.y+contentLayout1.y-flickable.contentY,flickable.height-height)
+        visible: roomTopic.cut
+        text: roomTopic.showMore? "show less" : "show more"
+        onClicked: {roomTopic.showMore = !roomTopic.showMore
+            console.log(flickable.visibleArea)
         }
-
+    }
+    footer: DialogButtonBox {
+        standardButtons: DialogButtonBox.Ok
+        onAccepted: close()
     }
 }