diff options
-rw-r--r-- | assets/email-24px.svg | 1 | ||||
-rw-r--r-- | assets/lock-24px.svg | 1 | ||||
-rw-r--r-- | assets/user-24px.svg | 15 | ||||
-rw-r--r-- | kelakon.qrc | 5 | ||||
-rw-r--r-- | pages/CreateProfileForm.ui.qml | 112 | ||||
-rw-r--r-- | pages/PasswordForm.ui.qml | 81 | ||||
-rw-r--r-- | pages/Username.qml | 4 | ||||
-rw-r--r-- | pages/UsernameForm.ui.qml | 35 |
8 files changed, 190 insertions, 64 deletions
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 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
\ No newline at end of file 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 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
\ No newline at end of file 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 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 57.1 (83088) - https://sketch.com --> + <title>username-24</title> + <desc>Created with Sketch.</desc> + <defs> + <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 L17,22 L17,20 L12,20 C7.66,20 4,16.34 4,12 C4,7.66 7.66,4 12,4 C16.34,4 20,7.66 20,12 L20,13.43 C20,14.22 19.29,15 18.5,15 C17.71,15 17,14.22 17,13.43 L17,12 C17,9.24 14.76,7 12,7 C9.24,7 7,9.24 7,12 C7,14.76 9.24,17 12,17 C13.38,17 14.64,16.44 15.54,15.53 C16.19,16.42 17.31,17 18.5,17 C20.47,17 22,15.4 22,13.43 L22,12 C22,6.48 17.52,2 12,2 Z M12,15 C10.34,15 9,13.66 9,12 C9,10.34 10.34,9 12,9 C13.66,9 15,10.34 15,12 C15,13.66 13.66,15 12,15 Z" id="path-1"></path> + </defs> + <g id="username-24" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <mask id="mask-2" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <use id="icon/communication/alternate_email_24px" fill-opacity="0.9" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use> + </g> +</svg>
\ No newline at end of file diff --git a/kelakon.qrc b/kelakon.qrc index 3c41d42..d6837c0 100644 --- a/kelakon.qrc +++ b/kelakon.qrc @@ -27,5 +27,10 @@ <file>assets/chevron-right-24px.svg</file> <file>assets/add-24px.svg</file> <file>assets/profile-24px.svg</file> + <file>pages/Username.qml</file> + <file>pages/UsernameForm.ui.qml</file> + <file>assets/user-24px.svg</file> + <file>assets/email-24px.svg</file> + <file>assets/lock-24px.svg</file> </qresource> </RCC> diff --git a/pages/CreateProfileForm.ui.qml b/pages/CreateProfileForm.ui.qml index 76f0da9..45087e1 100644 --- a/pages/CreateProfileForm.ui.qml +++ b/pages/CreateProfileForm.ui.qml @@ -61,44 +61,92 @@ Rectangle { } } } - Rectangle { + RowLayout { id: userEmail - height: 48 - anchors.top: profilePicture.bottom - anchors.topMargin: 16 - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 + height: 56 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: usernameRowLayout.bottom + width: parent.width + spacing: 8 + + 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.rightMargin: 16 + Layout.leftMargin: 24 + verticalAlignment: Text.AlignVCenter font.family: "Google Sans" font.pointSize: 16 color: "#99000000" } } + RowLayout { + id: fullnameRowLayout + height: 56 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: profilePicture.bottom + anchors.topMargin: 32 + width: parent.width + Image { + width: 24 + height: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/profile-24px.svg" + antialiasing: true + } - TextField { - id: enterFullName - anchors.top: userEmail.bottom + TextField { + id: enterFullName + Layout.rightMargin: 16 + 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.horizontalCenter: parent.horizontalCenter + width: parent.width + Layout.alignment: Qt.AlignVCenter + anchors.top: fullnameRowLayout.bottom anchors.topMargin: 16 - font.pointSize: 16 - font.family: "Google Sans" - Layout.fillWidth: true - placeholderText: qsTr("Full name") - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.left: parent.left - anchors.leftMargin: 16 - Layout.maximumHeight: 56 + + Image { + width: 24 + height: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "../assets/user-24px.svg" + antialiasing: true + } + + TextField { + Layout.rightMargin: 16 + Layout.leftMargin: 24 + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Username") + Layout.alignment: Qt.AlignVCenter + } } RoundButton { @@ -141,11 +189,9 @@ 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} } - ##^##*/ +##^##*/ + diff --git a/pages/PasswordForm.ui.qml b/pages/PasswordForm.ui.qml index 887bf01..8936ccd 100644 --- a/pages/PasswordForm.ui.qml +++ b/pages/PasswordForm.ui.qml @@ -63,48 +63,68 @@ 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.horizontalCenterOffset: 0 + 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" } } - - 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 @@ -124,10 +144,9 @@ Rectangle { } } - - - -/*##^## Designer { +/*##^## +Designer { D{i:0;autoSize:true;height:480;width:640} } - ##^##*/ +##^##*/ + 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") + } +} |