Add Expander control to show “advanced controls” on login

I want to allow people to set all options of QSqlDatabase, that way i do
not force the ‘service=camper’ thing, and everyone can use whatever
parameters they see fit.

I plan to store these other options as Settings, because usualy this
should only be done once at setup, and then we only need to input the
username and login to enter.  For that same reason, i do not want to
show them all the time; only if the user wants to change anything.

As far as i know, neither QtWidgets nor Qt Quick Controls have anything
that works as Gtk’s Expander, so i had to create that component.  HTML
calls it <details>, Apple “disclosure control”[0], and both Microsoft
and Gtk “expander”[1, 2]. I’ve choosen Gtk name, but macOS looks.

[0]: https://developer.apple.com/design/human-interface-guidelines/
disclosure-controls
[1]: https://learn.microsoft.com/en-us/windows/apps/design/controls/
expander
[2]: https://docs.gtk.org/gtk4/class.Expander.html

src/CMakeLists.txt

@@ -13,6 +13,7 @@ qt_add_qml_module(${PROJECT_NAME}
         mnemonicattached.cpp mnemonicattached.h
     QML_FILES
         ErrorNotification.qml
+        Expander.qml
         LoginPage.qml
         Main.qml
         MnemonicAction.qml

src/Expander.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Shapes
+
+Control {
+    id: control
+
+    default property alias contentData: pane.contentData
+    property alias expanded: pane.visible
+    property string title
+
+    clip: true
+    implicitHeight: triangle.implicitHeight + (expanded ? pane.implicitHeight : 0)
+    implicitWidth: Math.max(triangle.implicitWidth, pane.implicitWidth)
+
+    Behavior on implicitHeight {
+        NumberAnimation {
+            duration: 200
+        }
+    }
+
+    ToolButton {
+        id: triangle
+
+        Mnemonic.label: control.title
+        anchors.left: parent.left
+        anchors.top: parent.top
+        text: Mnemonic.richTextLabel
+
+        contentItem: Row {
+            spacing: 4
+
+            Shape {
+                anchors.verticalCenter: parent.verticalCenter
+                height: 8
+                rotation: control.expanded ? 90 : 0
+                width: 8
+
+                Behavior on rotation {
+                    NumberAnimation {
+                        duration: 200
+                    }
+                }
+
+                ShapePath {
+                    fillColor: "transparent"
+                    startX: 2
+                    startY: 0
+                    strokeColor: triangle.palette.buttonText
+                    strokeWidth: 1
+
+                    PathLine {
+                        x: 6
+                        y: 4
+                    }
+
+                    PathLine {
+                        x: 2
+                        y: 8
+                    }
+                }
+            }
+
+            Label {
+                anchors.verticalCenter: parent.verticalCenter
+                color: triangle.palette.buttonText
+                font: triangle.font
+                text: triangle.text
+            }
+        }
+
+        onClicked: function () {
+            control.expanded = !control.expanded;
+        }
+
+        Shortcut {
+            sequence: triangle.Mnemonic.sequence
+
+            onActivated: function () {
+                triangle.click();
+            }
+        }
+    }
+
+    Pane {
+        id: pane
+
+        anchors.left: parent.left
+        anchors.top: triangle.bottom
+        padding: 0
+        visible: false
+    }
+}

src/LoginPage.qml

@@ -9,7 +9,13 @@ Page {
     title: qsTr("Login")
 
     ColumnLayout {
+        anchors.centerIn: parent
+
+        GridLayout {
+            columns: 2
+
             MnemonicLabel {
+                Layout.alignment: Qt.AlignRight
                 buddy: user
                 mnemonic: qsTr("&User:")
             }
@@ -17,10 +23,14 @@ Page {
             TextField {
                 id: user
 
+                Layout.fillWidth: true
                 focus: true
+
+                onAccepted: loginAction.trigger()
             }
 
             MnemonicLabel {
+                Layout.alignment: Qt.AlignRight
                 buddy: password
                 mnemonic: qsTr("&Password:")
             }
@@ -28,10 +38,82 @@ Page {
             TextField {
                 id: password
 
+                Layout.fillWidth: true
                 echoMode: TextInput.Password
+
+                onAccepted: loginAction.trigger()
+            }
+        }
+
+        Expander {
+            Layout.fillWidth: true
+            Layout.topMargin: 8
+            title: qsTr("&Advanced options")
+
+            GridLayout {
+                columns: 2
+
+                MnemonicLabel {
+                    Layout.alignment: Qt.AlignRight
+                    buddy: hostName
+                    mnemonic: qsTr("&Host name:")
+                }
+
+                TextField {
+                    id: hostName
+
+                    Layout.fillWidth: true
+
+                    onAccepted: loginAction.trigger()
+                }
+
+                MnemonicLabel {
+                    Layout.alignment: Qt.AlignRight
+                    buddy: port
+                    mnemonic: qsTr("Por&t:")
+                }
+
+                SpinBox {
+                    id: port
+
+                    Layout.fillWidth: true
+                    editable: true
+                    from: 1
+                    to: 65535
+                }
+
+                MnemonicLabel {
+                    Layout.alignment: Qt.AlignRight
+                    buddy: databaseName
+                    mnemonic: qsTr("&Database name:")
+                }
+
+                TextField {
+                    id: databaseName
+
+                    Layout.fillWidth: true
+
+                    onAccepted: loginAction.trigger()
+                }
+
+                MnemonicLabel {
+                    Layout.alignment: Qt.AlignRight
+                    buddy: connectOptions
+                    mnemonic: qsTr("&Options:")
+                }
+
+                TextField {
+                    id: connectOptions
+
+                    Layout.fillWidth: true
+
+                    onAccepted: loginAction.trigger()
+                }
+            }
         }
 
         Button {
+            Layout.alignment: Qt.AlignRight
             action: loginAction
         }
     }