From fe7a9a78c68c32de4c1bc49b51c329211d05b260 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Sun, 22 Dec 2024 04:18:56 +0100 Subject: [PATCH] =?UTF-8?q?Add=20Expander=20control=20to=20show=20?= =?UTF-8?q?=E2=80=9Cadvanced=20controls=E2=80=9D=20on=20login?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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
, 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 | 1 + src/Expander.qml | 93 ++++++++++++++++++++++++++++++++++++++ src/LoginPage.qml | 110 +++++++++++++++++++++++++++++++++++++++------ 3 files changed, 190 insertions(+), 14 deletions(-) create mode 100644 src/Expander.qml diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt index 82ede0f..79097e4 100644 --- a/src/CMakeLists.txt +++ b/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 diff --git a/src/Expander.qml b/src/Expander.qml new file mode 100644 index 0000000..eb5401d --- /dev/null +++ b/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 + } +} diff --git a/src/LoginPage.qml b/src/LoginPage.qml index 9f420b9..b57ffba 100644 --- a/src/LoginPage.qml +++ b/src/LoginPage.qml @@ -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 } }