From ef77e4c17d14dced9204aebe7e4dc11c523af5c846fe20872b7dc08a2cebac4a Mon Sep 17 00:00:00 2001 From: Yuri Becker Date: Fri, 14 Mar 2025 10:24:32 +0100 Subject: [PATCH] Style Login page --- .idea/codeStyles/codeStyleConfig.xml | 5 ++ Gui/LoginScreen.qml | 70 ++++++++++++++++------------ TeroStyle/Dimensions.qml | 14 ++++++ TeroStyle/Field.qml | 13 ++++++ TeroStyle/TextField.qml | 19 ++++++++ TeroStyle/qmldir | 4 +- qml.qrc | 2 + 7 files changed, 96 insertions(+), 31 deletions(-) create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 TeroStyle/Field.qml create mode 100644 TeroStyle/TextField.qml diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..244a3c0 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/Gui/LoginScreen.qml b/Gui/LoginScreen.qml index c8de855..c3cc942 100644 --- a/Gui/LoginScreen.qml +++ b/Gui/LoginScreen.qml @@ -21,6 +21,7 @@ Item { } anchors.fill: parent + anchors.topMargin: Dimensions.l Component.onCompleted: { loggedin_user.loginOkay.connect(loggedin); @@ -31,57 +32,66 @@ Item { } ColumnLayout { - anchors.fill: parent spacing: Dimensions.m + anchors.centerIn: parent + Label { font: Typography.h1 text: qsTr("Login") + Layout.alignment: Qt.AlignHCenter + Layout.bottomMargin: Dimensions.l } - Label { - text: qsTr("Benutzername") - } - TextField { - id: benutzerName - focus: true - implicitWidth: 300 - placeholderText: qsTr("Benutzernamen eingeben") - onAccepted: { - if (benutzerName.text.trim() && passwort.text.trim()) - loggedin_user.login(benutzerName.text.trim(), passwort.text); - else if (benutzerName.text.trim()) - passwort.forceActiveFocus(); + Field { + label: qsTr("Benutzername") + + TextField { + id: benutzerName + + focus: true + implicitWidth: 300 + placeholderText: qsTr("Benutzernamen eingeben") + + onAccepted: { + if (benutzerName.text.trim() && passwort.text.trim()) + loggedin_user.login(benutzerName.text.trim(), passwort.text); + else if (benutzerName.text.trim()) + passwort.forceActiveFocus(); + } } } - Label { - text: qsTr("Passwort") - } - TextField { - id: passwort - echoMode: TextInput.Password - implicitWidth: 300 - placeholderText: qsTr("Passwort eingeben") + Field { + label: qsTr("Passwort") - onAccepted: { - if (benutzerName.text.trim() && passwort.text.trim()) - loggedin_user.login(benutzerName.text.trim(), passwort.text); - else if (passwort.text.trim()) - benutzerName.forceActiveFocus(); + TextField { + id: passwort + + echoMode: TextInput.Password + implicitWidth: 300 + placeholderText: qsTr("Passwort eingeben") + + onAccepted: { + if (benutzerName.text.trim() && passwort.text.trim()) + loggedin_user.login(benutzerName.text.trim(), passwort.text); + else if (passwort.text.trim()) + benutzerName.forceActiveFocus(); + } } } + Button { - text: qsTr("Primary") + Layout.topMargin: Dimensions.m + text: qsTr("Login") + width: parent.width onClicked: { if (benutzerName.text.trim() && passwort.text.trim()) loggedin_user.login(benutzerName.text.trim(), passwort.text); } } - Item { Layout.fillHeight: true } - Dialog { id: recoveryPaswordDialog diff --git a/TeroStyle/Dimensions.qml b/TeroStyle/Dimensions.qml index 6db091d..0b15c64 100644 --- a/TeroStyle/Dimensions.qml +++ b/TeroStyle/Dimensions.qml @@ -3,8 +3,22 @@ pragma Singleton import QtQuick QtObject { + /** + * Distance for objects that are tied to each other, + * e.g. a field and its label. + */ readonly property int s: 9 + + /** + * Distance for objects that are grouped together, e.g. radio buttons of the + * same radio group. + */ readonly property int m: 15 + + /** + * Distance for objects that are not related to each other, or to objects + * and their container. + */ readonly property int l: 30 readonly property int radius: 4 diff --git a/TeroStyle/Field.qml b/TeroStyle/Field.qml new file mode 100644 index 0000000..4a3a3dd --- /dev/null +++ b/TeroStyle/Field.qml @@ -0,0 +1,13 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +ColumnLayout { + required property string label + spacing: Dimensions.s + + Label { + text: label + font: Typography.body + } +} \ No newline at end of file diff --git a/TeroStyle/TextField.qml b/TeroStyle/TextField.qml new file mode 100644 index 0000000..9c64208 --- /dev/null +++ b/TeroStyle/TextField.qml @@ -0,0 +1,19 @@ +import QtQuick +import QtQuick.Templates as T + +T.TextField { + background: Rectangle { + id: background + color: Colors.mantle + radius: Dimensions.radius + border.width: 1 + border.color: Colors.interactive + height: 47 + } + + color: Colors.foreground + implicitHeight: background.height + placeholderTextColor: Colors.interactive + font: Typography.body + padding: Dimensions.m +} \ No newline at end of file diff --git a/TeroStyle/qmldir b/TeroStyle/qmldir index 0040247..79ef426 100644 --- a/TeroStyle/qmldir +++ b/TeroStyle/qmldir @@ -2,4 +2,6 @@ module TeroStyle singleton Colors Colors.qml singleton Dimensions Dimensions.qml singleton Typography Typography.qml -Button Button.qml \ No newline at end of file +Button Button.qml +Field Field.qml +TextField TextField.qml \ No newline at end of file diff --git a/qml.qrc b/qml.qrc index 62ad668..c240c9e 100644 --- a/qml.qrc +++ b/qml.qrc @@ -51,8 +51,10 @@ Gui/OfferTable.qml TeroStyle/Button.qml TeroStyle/Colors.qml + TeroStyle/Field.qml TeroStyle/Dimensions.qml TeroStyle/qmldir + TeroStyle/TextField.qml TeroStyle/Typography.qml