diff options
29 files changed, 745 insertions, 19 deletions
@@ -31,7 +31,6 @@ Makefile* *build-* *.pro *.conf -*.qrc # Qt unit tests target_wrapper.* @@ -53,5 +52,4 @@ compile_commands.json *creator.user* # Assets -*.svg *.png diff --git a/components/icons/add-24px.svg b/components/icons/add-24px.svg new file mode 100644 index 0000000..ff2ae4c --- /dev/null +++ b/components/icons/add-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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file diff --git a/components/icons/arrow-back-24px.svg b/components/icons/arrow-back-24px.svg new file mode 100644 index 0000000..9d5f05f --- /dev/null +++ b/components/icons/arrow-back-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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
\ No newline at end of file diff --git a/components/icons/arrow-forward-24px.svg b/components/icons/arrow-forward-24px.svg new file mode 100644 index 0000000..842e7d0 --- /dev/null +++ b/components/icons/arrow-forward-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="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>
\ No newline at end of file diff --git a/components/icons/attachment-24px.svg b/components/icons/attachment-24px.svg new file mode 100644 index 0000000..b868484 --- /dev/null +++ b/components/icons/attachment-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="M18.5 16H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h12.5c1.38 0 2.5 1.12 2.5 2.5S20.88 13 19.5 13H9c-.55 0-1-.45-1-1s.45-1 1-1h9.5V9.5H9c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5h10.5c2.21 0 4-1.79 4-4s-1.79-4-4-4H7c-3.04 0-5.5 2.46-5.5 5.5s2.46 5.5 5.5 5.5h11.5V16z"/></svg>
\ No newline at end of file diff --git a/components/icons/check-box-outline-24px.svg b/components/icons/check-box-outline-24px.svg new file mode 100644 index 0000000..68d3447 --- /dev/null +++ b/components/icons/check-box-outline-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="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
\ No newline at end of file diff --git a/components/icons/chevron-right-24px.svg b/components/icons/chevron-right-24px.svg new file mode 100644 index 0000000..acabc29 --- /dev/null +++ b/components/icons/chevron-right-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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
\ No newline at end of file diff --git a/components/icons/close-24px.svg b/components/icons/close-24px.svg new file mode 100644 index 0000000..0fd6b0d --- /dev/null +++ b/components/icons/close-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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
\ No newline at end of file diff --git a/components/icons/email-24px.svg b/components/icons/email-24px.svg new file mode 100644 index 0000000..1ed4686 --- /dev/null +++ b/components/icons/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/components/icons/lock-24px.svg b/components/icons/lock-24px.svg new file mode 100644 index 0000000..1dbceea --- /dev/null +++ b/components/icons/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/components/icons/menu-24px.svg b/components/icons/menu-24px.svg new file mode 100644 index 0000000..770b192 --- /dev/null +++ b/components/icons/menu-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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file diff --git a/components/icons/photo_camera_24px.svg b/components/icons/photo_camera_24px.svg new file mode 100644 index 0000000..5a9866b --- /dev/null +++ b/components/icons/photo_camera_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="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"/></svg>
\ No newline at end of file diff --git a/components/icons/profile-24px.svg b/components/icons/profile-24px.svg new file mode 100644 index 0000000..beed9cb --- /dev/null +++ b/components/icons/profile-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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/></svg>
\ No newline at end of file diff --git a/components/icons/user-24px.svg b/components/icons/user-24px.svg new file mode 100644 index 0000000..3eff6de --- /dev/null +++ b/components/icons/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/features/CreateProfileForm.ui.qml b/features/CreateProfileForm.ui.qml new file mode 100644 index 0000000..6192a99 --- /dev/null +++ b/features/CreateProfileForm.ui.qml @@ -0,0 +1,210 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 + +Rectangle { + id: rectangle + color: "#fff" + + property alias backButton: backButton + property alias titleLabel: titleLabel + property alias skipButton: skipButton + property alias enterFullName: enterFullName + property alias userNameLabel: userNameLabel + property alias emailAddressLabel: emailAddressLabel + property alias startUsingKelakon: startUsingKelakon + + ToolBar { + id: toolbar + height: 56 + font.family: "Google Sans" + anchors.top: parent.top + anchors.topMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: "#fff" + } + + RowLayout { + anchors.fill: parent + spacing: 8 + + ToolButton { + id: backButton + icon.name: "back-icon" + icon.source: "/components/icons/arrow-back-24px.svg" + highlighted: true + } + Label { + id: titleLabel + text: qsTr("Create Profile") + font.weight: Font.Medium + wrapMode: Text.WordWrap + color: "#000" + font.family: "Google Sans" + font.pointSize: 20 + elide: Label.ElideRight + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + Layout.fillWidth: true + } + ToolButton { + id: skipButton + text: qsTr("Skip") + font.weight: Font.Medium + display: AbstractButton.TextOnly + font.family: "Google Sans" + font.pointSize: 14 + font.capitalization: Font.MixedCase + highlighted: true + } + } + } + RowLayout { + id: userEmail + height: 56 + anchors.topMargin: 16 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: usernameRowLayout.bottom + width: parent.width + spacing: 8 + + Image { + width: 24 + height: 24 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "/components/icons/email-24px.svg" + antialiasing: true + } + + Label { + id: emailAddressLabel + 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 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "/components/icons/profile-24px.svg" + antialiasing: true + } + + 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 + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: 56 + Layout.alignment: Qt.AlignVCenter + anchors.top: fullnameRowLayout.bottom + anchors.topMargin: 16 + + Image { + width: 24 + height: 24 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "/components/icons/user-24px.svg" + antialiasing: true + } + + TextField { + id: userNameLabel + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.rightMargin: 16 + Layout.leftMargin: 24 + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Username") + } + } + + RoundButton { + id: startUsingKelakon + x: 34 + y: 278 + text: qsTr("Start using kelakon") + font.family: "Google Sans" + font.capitalization: Font.MixedCase + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.bottom: parent.bottom + anchors.bottomMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + highlighted: true + Material.background: Material.primary + } + + Rectangle { + id: profilePicture + width: 80 + height: 80 + color: "#f0e6fc" + radius: 100 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: toolbar.bottom + anchors.topMargin: 32 + + RoundButton { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + flat: true + display: AbstractButton.IconOnly + icon.name: "camera-icon" + icon.source: "/components/icons/photo_camera_24px.svg" + icon.color: "#6D22E9" + } + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640} +} +##^##*/ + diff --git a/features/EmailForm.ui.qml b/features/EmailForm.ui.qml new file mode 100644 index 0000000..610d461 --- /dev/null +++ b/features/EmailForm.ui.qml @@ -0,0 +1,123 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 + +Rectangle { + id: rectangle + color: "#fff" + border.width: 0 + + property alias backButton: backButton + property alias instructionLabel: instructionLabel + property alias emailTextField: emailTextField + property alias loginButton: loginButton + + ToolBar { + id: toolbar + height: 56 + font.family: "Google Sans" + anchors.top: parent.top + anchors.topMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: "#FFF" + } + + RowLayout { + anchors.fill: parent + spacing: 8 + + ToolButton { + id: backButton + icon.name: "back-icon" + icon.source: "/components/icons/arrow-back-24px.svg" + highlighted: true + } + } + } + + Label { + id: instructionLabel + x: 16 + y: 398 + color: "#2b2626" + text: qsTr("Sign up") + font.letterSpacing: 0.25 + lineHeight: 1 + font.weight: Font.Bold + wrapMode: Text.WordWrap + anchors.bottom: emailLayout.top + anchors.bottomMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 88 + + font.family: "Google Sans" + font.pointSize: 34 + } + + RowLayout { + id: emailLayout + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.bottom: loginButton.top + anchors.bottomMargin: 16 + width: parent.width + height: 56 + spacing: 8 + + Image { + width: 24 + height: 24 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "/components/icons/email-24px.svg" + antialiasing: true + } + + TextField { + id: emailTextField + Layout.rightMargin: 16 + Layout.leftMargin: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + font.pointSize: 16 + font.family: "Google Sans" + Layout.fillWidth: true + placeholderText: qsTr("Email") + } + } + + RoundButton { + id: loginButton + text: qsTr("Next") + enabled: false + font.family: "Google Sans" + font.capitalization: Font.MixedCase + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.bottom: parent.bottom + anchors.bottomMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + highlighted: true + Material.background: Material.primary + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ + diff --git a/features/ExistingLoginForm.ui.qml b/features/ExistingLoginForm.ui.qml new file mode 100644 index 0000000..3785fea --- /dev/null +++ b/features/ExistingLoginForm.ui.qml @@ -0,0 +1,128 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 + +Rectangle { + id: rectangle + color: "#fff" + border.width: 0 + + property alias backButton: backButton + property alias passTextField: passTextField + property alias createPassButton: loginButton + + ToolBar { + id: toolbar + height: 56 + font.family: "Google Sans" + anchors.top: parent.top + anchors.topMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: "#FFF" + } + + RowLayout { + anchors.fill: parent + spacing: 8 + + ToolButton { + id: backButton + icon.name: "back-icon" + icon.source: "/components/icons/arrow-back-24px.svg" + highlighted: true + } + } + } + + Label { + x: 16 + y: 232 + color: "#2b2626" + text: qsTr("Welcome Back!") + anchors.bottom: userEmail.top + anchors.bottomMargin: 16 + font.letterSpacing: 0.25 + lineHeight: 1 + font.weight: Font.Bold + wrapMode: Text.WordWrap + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 88 + + font.family: "Google Sans" + font.pointSize: 34 + } + + Rectangle { + id: userEmail + y: 299 + height: 48 + anchors.right: parent.right + anchors.rightMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.bottom: passTextField.top + anchors.bottomMargin: 16 + + Label { + anchors.right: parent.right + anchors.rightMargin: 16 + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.verticalCenter: parent.verticalCenter + + text: qsTr("your@email.com") + font.family: "Google Sans" + font.pointSize: 16 + color: "#99000000" + } + } + + TextField { + id: passTextField + y: 362 + font.pointSize: 16 + anchors.bottom: loginButton.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 + } + + RoundButton { + id: loginButton + x: 34 + y: 278 + text: qsTr("Login") + font.family: "Google Sans" + font.capitalization: Font.MixedCase + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.bottom: parent.bottom + anchors.bottomMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + highlighted: true + Material.background: Material.primary + } +} + + + + +/*##^## Designer { + D{i:0;autoSize:true;height:480;width:640} +} + ##^##*/ diff --git a/features/HomeForm.ui.qml b/features/HomeForm.ui.qml index c44aac5..299cf77 100644 --- a/features/HomeForm.ui.qml +++ b/features/HomeForm.ui.qml @@ -5,7 +5,6 @@ import QtQuick.Layouts 1.12 Page { property alias menuButton: menuButton - property alias titleLabel: titleLabel property alias profileButton: profileButton property alias contentView: contentView @@ -19,10 +18,11 @@ Page { ToolButton { id: menuButton icon.name: "menu-button" + icon.source: "/components/icons/menu-24px.svg" highlighted: true } Label { - id: titleLabel + text: contentView.currentItem.title Layout.leftMargin: 16 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft @@ -36,6 +36,7 @@ Page { ToolButton { id: profileButton icon.name: "profile-button" + icon.source: "/components/icons/profile-24px.svg" highlighted: true } } diff --git a/features/LoginEmailForm.ui.qml b/features/LoginEmailForm.ui.qml index 7f57599..991da16 100644 --- a/features/LoginEmailForm.ui.qml +++ b/features/LoginEmailForm.ui.qml @@ -62,7 +62,7 @@ Page { sourceSize.width: 24 Layout.leftMargin: 16 fillMode: Image.PreserveAspectFit - source: "../../assets/email-24px.svg" + source: "/components/icons/email-24px.svg" antialiasing: true } @@ -123,7 +123,7 @@ Page { Material.background: Material.primary display: AbstractButton.IconOnly icon.name: "arrow-forward-icon" - icon.source: "../assets/arrow-forward-24px.svg" + icon.source: "/components/icons/arrow-forward-24px.svg" highlighted: true enabled: false } diff --git a/features/LoginForm.ui.qml b/features/LoginForm.ui.qml new file mode 100644 index 0000000..2b241f1 --- /dev/null +++ b/features/LoginForm.ui.qml @@ -0,0 +1,29 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 +import QtQuick.Layouts 1.12 + +Page { + property alias toolButton: toolButton + property alias contentView: contentView + + header: ToolBar { + background: Rectangle { + color: "#FAFFFFFF" + } + RowLayout { + ToolButton { + id: toolButton + icon.name: "back-button" + icon.source: "/components/icons/arrow-back-24px.svg" + highlighted: true + } + } + } + + StackView { + id: contentView + anchors.topMargin: 432 + anchors.fill: parent + } +} diff --git a/features/LoginPasswordForm.ui.qml b/features/LoginPasswordForm.ui.qml index dee7709..dba6752 100644 --- a/features/LoginPasswordForm.ui.qml +++ b/features/LoginPasswordForm.ui.qml @@ -63,7 +63,7 @@ Page { sourceSize.width: 24 Layout.leftMargin: 16 fillMode: Image.PreserveAspectFit - source: "../../assets/email-24px.svg" + source: "/components/icons/email-24px.svg" antialiasing: true } @@ -100,7 +100,7 @@ Page { sourceSize.width: 24 Layout.leftMargin: 16 fillMode: Image.PreserveAspectFit - source: "../../assets/lock-24px.svg" + source: "/components/icons/lock-24px.svg" antialiasing: true } @@ -161,7 +161,7 @@ Page { Material.background: Material.primary display: AbstractButton.IconOnly icon.name: "arrow-forward-icon" - icon.source: "../../assets/arrow-forward-24px.svg" + icon.source: "/components/icons/arrow-forward-24px.svg" highlighted: true enabled: false } diff --git a/features/PasswordForm.ui.qml b/features/PasswordForm.ui.qml new file mode 100644 index 0000000..b5d34a2 --- /dev/null +++ b/features/PasswordForm.ui.qml @@ -0,0 +1,159 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 + +Rectangle { + id: rectangle + color: "#fff" + border.width: 0 + + property alias backButton: backButton + property alias instructionLabel: instructionLabel + property alias userEmail: userEmail + property alias passTextField: passTextField + property alias createPassButton: createPassButton + property alias emailAddressLabel: emailAddressLabel + + ToolBar { + id: toolbar + height: 56 + font.family: "Google Sans" + anchors.top: parent.top + anchors.topMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: "#FFF" + } + + RowLayout { + anchors.fill: parent + spacing: 8 + + ToolButton { + id: backButton + icon.name: "back-icon" + icon.source: "/components/icons/arrow-back-24px.svg" + highlighted: true + } + } + } + + Label { + id: instructionLabel + x: 16 + y: 232 + color: "#2b2626" + text: qsTr("Create password") + anchors.bottom: userEmail.top + anchors.bottomMargin: 16 + font.letterSpacing: 0.25 + lineHeight: 1 + font.weight: Font.Bold + wrapMode: Text.WordWrap + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 88 + + font.family: "Google Sans" + font.pointSize: 34 + } + + RowLayout { + id: userEmail + height: 56 + anchors.bottom: passTextFieldLayout.top + anchors.bottomMargin: 16 + anchors.horizontalCenterOffset: 0 + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + spacing: 8 + + Image { + width: 24 + height: 24 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + Layout.alignment: Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + source: "/components/icons/email-24px.svg" + antialiasing: true + } + + Label { + id: emailAddressLabel + 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" + } + } + RowLayout { + id: passTextFieldLayout + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: createPassButton.top + anchors.bottomMargin: 16 + width: parent.width + spacing: 8 + height: 56 + + Image { + width: 24 + height: 24 + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.leftMargin: 16 + fillMode: Image.PreserveAspectFit + source: "/components/icons/lock-24px.svg" + antialiasing: true + } + + TextField { + id: passTextField + 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 + y: 278 + text: qsTr("Next") + enabled: false + font.family: "Google Sans" + font.capitalization: Font.MixedCase + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.bottom: parent.bottom + anchors.bottomMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + highlighted: true + Material.background: Material.primary + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ + diff --git a/features/ProfileEditForm.ui.qml b/features/ProfileEditForm.ui.qml index e6777d0..aa907a7 100644 --- a/features/ProfileEditForm.ui.qml +++ b/features/ProfileEditForm.ui.qml @@ -26,7 +26,7 @@ Page { ToolButton { id: backButton icon.name: "back-button" - icon.source: "../../assets/arrow-back-24px.svg" + icon.source: "/components/icons/arrow-back-24px.svg" highlighted: true } Label { @@ -85,7 +85,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/profile-24px.svg" + source: "/components/icons/profile-24px.svg" antialiasing: true } @@ -118,7 +118,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/user-24px.svg" + source: "/components/icons/user-24px.svg" antialiasing: true } @@ -152,7 +152,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/email-24px.svg" + source: "/components/icons/email-24px.svg" antialiasing: true } diff --git a/features/ProfileForm.ui.qml b/features/ProfileForm.ui.qml index f365740..74cb183 100644 --- a/features/ProfileForm.ui.qml +++ b/features/ProfileForm.ui.qml @@ -42,7 +42,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/profile-24px.svg" + source: "/components/icons/profile-24px.svg" antialiasing: true } @@ -75,7 +75,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/user-24px.svg" + source: "/components/icons/user-24px.svg" antialiasing: true } @@ -109,7 +109,7 @@ Page { Layout.leftMargin: 16 Layout.alignment: Qt.AlignVCenter fillMode: Image.PreserveAspectFit - source: "../../assets/email-24px.svg" + source: "/components/icons/email-24px.svg" antialiasing: true } diff --git a/features/TaskDetailForm.ui.qml b/features/TaskDetailForm.ui.qml index c227a1c..48e3a49 100644 --- a/features/TaskDetailForm.ui.qml +++ b/features/TaskDetailForm.ui.qml @@ -54,7 +54,7 @@ Page { sourceSize.height: 24 sourceSize.width: 24 Layout.leftMargin: 16 - source: "../../assets/attachment-24px.svg" + source: "/components/icons/attachment-24px.svg" } ItemDelegate { id: itemDelegate diff --git a/features/TaskForm.ui.qml b/features/TaskForm.ui.qml index 57cfbce..50ae148 100644 --- a/features/TaskForm.ui.qml +++ b/features/TaskForm.ui.qml @@ -76,7 +76,7 @@ GridLayout { sourceSize.height: 24 sourceSize.width: 24 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - source: "/assets/chevron-right-24px.svg" + source: "/components/icons/chevron-right-24px.svg" } } } diff --git a/features/TaskListForm.ui.qml b/features/TaskListForm.ui.qml index 0016bb8..61579c9 100644 --- a/features/TaskListForm.ui.qml +++ b/features/TaskListForm.ui.qml @@ -32,7 +32,7 @@ Page { anchors.right: parent.right anchors.rightMargin: 8 highlighted: true - icon.source: "../assets/add-24px.svg" + icon.source: "/components/icons/add-24px.svg" height: 64 width: 64 } diff --git a/features/UsernameForm.ui.qml b/features/UsernameForm.ui.qml new file mode 100644 index 0000000..5412533 --- /dev/null +++ b/features/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: "/components/icons/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") + } +} diff --git a/material-design-icons.qrc b/material-design-icons.qrc new file mode 100644 index 0000000..e08b3b8 --- /dev/null +++ b/material-design-icons.qrc @@ -0,0 +1,16 @@ +<RCC> + <qresource prefix="/"> + <file>components/icons/add-24px.svg</file> + <file>components/icons/arrow-back-24px.svg</file> + <file>components/icons/arrow-forward-24px.svg</file> + <file>components/icons/attachment-24px.svg</file> + <file>components/icons/check-box-outline-24px.svg</file> + <file>components/icons/chevron-right-24px.svg</file> + <file>components/icons/email-24px.svg</file> + <file>components/icons/lock-24px.svg</file> + <file>components/icons/menu-24px.svg</file> + <file>components/icons/photo_camera_24px.svg</file> + <file>components/icons/profile-24px.svg</file> + <file>components/icons/user-24px.svg</file> + </qresource> +</RCC> |
