From be665a2744f7fb4a8b15e6a0068a8317f5824be9 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 10:47:59 +0800 Subject: Instructor edit profile supports dark mode --- Instructor/EditProfile.ui.qml | 150 ++++++++++++++---------------------------- TextField/Input.ui.qml | 12 +++- imports/Eduport/Eduport.qml | 4 ++ 3 files changed, 66 insertions(+), 100 deletions(-) diff --git a/Instructor/EditProfile.ui.qml b/Instructor/EditProfile.ui.qml index 4115e70..5500bb7 100644 --- a/Instructor/EditProfile.ui.qml +++ b/Instructor/EditProfile.ui.qml @@ -35,9 +35,10 @@ Flickable { Layout.fillWidth: true implicitHeight: editProfile.height radius: 8 + color: Eduport.bsBodyBg border { + color: Eduport.bsBorderColor width: 1 - color: "#1a000000" } ColumnLayout { @@ -50,16 +51,20 @@ Flickable { Lbl.H3 { id: cardHeader Layout.fillWidth: true - text: qsTr("Edit Profile") + text: + qsTr("Edit Profile") padding: 16 } - Rectangle { - Layout.fillWidth: true - height: 1 - border { - width: .5 - color: "#0a000000" + MenuSeparator { + contentItem: Rectangle { + implicitWidth: + editProfile + .width + implicitHeight: + 1 + color: Eduport + .bsBorderColor } } @@ -140,9 +145,10 @@ Flickable { Layout.fillWidth: true implicitHeight: firstName.height radius: 5.2 + color: Eduport.bsBodyBg border { width: 1 - color: "#dde0e3" + color: Eduport.bsGray300 } TxtFld.Input { @@ -151,19 +157,17 @@ Flickable { placeholderText: qsTr("First name") width: parent.width / 2 anchors.left: parent.left - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 + background: Rectangle { + color: "transparent" + } } - Rectangle { - width: 1 - height: firstName.height - anchors.horizontalCenter: parent.horizontalCenter - border { - width: .5 - color: "#88dde0e3" + ToolSeparator { + anchors.centerIn: parent + contentItem: Rectangle { + implicitWidth: 1 + implicitHeight: firstName.height + color: Eduport.bsGray300 } } @@ -173,10 +177,9 @@ Flickable { placeholderText: qsTr("Last name") width: parent.width / 2 anchors.right: parent.right - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 + background: Rectangle { + color: "transparent" + } } } } @@ -196,9 +199,10 @@ Flickable { Layout.fillWidth: true implicitHeight: userName.height radius: 5.2 + color: Eduport.bsBodyBg border { width: 1 - color: "#dde0e3" + color: Eduport.bsGray300 } Lbl.Body { @@ -212,18 +216,18 @@ Flickable { leftPadding: 12 rightPadding: 12 bottomPadding: 6 + color: Eduport.bsBodyColor background: Rectangle { - color: "#e9ecef" + color: Eduport.bsTertiaryBg } } - Rectangle { - width: 1 - height: userName.height - anchors.horizontalCenter: parent.horizontalCenter - border { - width: .5 - color: "#88dde0e3" + ToolSeparator { + anchors.centerIn: parent + contentItem: Rectangle { + implicitWidth: 1 + implicitHeight: firstName.height + color: Eduport.bsGray300 } } @@ -232,10 +236,9 @@ Flickable { text: "loristev" width: parent.width / 2 anchors.right: parent.right - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 + background: Rectangle { + color: "transparent" + } } } } @@ -251,28 +254,11 @@ Flickable { text: qsTr("Email id") } - Rectangle { + TxtFld.Input { + id: emailID + text: "example@gmail.com" + placeholderText: qsTr("Email") Layout.fillWidth: true - implicitHeight: emailID.height - radius: 5.2 - border { - width: 1 - color: "#dde0e3" - } - - TxtFld.Input { - id: emailID - text: "example@gmail.com" - placeholderText: qsTr("Email") - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 - anchors { - left: parent.left - right: parent.right - } - } } } @@ -287,28 +273,11 @@ Flickable { text: qsTr("Phone number") } - Rectangle { + TxtFld.Input { + id: phoneNumber + text: "1234567890" + placeholderText: qsTr("Phone number") Layout.fillWidth: true - implicitHeight: phoneNumber.height - radius: 5.2 - border { - width: 1 - color: "#dde0e3" - } - - TxtFld.Input { - id: phoneNumber - text: "1234567890" - placeholderText: qsTr("Phone number") - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 - anchors { - left: parent.left - right: parent.right - } - } } } @@ -323,27 +292,10 @@ Flickable { text: qsTr("Location") } - Rectangle { + TxtFld.Input { + id: location + text: "California" Layout.fillWidth: true - implicitHeight: location.height - radius: 5.2 - border { - width: 1 - color: "#dde0e3" - } - - TxtFld.Input { - id: location - text: "California" - topPadding: 8 - leftPadding: 16 - rightPadding: 16 - bottomPadding: 8 - anchors { - left: parent.left - right: parent.right - } - } } } diff --git a/TextField/Input.ui.qml b/TextField/Input.ui.qml index d036348..9e0a821 100644 --- a/TextField/Input.ui.qml +++ b/TextField/Input.ui.qml @@ -8,7 +8,17 @@ TextField { weight: Eduport.bodyFont.weight pointSize: Eduport.formControlFontSize } + color: Eduport.bsGray700 background: Rectangle { - color: "transparent" + radius: 5.2 + color: Eduport.bsBodyBg + border { + color: Eduport.bsGray300 + width: 1 + } } + topPadding: 8 + leftPadding: 16 + rightPadding: 16 + bottomPadding: 8 } diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index 5a5dcdb..7e50bd5 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -43,12 +43,14 @@ QtObject { readonly property color bsPrimary: "#066ac9" property color bsLight: mode ? "#2a2c31" : "#f5f7f9" property color bsDark: mode ? "#0f0f10" : "#24292d" + property color bsTertiaryBg: mode ? "#2b3035" : "#f8f9fa" readonly property real bsBadgeFontSize: 13.6 property color bsBodyColor: mode ? "#a1a1a8" : "#747579" property color bsBodyBg: mode ? "#222529" : "#ffffff" + property color bsBorderColor: mode ? "#12ffffff" : bsGray200 property real bsBorderRadius: 5.2 property real bsBoxShadowOffsetX: 0 @@ -96,9 +98,11 @@ QtObject { property color bsHeadingColor: mode ? "#ffffff" : "#24292d" + property color bsGray200: mode ? "#464950" : "#eff1f2" property color bsGray300: mode ? "#3e3e40" : "#dde0e3" property color bsGray500: mode ? "#bfc0c9" : "#9a9ea4" property color bsGray600: mode ? "#c5c6cc" : "#747579" + property color bsGray700: mode ? "#f3f1f1" : "#404448" property color bsGray800: mode ? "#f7f5f5" : "#24292d" readonly property bool haveRoboto: Qt.platform.os === "android" -- cgit v1.2.3