From 2523a743471c5e17e3784d716e291770207f7da3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Wed, 29 Mar 2023 15:36:10 +0800 Subject: Fix auth input text fields --- Authentication/SignIn.ui.qml | 120 ++++++++++++++++++++++------ Authentication/SignUp.ui.qml | 181 +++++++++++++++++++++++++++++++++++-------- imports/Eduport/Eduport.qml | 1 + 3 files changed, 246 insertions(+), 56 deletions(-) diff --git a/Authentication/SignIn.ui.qml b/Authentication/SignIn.ui.qml index eadc633..09e671a 100644 --- a/Authentication/SignIn.ui.qml +++ b/Authentication/SignIn.ui.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 import Eduport 1.4 import "../Label" as Lbl import "../TextField" as TxtFld @@ -55,26 +56,63 @@ Flickable { } Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 Layout.fillWidth: true + implicitHeight: email.height + radius: 5.2 + color: Eduport.bsLight RowLayout { anchors.fill: parent + Image { - source: emailImage - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 + Layout + .topMargin: 16 + Layout + .leftMargin: 20 + Layout + .rightMargin: 20 + Layout + .bottomMargin: + 16 + source: + emailImage + sourceSize { + width: + 20 + height: + 20 + } + + ColorOverlay { + color: + Eduport + .bsSecondary + source: + parent + anchors + .fill: + parent + } } TxtFld.Input { + Layout + .fillWidth: true + Layout + .leftMargin: -1 id: email - placeholderText: qsTr("E-mail") - Layout.fillWidth: true - Layout.fillHeight: true + placeholderText: + qsTr("E-mail") + topPadding: 16 + leftPadding: 5 + rightPadding: 30 + bottomPadding: + 16 + background: + Rectangle { + color: + "transparent" + } } } } @@ -87,27 +125,65 @@ Flickable { } Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 Layout.fillWidth: true + implicitHeight: password.height + radius: 5.2 + color: Eduport.bsLight RowLayout { anchors.fill: parent + Image { + Layout + .topMargin: 16 + Layout + .leftMargin: 20 + Layout + .rightMargin: 20 + Layout + .bottomMargin: + 16 source: "../Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 + sourceSize { + width: + 18 + height: + 20 + } + + ColorOverlay { + color: + Eduport + .bsSecondary + source: + parent + anchors + .fill: + parent + } } TxtFld.Input { + Layout + .fillWidth: true + Layout + .leftMargin: -1 id: password - placeholderText: qsTr("password") - echoMode: TextInput.Password - Layout.fillWidth: true - Layout.fillHeight: true + placeholderText: + qsTr("password") + echoMode: + TextInput + .Password + topPadding: 16 + leftPadding: 5 + rightPadding: 30 + bottomPadding: + 16 + background: + Rectangle { + color: + "transparent" + } } } } diff --git a/Authentication/SignUp.ui.qml b/Authentication/SignUp.ui.qml index 0644a96..6f3df00 100644 --- a/Authentication/SignUp.ui.qml +++ b/Authentication/SignUp.ui.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 import Eduport 1.4 import "../Label" as Lbl import "../TextField" as TxtFld @@ -57,27 +58,63 @@ Flickable { } Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 Layout.fillWidth: true + implicitHeight: email.height + radius: 5.2 + color: Eduport.bsLight RowLayout { anchors.fill: parent Image { - source: emailImage - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 + Layout + .topMargin: 16 + Layout + .leftMargin: 20 + Layout + .rightMargin: 20 + Layout + .bottomMargin: + 16 + source: + emailImage + sourceSize { + width: + 20 + height: + 20 + } + + ColorOverlay { + color: + Eduport + .bsSecondary + source: + parent + anchors + .fill: + parent + } } TxtFld.Input { + Layout + .fillWidth: true + Layout + .leftMargin: -1 id: email - placeholderText: qsTr("E-mail") - Layout.fillWidth: true - Layout.fillHeight: true + placeholderText: + qsTr("E-mail") + topPadding: 16 + leftPadding: 5 + rightPadding: 30 + bottomPadding: + 16 + background: + Rectangle { + color: + "transparent" + } } } } @@ -90,28 +127,65 @@ Flickable { } Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 Layout.fillWidth: true + implicitHeight: password.height + radius: 5.2 + color: Eduport.bsLight RowLayout { anchors.fill: parent Image { + Layout + .topMargin: 16 + Layout + .leftMargin: 20 + Layout + .rightMargin: 20 + Layout + .bottomMargin: + 16 source: "../Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 + sourceSize { + width: + 18 + height: + 20 + } + + ColorOverlay { + color: + Eduport + .bsSecondary + source: + parent + anchors + .fill: + parent + } } TxtFld.Input { + Layout + .fillWidth: true + Layout + .leftMargin: -1 id: password - placeholderText: "*********" - echoMode: TextInput.Password - Layout.fillWidth: true - Layout.fillHeight: true + placeholderText: + "*********" + echoMode: + TextInput + .Password + topPadding: 16 + leftPadding: 5 + rightPadding: 30 + bottomPadding: + 16 + background: + Rectangle { + color: + "transparent" + } } } } @@ -124,28 +198,67 @@ Flickable { } Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 Layout.fillWidth: true + implicitHeight: confirmPassword + .height + radius: 5.2 + color: Eduport.bsLight RowLayout { anchors.fill: parent Image { + Layout + .topMargin: 16 + Layout + .leftMargin: 20 + Layout + .rightMargin: 20 + Layout + .bottomMargin: + 16 source: "../Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 + sourceSize { + width: + 18 + height: + 20 + } + + ColorOverlay { + color: + Eduport + .bsSecondary + source: + parent + anchors + .fill: + parent + } } TxtFld.Input { - id: confirmPassword - placeholderText: "*********" - echoMode: TextInput.Password - Layout.fillWidth: true - Layout.fillHeight: true + Layout + .fillWidth: true + Layout + .leftMargin: -1 + id: + confirmPassword + placeholderText: + "*********" + echoMode: + TextInput + .Password + topPadding: 16 + leftPadding: 5 + rightPadding: 30 + bottomPadding: + 16 + background: + Rectangle { + color: + "transparent" + } } } } diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index 7e50bd5..14371b9 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -41,6 +41,7 @@ QtObject { }) readonly property color bsPrimary: "#066ac9" + property color bsSecondary: "#9a9ea4" property color bsLight: mode ? "#2a2c31" : "#f5f7f9" property color bsDark: mode ? "#0f0f10" : "#24292d" property color bsTertiaryBg: mode ? "#2b3035" : "#f8f9fa" -- cgit v1.2.3