diff --git a/app/icons/Globe.svg b/app/icons/Globe.svg new file mode 100644 index 000000000..f203aab54 --- /dev/null +++ b/app/icons/Globe.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index c8450836e..80f765389 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -55,5 +55,6 @@ X Mark.svg X Twitter.svg Youtube.svg + Globe.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index ec5fab41f..b9cdf868b 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -131,6 +131,7 @@ class MMStyle: public QObject Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT ) Q_PROPERTY( QUrl xTwitterIcon READ xTwitterIcon CONSTANT ) Q_PROPERTY( QUrl youtubeIcon READ youtubeIcon CONSTANT ) + Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT ) // Images Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT ) @@ -253,6 +254,7 @@ class MMStyle: public QObject QUrl waterResourcesIcon() {return QUrl( "qrc:/Water resources.svg" );} QUrl xTwitterIcon() {return QUrl( "qrc:/X Twitter.svg" );} QUrl youtubeIcon() {return QUrl( "qrc:/Youtube.svg" );} + QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );} QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); } QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); } diff --git a/app/qml/components/MMDrawer.qml b/app/qml/components/MMDrawer.qml index 7a2ad8f3e..0dace5731 100644 --- a/app/qml/components/MMDrawer.qml +++ b/app/qml/components/MMDrawer.qml @@ -17,6 +17,7 @@ Drawer { property alias picture: picture.source property alias title: title.text + property alias bigTitle: bigTitle.text property alias description: description.text property alias boundedDescription: boundedDescription.text property alias primaryButton: primaryButton.text @@ -55,16 +56,37 @@ Drawer { rightPadding: 20 * __dp bottomPadding: 20 * __dp - Image { - id: closeButton + Row { + width: parent.width + spacing: 10 * __dp + + Item { + id: emptyItem + + width: closeButton.width + height: 1 + } + + Text { + id: title + + anchors.verticalCenter: parent.verticalCenter + width: parent.width - emptyItem.width - closeButton.width - mainColumn.leftPadding - mainColumn.rightPadding - 2 * parent.spacing + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + font: __style.t2 + color: __style.forestColor + } + + Image { + id: closeButton - source: __style.closeButtonIcon - anchors.right: parent.right - anchors.rightMargin: 20 * __dp + source: __style.closeButtonIcon - MouseArea { - anchors.fill: parent - onClicked: control.visible = false + MouseArea { + anchors.fill: parent + onClicked: control.visible = false + } } } @@ -75,7 +97,7 @@ Drawer { } Text { - id: title + id: bigTitle anchors.horizontalCenter: parent.horizontalCenter font: __style.t1 diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml index a5f794c78..ad89a06f1 100644 --- a/app/qml/components/MMHeader.qml +++ b/app/qml/components/MMHeader.qml @@ -13,10 +13,8 @@ import QtQuick.Controls Row { id: root - /* translate in parent! */ - required property string headerTitle - /* -1 no step bar shown; 1, 2, 3 */ - property int step: -1 + property string headerTitle + property int step: -1 // -1 no step bar shown; 1, 2, 3 property bool backVisible: true property color backColor: __style.whiteColor property font titleFont: __style.t4 diff --git a/app/qml/components/MMLink.qml b/app/qml/components/MMLink.qml index f7ff33e8d..c407874fa 100644 --- a/app/qml/components/MMLink.qml +++ b/app/qml/components/MMLink.qml @@ -15,29 +15,43 @@ import "." Button { id: control - contentItem: Row { - anchors.centerIn: control - spacing: 10 * __dp - - Text { - id: text - - font: __style.t3 - text: control.text - color: control.enabled ? control.down || control.hovered ? __style.nightColor : __style.forestColor : __style.mediumGreenColor - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter - } + property url leftIcon: "" + property url rightIcon: "" + + height: 50 * __dp + + contentItem: Item { + Row { + anchors.centerIn: parent + spacing: 5 * __dp + + MMIcon { + source: control.leftIcon + color: text.color + } + + Text { + id: text + + font: __style.t3 + text: control.text + color: control.enabled ? control.down || control.hovered ? __style.nightColor : __style.forestColor : __style.mediumGreenColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } - MMIcon { - source: __style.arrowLinkRightIcon - color: text.color + MMIcon { + source: control.rightIcon + color: text.color + } } } background: Rectangle { + width: control.width + height: control.height color: __style.transparentColor } } diff --git a/app/qml/inputs/MMInputEditor.qml b/app/qml/inputs/MMInputEditor.qml index 91a6cecff..587adbd89 100644 --- a/app/qml/inputs/MMInputEditor.qml +++ b/app/qml/inputs/MMInputEditor.qml @@ -22,7 +22,7 @@ MMAbstractEditor { property bool isReadOnly: parent.readOnly ?? false property alias placeholderText: textField.placeholderText - readonly property alias text: textField.text + property alias text: textField.text signal editorValueChanged( var newValue, var isNull ) diff --git a/app/qml/inputs/MMPasswordEditor.qml b/app/qml/inputs/MMPasswordEditor.qml index a402a7538..5385c9da4 100644 --- a/app/qml/inputs/MMPasswordEditor.qml +++ b/app/qml/inputs/MMPasswordEditor.qml @@ -17,15 +17,9 @@ import "../components" MMAbstractEditor { id: root - property var parentValue: parent.value - property bool parentValueIsNull: parent.valueIsNull ?? false - property bool isReadOnly: parent.readOnly ?? false - property alias placeholderText: textField.placeholderText readonly property alias text: textField.text - signal editorValueChanged( var newValue, var isNull ) - hasFocus: textField.activeFocus content: TextField { @@ -34,7 +28,6 @@ MMAbstractEditor { anchors.fill: parent anchors.verticalCenter: parent.verticalCenter - text: root.parentValue color: root.enabled ? __style.nightColor : __style.mediumGreenColor placeholderTextColor: __style.nightAlphaColor font: __style.p5 diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml index 0e324d935..8f420d4b8 100644 --- a/app/qml/onboarding/MMAcceptInvitation.qml +++ b/app/qml/onboarding/MMAcceptInvitation.qml @@ -11,68 +11,111 @@ import QtQuick.Layouts import QtQuick.Controls import "../components" +import "../inputs" Page { id: root + required property string user + required property string workspace + signal backClicked signal continueClicked signal createWorkspaceClicked - Column { - spacing: 20 + Rectangle { + anchors.fill: parent + color: __style.lightGreenColor + } - MMHeader { - headerTitle: qsTr("Accept Invitation") + ScrollView { + width: parent.width + height: parent.height - onBackClicked: root.backClicked() - } + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOff + + Column { + id: mainColumn + + width: root.width + spacing: 20 * __dp + leftPadding: 20 * __dp + rightPadding: 20 * __dp + topPadding: 100 * __dp + bottomPadding: 20 * __dp - Item { - width: bg.width - height: bg.height + Item { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + height: bg.height - MMIcon { - id: bg - source: __style.acceptInvitationImage - } + Image { + id: bg - MMIcon { - id: fg - x: ( bg.width - fg.width ) / 2 + 7 - y: ( bg.height - fg.height ) / 2 + 5 - source: __style.acceptInvitationLogoImage - } - } + anchors.horizontalCenter: parent.horizontalCenter + source: __style.acceptInvitationImage - Label { + Image { + id: fg + x: ( bg.width - fg.width ) / 2 + 7 + y: ( bg.height - fg.height ) / 2 + 5 + source: __style.acceptInvitationLogoImage + } + } + } + + Text { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding text: qsTr("You have been invited to workspace") - font: __style.t1 + font: __style.h3 color: __style.forestColor - } + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + lineHeight: 1.2 + } - Label { - text: qsTr("User %1 has invited you to join his workspace").arg("andrej") - font: __style.p2 - } + Text { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + text: qsTr("User %1 has invited you to join his workspace").arg(root.user) + font: __style.p5 + color: __style.nightColor + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + lineHeight: 1.5 + } - Label { - text: "my-workspace-funny" - font: __style.p2 - } + Item { width: 1; height: 1 } - MMButton { - onClicked: root.continueClicked() - text: qsTr("Join workspace") - } + Text { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + text: root.workspace + font: __style.t1 + color: __style.nightColor + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + lineHeight: 1.5 + } - MMHlineText { - title: qsTr("or") - } + Item { width: 1; height: 50 } + + MMButton { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + text: qsTr("Join workspace") + + onClicked: root.continueClicked() + } + + MMHlineText { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + title: qsTr("or") + } + + MMLinkButton { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + text: qsTr("Create new workspace") - MMLinkButton { - onClicked: root.createWorkspaceClicked() - text: qsTr("Create new workspace") + onClicked: root.createWorkspaceClicked() + } } } } diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml index b3ca662e2..7a987b3ae 100644 --- a/app/qml/onboarding/MMCreateWorkspace.qml +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -11,38 +11,95 @@ import QtQuick.Layouts import QtQuick.Controls import "../components" +import "../inputs" Page { id: root signal continueClicked - Column { - MMHeader { - headerTitle: qsTr("Create Workspace") - step: 1 - backVisible: false - } + Rectangle { + anchors.fill: parent + color: __style.lightGreenColor + } - Label { - text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.") - font: __style.p5 - color: __style.forestColor - } + MMHeader { + id: header + + x: mainColumn.padding + y: mainColumn.padding + width: parent.width - 2 * mainColumn.padding + backVisible: false + step: 1 + + onBackClicked: root.backClicked() + } + + ScrollView { + width: parent.width + height: parent.height - header.height - bottomColumn.height - 40 * __dp + anchors.top: header.bottom + anchors.topMargin: 20 * __dp + + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOff + + Column { + id: mainColumn + + width: root.width + spacing: 20 * __dp + padding: 20 * __dp - MMInput { - title: qsTr("Workspace name") - placeholderText: qsTr("e.g. my-company") + Text { + width: parent.width - 2 * mainColumn.padding + text: qsTr("Create a workspace") + font: __style.h3 + color: __style.forestColor + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + lineHeight: 1.2 + } + + Text { + width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding + text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.") + font: __style.p5 + color: __style.nightColor + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + lineHeight: 1.5 + } + + Item { width: 1; height: 1 } + + MMInputEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Workspace name") + placeholderText: qsTr("Your Workspace") + } } + } + + Column { + id: bottomColumn + + width: root.width + spacing: 20 * __dp + padding: 20 * __dp + anchors.bottom: parent.bottom MMTextBubble { - title: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.") - description: qsTr("A good candidate for a workspace name is the name of your team or organisation.") + width: root.width - 2 * mainColumn.padding + title: "Tip from Mergin Maps" + description: "A good candidate for a workspace name is the name of your team or organisation" } MMButton { - onClicked: root.continueClicked() + width: parent.width - 2 * mainColumn.padding text: qsTr("Create workspace") + + onClicked: root.continueClicked() } } } diff --git a/app/qml/onboarding/MMLogin.qml b/app/qml/onboarding/MMLogin.qml index d5342d260..66f0f775c 100644 --- a/app/qml/onboarding/MMLogin.qml +++ b/app/qml/onboarding/MMLogin.qml @@ -11,11 +11,12 @@ import QtQuick.Layouts import QtQuick.Controls import "../components" +import "../inputs" Page { id: root - anchors.fill: parent + width: parent.width signal backClicked signal signInClicked @@ -23,73 +24,135 @@ Page { signal changeServerClicked signal forgotPasswordClicked - // TODO - lazy loaded? - MMDrawer { - id: changeServerDrawer + // background as Drawer design + Rectangle { + anchors.fill: parent + color: __style.whiteColor - title: qsTr("Change server") - primaryButton: qsTr("Confirm") - visible: false - specialComponent: MMInput { - title: qsTr("Server address") + Rectangle { + width: parent.width + height: 20 * __dp + color: __style.forestColor } - onPrimaryButtonClicked: { - changeServerButton.text = specialComponent.text - visible = false - root.changeServerClicked() + Rectangle { + width: parent.width + height: 40 * __dp + color: __style.whiteColor + radius: height / 2 } } - Column { - id: layout + MMHeader { + id: header - anchors.fill: parent + x: mainColumn.padding + y: mainColumn.padding + width: parent.width - 2 * mainColumn.padding + headerTitle: qsTr("Log In") + titleFont: __style.h3 + backColor: __style.lightGreenColor - MMHeader { - headerTitle: qsTr("Log In") - onBackClicked: root.backClicked() - } + onBackClicked: root.backClicked() + } - MMInput { - title: qsTr("Username") - } + ScrollView { + width: parent.width + height: parent.height - changeServerButton.height - header.height - 60 * __dp + anchors.top: header.bottom + anchors.topMargin: 20 * __dp - MMPasswordInput { - title: qsTr("Password") - regexp: '.*' - } + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOff - MMButton { - text: qsTr("Forgot password?") - transparent: true - onClicked: root.signInClicked() - } + Column { + id: mainColumn - MMButton { - text: qsTr("Sign in") + width: root.width + spacing: 20 * __dp + padding: 20 * __dp - onClicked: root.signInClicked() - } + Item { width: 1; height: 1 } - MMHlineText { - title: qsTr("Don't have an account?") - } + MMInputEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Username") + bgColor: __style.lightGreenColor + } - MMLinkButton { - text: qsTr("Sign up") + MMPasswordEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Password") + bgColor: __style.lightGreenColor + } - onClicked: root.signUpClicked() - } + MMLink { + width: parent.width - 2 * mainColumn.padding + height: 20 * __dp + text: qsTr("Forgot password?") + + onClicked: root.signInClicked() + } - MMLinkButton { - id: changeServerButton + Item { width: 1; height: 1 } + + MMButton { + width: parent.width - 2 * mainColumn.padding + text: qsTr("Sign in") + + onClicked: root.signInClicked() + } - text: "https://app.merginmaps.com/" + Item { width: 1; height: 1 } - onClicked: { - changeServerDrawer.visible = true + MMHlineText { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Don't have an account?") } + + MMLinkButton { + width: parent.width - 2 * mainColumn.padding + text: qsTr("Sign up") + + onClicked: root.signUpClicked() + } + } + } + + MMLink { + id: changeServerButton + + width: parent.width + height: 50 * __dp + anchors.bottom: parent.bottom + text: "https://app.merginmaps.com/" + leftIcon: __style.globeIcon + + onClicked: changeServerDrawer.visible = true + } + + MMDrawer { + id: changeServerDrawer + + property string newServerUrl + + title: qsTr("Change server") + primaryButton: qsTr("Confirm") + visible: false + specialComponent: MMInputEditor { + width: changeServerDrawer.width - 40 * __dp + title: qsTr("Server address") + bgColor: __style.lightGreenColor + text: changeServerButton.text + + onTextChanged: changeServerDrawer.newServerUrl = text + } + + onPrimaryButtonClicked: { + changeServerButton.text = changeServerDrawer.newServerUrl + visible = false + + root.changeServerClicked() } } } diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml index 53696f95a..e6c91e26c 100644 --- a/app/qml/onboarding/MMSignUp.qml +++ b/app/qml/onboarding/MMSignUp.qml @@ -16,66 +16,136 @@ import "../inputs" Page { id: root + width: parent.width + signal backClicked signal signInClicked signal signUpClicked + signal changeServerClicked + signal forgotPasswordClicked - Column { - id: layout - + // background as Drawer design + Rectangle { anchors.fill: parent + color: __style.whiteColor - MMHeader { - headerTitle: qsTr("Sign Up") - onBackClicked: root.backClicked() + Rectangle { + width: parent.width + height: 20 * __dp + color: __style.forestColor } - MMInput { - title: qsTr("Username") + Rectangle { + width: parent.width + height: 40 * __dp + color: __style.whiteColor + radius: height / 2 } + } + + MMHeader { + id: header + + x: mainColumn.padding + y: mainColumn.padding + width: parent.width - 2 * mainColumn.padding + headerTitle: qsTr("Sign Up") + titleFont: __style.h3 + backColor: __style.lightGreenColor + + onBackClicked: root.backClicked() + } + + ScrollView { + width: parent.width + 40 * __dp + height: parent.height - header.height - 40 * __dp + anchors.top: header.bottom + anchors.topMargin: 20 * __dp - MMPasswordInput { - id: password - title: qsTr("Password") - regexp: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,})' - errorMsg: qsTr("Password must contain at least 6 characters\nMinimum 1 number, uppercase and lowercase letter and special character.") - msgShowBehaviour: MMPasswordInput.Never - onTextEdited: { - msgShowBehaviour = MMPasswordInput.OnNotMatchingRegex + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOff + + Column { + id: mainColumn + + width: root.width + spacing: 20 * __dp + padding: 20 * __dp + + MMInputEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Username") + bgColor: __style.lightGreenColor } - } - MMPasswordInput { - id: confirmPassword - title: qsTr("Confirm Password") - errorMsg: qsTr("Passwords do not match") - onTextEdited: { - if (password.text === confirmPassword.text) - msgShowBehaviour = MMPasswordInput.Never - else - msgShowBehaviour = MMPasswordInput.Always + MMInputEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Email address") + bgColor: __style.lightGreenColor } - } - MMCheckBox { - // TODO external links - small: false - text: qsTr("I accept the terms and Conditions and Privacy Policy") - } + MMPasswordEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Password") + bgColor: __style.lightGreenColor + } - MMButton { - text: qsTr("Sign up") + MMPasswordEditor { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Confirm password") + bgColor: __style.lightGreenColor + } - onClicked: root.signUpClicked() - } + Row { + width: parent.width + spacing: 10 * __dp - MMHlineText { - title: qsTr("Already have an account?") - } - MMLinkButton { - text: qsTr("Sign in") + MMCheckBox { + id: checkbox + + width: 24 * __dp + anchors.verticalCenter: parent.verticalCenter + } + + Text { + width: parent.width - checkbox.width - parent.spacing - 2 * mainColumn.padding + anchors.verticalCenter: parent.verticalCenter + + text: qsTr("I accept the Mergin Terms and Conditions and Privacy Policy") + font: __style.p5 + color: __style.nightColor + linkColor: __style.forestColor + wrapMode: Text.WordWrap + lineHeight: 1.5 + + onLinkActivated: function(link) { + Qt.openUrlExternally(link) + } + } + } + + Item { width: 1; height: 1 } + + MMButton { + width: parent.width - 2 * mainColumn.padding + text: qsTr("Sign up") - onClicked: root.signInClicked() + onClicked: root.signUpClicked() + } + + Item { width: 1; height: 1 } + + MMHlineText { + width: parent.width - 2 * mainColumn.padding + title: qsTr("Already have an account?") + } + + MMLinkButton { + width: parent.width - 2 * mainColumn.padding + text: qsTr("Sign in") + + onClicked: root.signUpClicked() + } } } } diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 6fe9b87f3..63e48064a 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -62,7 +62,7 @@ ../app/qml/onboarding/MMLogin.qml ../app/qml/onboarding/MMOnboarding.qml ../app/qml/onboarding/MMSignUp.qml - ../app/qml/onboarding/MMWhichIndustry.qml + ../app/qml/onboarding/MMWhichIndustry.qml ../app/qml/components/MMHeader.qml ../app/qml/components/MMHlineText.qml ../app/qml/components/MMTextBubble.qml diff --git a/gallery/qml/IconBox.qml b/gallery/qml/IconBox.qml index 827d9a071..41450ab89 100644 --- a/gallery/qml/IconBox.qml +++ b/gallery/qml/IconBox.qml @@ -21,24 +21,22 @@ Column { required property var text property bool colorise: false - Label { - text: root.text + Text { + text: root.text } Rectangle { - width: 50 - height: 50 - border.color: "gray" - - MMIcon { - id: icon - - width: parent.width - height: parent.height - source: root.source - } + width: 50 + height: 50 + border.color: "gray" + MMIcon { + id: icon + width: parent.width + height: parent.height + source: root.source + } } Component.onCompleted: { diff --git a/gallery/qml/pages/ButtonsPage.qml b/gallery/qml/pages/ButtonsPage.qml index 81bb7d3c5..ab53d4e15 100644 --- a/gallery/qml/pages/ButtonsPage.qml +++ b/gallery/qml/pages/ButtonsPage.qml @@ -86,10 +86,14 @@ Column { anchors.fill: parent MMLink { text: "Tertriary" + width: 150 + rightIcon: __style.arrowLinkRightIcon onClicked: text = (text === "Clicked" ? "Tertriary" : "Clicked") } MMLink { text: "Disabled" + rightIcon: __style.arrowLinkRightIcon + width: 150 enabled: false } } diff --git a/gallery/qml/pages/DrawerPage.qml b/gallery/qml/pages/DrawerPage.qml index 8dec758a9..c0f31ea92 100644 --- a/gallery/qml/pages/DrawerPage.qml +++ b/gallery/qml/pages/DrawerPage.qml @@ -39,7 +39,7 @@ Page { id: drawer1 picture: __style.uploadImage - title: "Upload project to Margin?" + bigTitle: "Upload project to Margin?" description: "This project is currently not uploaded on Mergin. Upload it to Mergin in order to activate synchronization and collaboration." primaryButton: "Yes, Upload Project" secondaryButton: "No Cancel" @@ -52,7 +52,7 @@ Page { id: drawer2 picture: __style.reachedDataLimitImage - title: "You have reached a data limit" + bigTitle: "You have reached a data limit" primaryButton: "Manage Subscription" specialComponent: component.comp visible: true @@ -73,7 +73,7 @@ Page { id: drawer3 picture: __style.uploadImage - title: "Failed to synchronize your changes" + bigTitle: "Failed to synchronize your changes" description: "Your changes could not be sent to server, make sure you are connected to internet and have write access to this project." primaryButton: "Ok, I understand" boundedDescription: "Failed to push changes. Ask the project workspace owner to log in to their Mergin Maps dashboard for more information." diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml index 9a6b0c616..46ae33be7 100644 --- a/gallery/qml/pages/IconsPage.qml +++ b/gallery/qml/pages/IconsPage.qml @@ -26,7 +26,7 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 @@ -142,6 +142,10 @@ Column { text: "xMarkIcon" source: __style.xMarkIcon } + IconBox { + text: "globeIcon" + source: __style.globeIcon + } } } @@ -151,7 +155,7 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 @@ -205,7 +209,7 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 @@ -247,7 +251,7 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index ce29be52c..25a708561 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -128,7 +128,7 @@ ScrollView { } GroupBox { - title: "MMHeader (for Drawer)" + title: "MMHeader (bigger title)" width: page.width - 40 background: Rectangle { diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml index 510c617f8..17f23f72d 100644 --- a/gallery/qml/pages/OnboardingPage.qml +++ b/gallery/qml/pages/OnboardingPage.qml @@ -17,109 +17,126 @@ Page { id: pane function hideAll() { - acceptInvitation.visible = false - createWorkspace = false - howYouFoundUs = false - login = false - signUp = false - whichIndustry = false + acceptInvitation.visible = false + createWorkspace = false + howYouFoundUs = false + login = false + signUp = false + whichIndustry = false } Column { id: layout + padding: 20 + spacing: 10 - Label { + Text { text: "Onboarding (Login, Sign Up, ...)" + color: "green" } Button { onClicked: { - login.visible = true + login.visible = true } text: "Login" } Button { onClicked: { - signUp.visible = true + signUp.visible = true } text: "Sign Up" } Button { onClicked: { - createWorkspace.visible = true + acceptInvitation.visible = true } - text: "Create Workspace" + text: "Accept Invitation" } Button { onClicked: { - acceptInvitation.visible = true + createWorkspace.visible = true } - text: "Accept Invitation" + text: "Create Workspace" } Button { onClicked: { - howYouFoundUs.visible = true + howYouFoundUs.visible = true } text: "How You Found Us" } Button { onClicked: { - whichIndustry.visible = true + whichIndustry.visible = true } text: "Which Industry" } } - MMAcceptInvitation { - id: acceptInvitation - anchors.fill: parent - visible: false + MMLogin { + id: login + + anchors.fill: parent + visible: false - onBackClicked: {visible=false} + onSignInClicked: console.log("Sign in clicked") + onSignUpClicked: console.log("Sign up clicked") + onChangeServerClicked: console.log("Change server clicked") + onBackClicked: visible = false } - MMCreateWorkspace { - id: createWorkspace - anchors.fill: parent - visible: false + MMSignUp { + id: signUp + + anchors.fill: parent + visible: false - onContinueClicked: {visible=false} + onSignInClicked: console.log("Sign in clicked") + onSignUpClicked: console.log("Sign up clicked") + onBackClicked: visible = false } - MMHowYouFoundUs { - id: howYouFoundUs - anchors.fill: parent - visible: false + MMAcceptInvitation { + id: acceptInvitation + + anchors.fill: parent + visible: false + user: "Lubos" + workspace: "my-workspace.funny" - onBackClicked: {visible=false} + onBackClicked: visible = false + onContinueClicked: console.log("Join workspace clicked") + onCreateWorkspaceClicked: console.log("Create new workspace clicked") } - MMLogin { - id: login - anchors.fill: parent - visible: false + MMCreateWorkspace { + id: createWorkspace - onBackClicked: {visible=false} + anchors.fill: parent + visible: false + + onContinueClicked: visible = false } - MMSignUp { - id: signUp - anchors.fill: parent - visible: false - onBackClicked: {visible=false} + MMHowYouFoundUs { + id: howYouFoundUs + anchors.fill: parent + visible: false + + onBackClicked: {visible=false} } MMWhichIndustry { - id: whichIndustry - anchors.fill: parent - visible: false + id: whichIndustry + anchors.fill: parent + visible: false - onBackClicked: {visible=false} + onBackClicked: {visible=false} } }