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:
parent
392d993c8a
commit
fe7a9a78c6
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue