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
This commit is contained in:
jordi fita mas 2024-12-22 04:18:56 +01:00
parent 392d993c8a
commit fe7a9a78c6
3 changed files with 190 additions and 14 deletions

View File

@ -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

93
src/Expander.qml Normal file
View File

@ -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
}
}

View File

@ -9,29 +9,111 @@ Page {
title: qsTr("Login")
ColumnLayout {
MnemonicLabel {
buddy: user
mnemonic: qsTr("&User:")
anchors.centerIn: parent
GridLayout {
columns: 2
MnemonicLabel {
Layout.alignment: Qt.AlignRight
buddy: user
mnemonic: qsTr("&User:")
}
TextField {
id: user
Layout.fillWidth: true
focus: true
onAccepted: loginAction.trigger()
}
MnemonicLabel {
Layout.alignment: Qt.AlignRight
buddy: password
mnemonic: qsTr("&Password:")
}
TextField {
id: password
Layout.fillWidth: true
echoMode: TextInput.Password
onAccepted: loginAction.trigger()
}
}
TextField {
id: user
Expander {
Layout.fillWidth: true
Layout.topMargin: 8
title: qsTr("&Advanced options")
focus: true
}
GridLayout {
columns: 2
MnemonicLabel {
buddy: password
mnemonic: qsTr("&Password:")
}
MnemonicLabel {
Layout.alignment: Qt.AlignRight
buddy: hostName
mnemonic: qsTr("&Host name:")
}
TextField {
id: password
TextField {
id: hostName
echoMode: TextInput.Password
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
}
}