From 273684416acefe8bfd803c4d3541b34d929ee2c1 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 14:44:38 +0700 Subject: username text form --- assets/user-24px.svg | 15 +++++++++++++++ kelakon.qrc | 3 +++ pages/Username.qml | 4 ++++ pages/UsernameForm.ui.qml | 35 +++++++++++++++++++++++++++++++++++ 4 files changed, 57 insertions(+) create mode 100644 assets/user-24px.svg create mode 100644 pages/Username.qml create mode 100644 pages/UsernameForm.ui.qml diff --git a/assets/user-24px.svg b/assets/user-24px.svg new file mode 100644 index 0000000..3eff6de --- /dev/null +++ b/assets/user-24px.svg @@ -0,0 +1,15 @@ + + + + username-24 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/kelakon.qrc b/kelakon.qrc index 3c41d42..901d3f0 100644 --- a/kelakon.qrc +++ b/kelakon.qrc @@ -27,5 +27,8 @@ assets/chevron-right-24px.svg assets/add-24px.svg assets/profile-24px.svg + pages/Username.qml + pages/UsernameForm.ui.qml + assets/user-24px.svg diff --git a/pages/Username.qml b/pages/Username.qml new file mode 100644 index 0000000..c523226 --- /dev/null +++ b/pages/Username.qml @@ -0,0 +1,4 @@ +import QtQuick 2.4 + +UsernameForm { +} diff --git a/pages/UsernameForm.ui.qml b/pages/UsernameForm.ui.qml new file mode 100644 index 0000000..3771959 --- /dev/null +++ b/pages/UsernameForm.ui.qml @@ -0,0 +1,35 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 + +RowLayout { + + id: userName + width: fillWidth + height: 54 + anchors.topMargin: 8 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + spacing: 16 + + Image { + id: icon + width: 24 + height: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/user-24px.svg" + } + + TextField { + id: textField + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Username") + } +} -- cgit v1.2.3 From c8679cd187c0b273bb8cdd8b41e0d3f903d6e24f Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 16:16:26 +0700 Subject: add email icon, change userEmail RowLayout --- assets/email-24px.svg | 1 + kelakon.qrc | 1 + pages/CreateProfileForm.ui.qml | 33 +++++++++++++++++++-------------- 3 files changed, 21 insertions(+), 14 deletions(-) create mode 100644 assets/email-24px.svg diff --git a/assets/email-24px.svg b/assets/email-24px.svg new file mode 100644 index 0000000..1ed4686 --- /dev/null +++ b/assets/email-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kelakon.qrc b/kelakon.qrc index 901d3f0..2aa971b 100644 --- a/kelakon.qrc +++ b/kelakon.qrc @@ -30,5 +30,6 @@ pages/Username.qml pages/UsernameForm.ui.qml assets/user-24px.svg + assets/email-24px.svg diff --git a/pages/CreateProfileForm.ui.qml b/pages/CreateProfileForm.ui.qml index 76f0da9..5f0040c 100644 --- a/pages/CreateProfileForm.ui.qml +++ b/pages/CreateProfileForm.ui.qml @@ -61,25 +61,31 @@ Rectangle { } } } - Rectangle { + RowLayout { id: userEmail - height: 48 + height: 56 anchors.top: profilePicture.bottom anchors.topMargin: 16 anchors.right: parent.right anchors.rightMargin: 16 anchors.left: parent.left anchors.leftMargin: 16 + spacing: 8 + + Image { + id: emailIcon + width: 24 + height: 24 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/email-24px.svg" + } Label { id: emailAddressLabel - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 - anchors.verticalCenter: parent.verticalCenter text: qsTr("your@email.com") + verticalAlignment: Text.AlignVCenter font.family: "Google Sans" font.pointSize: 16 color: "#99000000" @@ -141,11 +147,10 @@ Rectangle { } } - - - -/*##^## Designer { - D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}D{i:7;anchors_height:48;anchors_y:143} -D{i:9;anchors_y:322}D{i:11;anchors_y:54} +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}D{i:10;anchors_y:322} +D{i:12;anchors_y:54} } - ##^##*/ +##^##*/ + -- cgit v1.2.3 From c236d2b1a98b9a7a1e6d3139f58e4bbcc394d7c6 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 16:49:38 +0700 Subject: add more field on CreateProfileForm --- pages/CreateProfileForm.ui.qml | 73 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 59 insertions(+), 14 deletions(-) diff --git a/pages/CreateProfileForm.ui.qml b/pages/CreateProfileForm.ui.qml index 5f0040c..c67f10e 100644 --- a/pages/CreateProfileForm.ui.qml +++ b/pages/CreateProfileForm.ui.qml @@ -64,7 +64,7 @@ Rectangle { RowLayout { id: userEmail height: 56 - anchors.top: profilePicture.bottom + anchors.top: usernameRowLayout.bottom anchors.topMargin: 16 anchors.right: parent.right anchors.rightMargin: 16 @@ -73,38 +73,84 @@ Rectangle { spacing: 8 Image { - id: emailIcon width: 24 height: 24 + Layout.leftMargin: 0 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit source: "../assets/email-24px.svg" + antialiasing: true } Label { id: emailAddressLabel - + Layout.fillWidth: true text: qsTr("your@email.com") + Layout.leftMargin: 24 verticalAlignment: Text.AlignVCenter font.family: "Google Sans" font.pointSize: 16 color: "#99000000" } } + RowLayout { + id: fullnameRowLayout + height: 56 + anchors.top: profilePicture.bottom + anchors.topMargin: 32 + anchors.right: parent.right + anchors.rightMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 - TextField { - id: enterFullName - anchors.top: userEmail.bottom - anchors.topMargin: 16 - font.pointSize: 16 - font.family: "Google Sans" - Layout.fillWidth: true - placeholderText: qsTr("Full name") + Image { + width: 24 + height: 24 + Layout.leftMargin: 0 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/profile-24px.svg" + antialiasing: true + } + + TextField { + id: enterFullName + Layout.leftMargin: 24 + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Full name") + Layout.alignment: Qt.AlignVCenter + } + } + RowLayout { + id: usernameRowLayout + height: 56 anchors.right: parent.right anchors.rightMargin: 16 anchors.left: parent.left anchors.leftMargin: 16 - Layout.maximumHeight: 56 + anchors.top: fullnameRowLayout.bottom + anchors.topMargin: 16 + + Image { + width: 24 + height: 24 + Layout.leftMargin: 0 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/user-24px.svg" + antialiasing: true + } + + TextField { + Layout.leftMargin: 24 + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Username") + Layout.alignment: Qt.AlignVCenter + } } RoundButton { @@ -149,8 +195,7 @@ Rectangle { /*##^## Designer { - D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}D{i:10;anchors_y:322} -D{i:12;anchors_y:54} + D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640} } ##^##*/ -- cgit v1.2.3 From 9e801c23c694ec03223593fd5dba627c3a9e6982 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 17:33:11 +0700 Subject: fix Layout --- pages/CreateProfileForm.ui.qml | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/pages/CreateProfileForm.ui.qml b/pages/CreateProfileForm.ui.qml index c67f10e..45087e1 100644 --- a/pages/CreateProfileForm.ui.qml +++ b/pages/CreateProfileForm.ui.qml @@ -64,18 +64,15 @@ Rectangle { RowLayout { id: userEmail height: 56 + anchors.horizontalCenter: parent.horizontalCenter anchors.top: usernameRowLayout.bottom - anchors.topMargin: 16 - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 + width: parent.width spacing: 8 Image { width: 24 height: 24 - Layout.leftMargin: 0 + Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit source: "../assets/email-24px.svg" @@ -86,6 +83,7 @@ Rectangle { id: emailAddressLabel Layout.fillWidth: true text: qsTr("your@email.com") + Layout.rightMargin: 16 Layout.leftMargin: 24 verticalAlignment: Text.AlignVCenter font.family: "Google Sans" @@ -96,17 +94,14 @@ Rectangle { RowLayout { id: fullnameRowLayout height: 56 + anchors.horizontalCenter: parent.horizontalCenter anchors.top: profilePicture.bottom anchors.topMargin: 32 - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 - + width: parent.width Image { width: 24 height: 24 - Layout.leftMargin: 0 + Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit source: "../assets/profile-24px.svg" @@ -115,6 +110,7 @@ Rectangle { TextField { id: enterFullName + Layout.rightMargin: 16 Layout.leftMargin: 24 font.pointSize: 16 font.family: "Google Sans" @@ -126,17 +122,16 @@ Rectangle { RowLayout { id: usernameRowLayout height: 56 - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + Layout.alignment: Qt.AlignVCenter anchors.top: fullnameRowLayout.bottom anchors.topMargin: 16 Image { width: 24 height: 24 - Layout.leftMargin: 0 + Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit source: "../assets/user-24px.svg" @@ -144,6 +139,7 @@ Rectangle { } TextField { + Layout.rightMargin: 16 Layout.leftMargin: 24 font.pointSize: 16 font.family: "Google Sans" -- cgit v1.2.3 From 95ec6276814db1f440d10938fa9db98e62a0a237 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 20:08:46 +0700 Subject: userEmail use RowLayout --- pages/PasswordForm.ui.qml | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/pages/PasswordForm.ui.qml b/pages/PasswordForm.ui.qml index 887bf01..ac084c1 100644 --- a/pages/PasswordForm.ui.qml +++ b/pages/PasswordForm.ui.qml @@ -63,25 +63,31 @@ Rectangle { font.pointSize: 34 } - Rectangle { + RowLayout { id: userEmail - height: 48 - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 + height: 56 + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + spacing: 8 anchors.bottom: passTextField.top anchors.bottomMargin: 16 + Image { + width: 24 + height: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/email-24px.svg" + antialiasing: true + } + Label { id: emailAddressLabel - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 - anchors.verticalCenter: parent.verticalCenter - + Layout.fillWidth: true text: qsTr("your@email.com") + Layout.leftMargin: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter font.family: "Google Sans" font.pointSize: 16 color: "#99000000" @@ -124,10 +130,9 @@ Rectangle { } } - - - -/*##^## Designer { +/*##^## +Designer { D{i:0;autoSize:true;height:480;width:640} } - ##^##*/ +##^##*/ + -- cgit v1.2.3 From bc1956d78c88ef31824a915134f5cdd56fb08914 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Sun, 15 Sep 2019 20:24:25 +0700 Subject: passTextField now RowLayout --- assets/lock-24px.svg | 1 + kelakon.qrc | 1 + pages/PasswordForm.ui.qml | 42 ++++++++++++++++++++++++++++-------------- 3 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 assets/lock-24px.svg diff --git a/assets/lock-24px.svg b/assets/lock-24px.svg new file mode 100644 index 0000000..1dbceea --- /dev/null +++ b/assets/lock-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kelakon.qrc b/kelakon.qrc index 2aa971b..d6837c0 100644 --- a/kelakon.qrc +++ b/kelakon.qrc @@ -31,5 +31,6 @@ pages/UsernameForm.ui.qml assets/user-24px.svg assets/email-24px.svg + assets/lock-24px.svg diff --git a/pages/PasswordForm.ui.qml b/pages/PasswordForm.ui.qml index ac084c1..8936ccd 100644 --- a/pages/PasswordForm.ui.qml +++ b/pages/PasswordForm.ui.qml @@ -66,6 +66,7 @@ Rectangle { RowLayout { id: userEmail height: 56 + anchors.horizontalCenterOffset: 0 anchors.horizontalCenter: parent.horizontalCenter width: parent.width spacing: 8 @@ -93,24 +94,37 @@ Rectangle { color: "#99000000" } } - - TextField { + RowLayout { id: passTextField - y: 501 - font.pointSize: 16 + anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: createPassButton.top anchors.bottomMargin: 16 - font.family: "Google Sans" - Layout.fillWidth: true - placeholderText: qsTr("Password") - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 - Layout.maximumHeight: 56 - echoMode: TextInput.Password - } + width: parent.width + spacing: 8 + height: 56 + Image { + width: 24 + height: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.leftMargin: 16 + fillMode: Image.PreserveAspectFit + source: "../assets/lock-24px.svg" + antialiasing: true + } + + TextField { + Layout.rightMargin: 16 + Layout.leftMargin: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + font.pointSize: 16 + anchors.bottomMargin: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Password") + echoMode: TextInput.Password + } + } RoundButton { id: createPassButton x: 34 -- cgit v1.2.3