From 56ab85c2f59f895c2cfc07a07ece49f230ff180c Mon Sep 17 00:00:00 2001 From: PeterPetrik Date: Fri, 8 Dec 2023 07:07:11 +0100 Subject: [PATCH 01/19] onboarding 1 --- app/qml/onboarding/MMAcceptInvitation.qml | 22 +++++++ app/qml/onboarding/MMCreateWorkspace.qml | 22 +++++++ app/qml/onboarding/MMHowYouFoundUs.qml | 22 +++++++ app/qml/onboarding/MMLogin.qml | 44 ++++++++++++++ app/qml/onboarding/MMOnboarding.qml | 74 +++++++++++++++++++++++ app/qml/onboarding/MMOnboardingHeader.qml | 44 ++++++++++++++ app/qml/onboarding/MMSignUp.qml | 35 +++++++++++ app/qml/onboarding/MMWhichIndustry.qml | 21 +++++++ gallery/qml.qrc | 9 +++ gallery/qml/Main.qml | 11 +++- gallery/qml/pages/OnboardingPage.qml | 53 ++++++++++++++++ 11 files changed, 354 insertions(+), 3 deletions(-) create mode 100644 app/qml/onboarding/MMAcceptInvitation.qml create mode 100644 app/qml/onboarding/MMCreateWorkspace.qml create mode 100644 app/qml/onboarding/MMHowYouFoundUs.qml create mode 100644 app/qml/onboarding/MMLogin.qml create mode 100644 app/qml/onboarding/MMOnboarding.qml create mode 100644 app/qml/onboarding/MMOnboardingHeader.qml create mode 100644 app/qml/onboarding/MMSignUp.qml create mode 100644 app/qml/onboarding/MMWhichIndustry.qml create mode 100644 gallery/qml/pages/OnboardingPage.qml diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml new file mode 100644 index 000000000..d70e57306 --- /dev/null +++ b/app/qml/onboarding/MMAcceptInvitation.qml @@ -0,0 +1,22 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + + ColumnLayout { + MMOnboardingHeader { + headerTitle: tr("Accept Invitation") + } + } +} diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml new file mode 100644 index 000000000..d113e7251 --- /dev/null +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -0,0 +1,22 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + + ColumnLayout { + MMOnboardingHeader { + headerTitle: tr("Create Workspace") + } + } +} diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml new file mode 100644 index 000000000..0e22e19cf --- /dev/null +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -0,0 +1,22 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + + ColumnLayout { + MMOnboardingHeader { + headerTitle: tr("HowYouFoundUs") + } + } +} diff --git a/app/qml/onboarding/MMLogin.qml b/app/qml/onboarding/MMLogin.qml new file mode 100644 index 000000000..705095dc5 --- /dev/null +++ b/app/qml/onboarding/MMLogin.qml @@ -0,0 +1,44 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + + signal signInClicked() + signal signUpClicked() + signal changeServerClicked() + + ColumnLayout { + + MMOnboardingHeader { + headerTitle: tr("Sign In") + } + + ToolButton { + onClicked: root.signInClicked() + text: "Sign in" + } + + ToolButton { + onClicked: root.signUpClicked() + text: "Sign up" + } + + ToolButton { + onClicked: root.changeServerClicked() + text: "Change Server" + } + } + + +} diff --git a/app/qml/onboarding/MMOnboarding.qml b/app/qml/onboarding/MMOnboarding.qml new file mode 100644 index 000000000..fbacd818e --- /dev/null +++ b/app/qml/onboarding/MMOnboarding.qml @@ -0,0 +1,74 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Item { + id: root + + signal closeOnboarding() + + Component { + id: mmsignup + MMSignUp + { + onBackClicked: { + console.log("Back Clicked on Sign Up Page") + stackView.pop() + } + + onSignInClicked: { + console.log("Sign In Clicked on Sign Up Page") + stackView.pop() + } + + onSignUpClicked: { + console.log("Sign Up Clicked on Sign Up Page") + stackView.push( mmcreateworkspace ) + } + } + } + + + MMLogin { id: mmlogin } + MMAcceptInvitation { id: mmacceptinvitation } + MMCreateWorkspace { id: mmcreateworkspace } + MMHowYouFoundUs { id: mmhowyoufoundus } + MMWhichIndustry { id: mmwhichindustry } + + StackView { + id: stackView + anchors.fill: parent + initialItem: mmlogin + } + + Connections { + target: mmlogin + + function onBackClicked( ) { + console.log("Back Clicked on Login Page") + root.closeOnboarding() + } + + function onSignInClicked( ) { + console.log("Sign In Clicked on Login Page") + } + + function onSignUpClicked( ) { + console.log("Sign Up Clicked on Login Page") + stackView.push( mmsignup, {} ) + } + + function onChangeServerClicked( ) { + console.log("Change Server Clicked on Login Page") + } + } +} diff --git a/app/qml/onboarding/MMOnboardingHeader.qml b/app/qml/onboarding/MMOnboardingHeader.qml new file mode 100644 index 000000000..4c25236fc --- /dev/null +++ b/app/qml/onboarding/MMOnboardingHeader.qml @@ -0,0 +1,44 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Item { + id: root + + signal backClicked() + + /* translate in parent! */ + required property var headerTitle + + /* 0 no step bar shown; 1, 2, 3 */ + property int step: 0 + + ColumnLayout { + RowLayout { + Label { + text: headerTitle + } + + ToolButton { + onClicked: root.backClicked() + text: "<" + } + + ProgressBar { + visible: step > 0 + from: 0 + to: 2 + value: step - 1 + } + } + } +} diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml new file mode 100644 index 000000000..10c73e93d --- /dev/null +++ b/app/qml/onboarding/MMSignUp.qml @@ -0,0 +1,35 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + + signal signInClicked() + signal signUpClicked() + + ColumnLayout { + MMOnboardingHeader { + headerTitle: tr("Sign Up") + } + + ToolButton { + onClicked: root.signInClicked() + text: "Sign in" + } + + ToolButton { + onClicked: root.signUpClicked() + text: "Sign up" + } + } +} diff --git a/app/qml/onboarding/MMWhichIndustry.qml b/app/qml/onboarding/MMWhichIndustry.qml new file mode 100644 index 000000000..2c857ce0b --- /dev/null +++ b/app/qml/onboarding/MMWhichIndustry.qml @@ -0,0 +1,21 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Page { + id: root + ColumnLayout { + MMOnboardingHeader { + headerTitle: tr("Which industry") + } + } +} diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 8127f6ea2..19871547a 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -51,5 +51,14 @@ ../app/qml/inputs/MMInputEditor.qml ../app/qml/inputs/MMPasswordEditor.qml ../app/qml/inputs/MMSliderEditor.qml + qml/pages/OnboardingPage.qml + ../app/qml/onboarding/MMOnboardingHeader.qml + ../app/qml/onboarding/MMAcceptInvitation.qml + ../app/qml/onboarding/MMCreateWorkspace.qml + ../app/qml/onboarding/MMHowYouFoundUs.qml + ../app/qml/onboarding/MMLogin.qml + ../app/qml/onboarding/MMOnboarding.qml + ../app/qml/onboarding/MMSignUp.qml + ../app/qml/onboarding/MMWhichIndustry.qml diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index 2bf7d479c..02f21f180 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,7 +8,6 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtCore import QtQuick import QtQuick.Layouts @@ -90,7 +91,7 @@ ApplicationWindow { onClicked: { window.currentPageSource = model.source listView.currentIndex = index - if( __isMobile ) + if (__isMobile) stackView.push("qrc:/qml/pages/" + model.source) else stackView.push("file://" + _qmlWrapperPath + model.source) @@ -152,6 +153,10 @@ ApplicationWindow { title: "Project items" source: "ProjectItemsPage.qml" } + ListElement { + title: "Onboarding" + source: "OnboardingPage.qml" + } } ScrollIndicator.vertical: ScrollIndicator {} @@ -164,7 +169,7 @@ ApplicationWindow { initialItem: Loader { id: mainLoader - source: ( __isMobile ? "qrc:/qml/pages/" : ("file://" + _qmlWrapperPath ) ) + currentPageSource + source: (__isMobile ? "qrc:/qml/pages/" : ("file://" + _qmlWrapperPath)) + currentPageSource scale: 1.0 } } diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml new file mode 100644 index 000000000..1143056c7 --- /dev/null +++ b/gallery/qml/pages/OnboardingPage.qml @@ -0,0 +1,53 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +import "../../app/qml/onboarding" + +Page { + id: pane + + Component { + id: onboarding + MMOnboarding { + anchors.fill: parent + + onCloseOnboarding: { + loader.active = false + } + } + } + + ColumnLayout { + id: layout + + Label { + id: label + text: "Onboarding (Login, Sign Up)" + } + + ToolButton { + onClicked: { + console.log("Onboarding started") + loader.active = true + } + text: "Start Here (Login)!" + } + } + + Loader { + id: loader + sourceComponent: onboarding + anchors.fill: parent + active: false + } +} From 4eb41dd5b508e2d4ee15a1e6838521da6392c671 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Fri, 8 Dec 2023 15:39:22 +0100 Subject: [PATCH 02/19] another iteration --- app/qml/onboarding/MMAcceptInvitation.qml | 25 +++- app/qml/onboarding/MMChangeServerButton.qml | 19 +++ app/qml/onboarding/MMCreateWorkspace.qml | 27 +++- app/qml/onboarding/MMHowYouFoundUs.qml | 20 ++- app/qml/onboarding/MMLogin.qml | 80 +++++++++-- app/qml/onboarding/MMOnboarding.qml | 132 +++++++++++++------ app/qml/onboarding/MMOnboardingHeader.qml | 48 +++---- app/qml/onboarding/MMOnboardingHlineText.qml | 34 +++++ app/qml/onboarding/MMSignUp.qml | 69 +++++++--- app/qml/onboarding/MMWhichIndustry.qml | 21 ++- gallery/qml.qrc | 2 + gallery/qml/pages/OnboardingPage.qml | 9 +- 12 files changed, 374 insertions(+), 112 deletions(-) create mode 100644 app/qml/onboarding/MMChangeServerButton.qml create mode 100644 app/qml/onboarding/MMOnboardingHlineText.qml diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml index d70e57306..c7bd548e9 100644 --- a/app/qml/onboarding/MMAcceptInvitation.qml +++ b/app/qml/onboarding/MMAcceptInvitation.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,7 +8,6 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls @@ -14,9 +15,25 @@ import QtQuick.Controls Page { id: root + signal backClicked + signal continueClicked + signal createWorkspaceClicked + ColumnLayout { - MMOnboardingHeader { - headerTitle: tr("Accept Invitation") - } + MMOnboardingHeader { + headerTitle: qsTr("Accept Invitation") + + onBackClicked: root.backClicked() + } + + ToolButton { + onClicked: root.continueClicked() + text: qsTr("Continue") + } + + ToolButton { + onClicked: root.createWorkspaceClicked() + text: qsTr("Create Workspace") + } } } diff --git a/app/qml/onboarding/MMChangeServerButton.qml b/app/qml/onboarding/MMChangeServerButton.qml new file mode 100644 index 000000000..0e058eb1f --- /dev/null +++ b/app/qml/onboarding/MMChangeServerButton.qml @@ -0,0 +1,19 @@ + +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Button { + id: root + + // TODO + text: "https://app.merginmaps.com" +} diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml index d113e7251..8c85053e8 100644 --- a/app/qml/onboarding/MMCreateWorkspace.qml +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,7 +8,6 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls @@ -14,9 +15,27 @@ import QtQuick.Controls Page { id: root + signal continueClicked + ColumnLayout { - MMOnboardingHeader { - headerTitle: tr("Create Workspace") - } + MMOnboardingHeader { + headerTitle: qsTr("Create Workspace") + step: 1 + backVisible: false + } + + Label { + text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.") + } + + Label { + // TODO + text: qsTr("A good candidate for a workspace name is the name of your team or organisation.") + } + + ToolButton { + onClicked: root.continueClicked() + text: qsTr("Continue") + } } } diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index 0e22e19cf..b6b621380 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,7 +8,6 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls @@ -14,9 +15,20 @@ import QtQuick.Controls Page { id: root + signal backClicked + signal continueClicked + ColumnLayout { - MMOnboardingHeader { - headerTitle: tr("HowYouFoundUs") - } + MMOnboardingHeader { + headerTitle: qsTr("HowYouFoundUs") + step: 2 + + onBackClicked: root.backClicked() + } + + ToolButton { + onClicked: root.continueClicked() + text: qsTr("Continue") + } } } diff --git a/app/qml/onboarding/MMLogin.qml b/app/qml/onboarding/MMLogin.qml index 705095dc5..088e1aefc 100644 --- a/app/qml/onboarding/MMLogin.qml +++ b/app/qml/onboarding/MMLogin.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,39 +8,89 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" Page { id: root - signal signInClicked() - signal signUpClicked() - signal changeServerClicked() + anchors.fill: parent + + signal backClicked + signal signInClicked + signal signUpClicked + signal changeServerClicked + signal forgotPasswordClicked + + // TODO - lazy loaded? + MMDrawer { + id: changeServerDrawer + + title: qsTr("Change server") + primaryButton: qsTr("Confirm") + visible: false + specialComponent: MMInput { + title: qsTr("Server address") + } + + onPrimaryButtonClicked: { + changeServerButton.text = specialComponent.text + visible = false + root.changeServerClicked() + } + } ColumnLayout { + id: layout + + anchors.fill: parent MMOnboardingHeader { - headerTitle: tr("Sign In") + headerTitle: qsTr("Log In") + Layout.fillWidth: true + onBackClicked: root.backClicked() + } + + MMInput { + title: qsTr("Username") } - ToolButton { + MMPasswordInput { + 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.") + } + + MMButton { + text: qsTr("Forgot password?") + transparent: true onClicked: root.signInClicked() - text: "Sign in" } - ToolButton { - onClicked: root.signUpClicked() - text: "Sign up" + MMButton { + text: qsTr("Sign in") + + onClicked: root.signInClicked() } - ToolButton { - onClicked: root.changeServerClicked() - text: "Change Server" + MMOnboardingHlineText { + title: qsTr("Don't have an account?") } - } + MMLinkButton { + text: qsTr("Sign up") + onClicked: root.signUpClicked() + } + + MMChangeServerButton { + id: changeServerButton + + onClicked: { + changeServerDrawer.visible = true + } + } + } } diff --git a/app/qml/onboarding/MMOnboarding.qml b/app/qml/onboarding/MMOnboarding.qml index fbacd818e..3b0a208e6 100644 --- a/app/qml/onboarding/MMOnboarding.qml +++ b/app/qml/onboarding/MMOnboarding.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,7 +8,6 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls @@ -14,61 +15,110 @@ import QtQuick.Controls Item { id: root - signal closeOnboarding() + signal backClicked + signal closeOnboarding + signal signInRequested + signal signUpRequested + signal createWorkspaceRequested + signal submitWorkspaceInfoRequested Component { - id: mmsignup - MMSignUp - { - onBackClicked: { - console.log("Back Clicked on Sign Up Page") - stackView.pop() - } - - onSignInClicked: { - console.log("Sign In Clicked on Sign Up Page") - stackView.pop() - } - - onSignUpClicked: { - console.log("Sign Up Clicked on Sign Up Page") - stackView.push( mmcreateworkspace ) - } - } + id: mmsignup + MMSignUp { + onBackClicked: { + stackView.pop() + } + + onSignInClicked: { + stackView.pop() + } + + onSignUpClicked: { + // TODO depends on invitations either create or accept invitation page + stackView.push(mmcreateworkspace) + // stackView.push(mmacceptinvitation) + } + } } + Component { + id: mmlogin + MMLogin { + onBackClicked: { + root.closeOnboarding() + } + + onSignInClicked: { + root.signInRequested() + } - MMLogin { id: mmlogin } - MMAcceptInvitation { id: mmacceptinvitation } - MMCreateWorkspace { id: mmcreateworkspace } - MMHowYouFoundUs { id: mmhowyoufoundus } - MMWhichIndustry { id: mmwhichindustry } + onSignUpClicked: { + stackView.push(mmsignup, {}) + } - StackView { - id: stackView - anchors.fill: parent - initialItem: mmlogin + onChangeServerClicked: { + + } + } + } + + Component { + id: mmacceptinvitation + MMAcceptInvitation { + onBackClicked: { + stackView.pop() + } + + onCreateWorkspaceClicked: { + stackView.push(mmcreateworkspace, {}) + } + + onContinueClicked: { + root.closeOnboarding() + } + } } - Connections { - target: mmlogin + Component { + id: mmcreateworkspace + MMCreateWorkspace { + + // no back button + onContinueClicked: { + stackView.push(mmhowyoufoundus, {}) + } + } + } - function onBackClicked( ) { - console.log("Back Clicked on Login Page") - root.closeOnboarding() + Component { + id: mmhowyoufoundus + MMHowYouFoundUs { + onBackClicked: { + stackView.pop() } - function onSignInClicked( ) { - console.log("Sign In Clicked on Login Page") + onContinueClicked: { + stackView.push(mmwhichindustry, {}) } + } + } - function onSignUpClicked( ) { - console.log("Sign Up Clicked on Login Page") - stackView.push( mmsignup, {} ) + Component { + id: mmwhichindustry + MMWhichIndustry { + onBackClicked: { + stackView.pop() } - function onChangeServerClicked( ) { - console.log("Change Server Clicked on Login Page") + onContinueClicked: { + root.submitWorkspaceInfoRequested() } + } + } + + StackView { + id: stackView + anchors.fill: parent + initialItem: mmlogin } } diff --git a/app/qml/onboarding/MMOnboardingHeader.qml b/app/qml/onboarding/MMOnboardingHeader.qml index 4c25236fc..4d5ffbe00 100644 --- a/app/qml/onboarding/MMOnboardingHeader.qml +++ b/app/qml/onboarding/MMOnboardingHeader.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,39 +8,37 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls -Item { +RowLayout { id: root - signal backClicked() + signal backClicked /* translate in parent! */ required property var headerTitle - /* 0 no step bar shown; 1, 2, 3 */ - property int step: 0 - - ColumnLayout { - RowLayout { - Label { - text: headerTitle - } - - ToolButton { - onClicked: root.backClicked() - text: "<" - } - - ProgressBar { - visible: step > 0 - from: 0 - to: 2 - value: step - 1 - } - } + /* -1 no step bar shown; 1, 2, 3 */ + property int step: -1 + + property bool backVisible: true + + RoundButton { + visible: backVisible + onClicked: root.backClicked() + text: "<" + } + + Label { + text: headerTitle + } + + ProgressBar { + visible: step > 0 + from: 0 + to: 3 + value: step > 0 ? step : 0 } } diff --git a/app/qml/onboarding/MMOnboardingHlineText.qml b/app/qml/onboarding/MMOnboardingHlineText.qml new file mode 100644 index 000000000..23231a859 --- /dev/null +++ b/app/qml/onboarding/MMOnboardingHlineText.qml @@ -0,0 +1,34 @@ + +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +RowLayout { + + required property var title + + id: root + spacing: 10 + + Rectangle { + width: 50 + height: 1 + } + + Label { + text: title + } + + Rectangle { + width: 50 + height: 1 + } +} diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml index 10c73e93d..76c055690 100644 --- a/app/qml/onboarding/MMSignUp.qml +++ b/app/qml/onboarding/MMSignUp.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,30 +8,65 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" +import "../inputs" Page { id: root - signal signInClicked() - signal signUpClicked() + signal backClicked + signal signInClicked + signal signUpClicked ColumnLayout { - MMOnboardingHeader { - headerTitle: tr("Sign Up") - } - - ToolButton { - onClicked: root.signInClicked() - text: "Sign in" - } - - ToolButton { - onClicked: root.signUpClicked() - text: "Sign up" - } + id: layout + + anchors.fill: parent + + MMOnboardingHeader { + headerTitle: qsTr("Sign Up") + Layout.fillWidth: true + onBackClicked: root.backClicked() + } + + MMInput { + title: qsTr("Username") + } + + MMPasswordInput { + 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.") + } + + MMPasswordInput { + title: qsTr("Confirm 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.") + } + + CheckBox { + // TODO external links + // TODO branded checkbox + text: qsTr("I accept the terms and Conditions and Privacy Policy") + } + + MMButton { + text: qsTr("Sign up") + + onClicked: root.signUpClicked() + } + + MMOnboardingHlineText { + title: qsTr("Already have an account?") + } + MMLinkButton { + text: qsTr("Sign in") + + onClicked: root.signInClicked() + } } } diff --git a/app/qml/onboarding/MMWhichIndustry.qml b/app/qml/onboarding/MMWhichIndustry.qml index 2c857ce0b..c414b5e6b 100644 --- a/app/qml/onboarding/MMWhichIndustry.qml +++ b/app/qml/onboarding/MMWhichIndustry.qml @@ -1,3 +1,5 @@ + + /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -6,16 +8,27 @@ * (at your option) any later version. * * * ***************************************************************************/ - import QtQuick import QtQuick.Layouts import QtQuick.Controls Page { id: root + + signal backClicked + signal continueClicked + ColumnLayout { - MMOnboardingHeader { - headerTitle: tr("Which industry") - } + MMOnboardingHeader { + headerTitle: qsTr("Which industry") + step: 3 + + onBackClicked: root.backClicked() + } + + ToolButton { + onClicked: root.continueClicked() + text: qsTr("Continue") + } } } diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 19871547a..aabf8a7c9 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -52,6 +52,8 @@ ../app/qml/inputs/MMPasswordEditor.qml ../app/qml/inputs/MMSliderEditor.qml qml/pages/OnboardingPage.qml + ../app/qml/onboarding/MMOnboardingHlineText.qml + ../app/qml/onboarding/MMChangeServerButton.qml ../app/qml/onboarding/MMOnboardingHeader.qml ../app/qml/onboarding/MMAcceptInvitation.qml ../app/qml/onboarding/MMCreateWorkspace.qml diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml index 1143056c7..58b37835b 100644 --- a/gallery/qml/pages/OnboardingPage.qml +++ b/gallery/qml/pages/OnboardingPage.qml @@ -31,10 +31,17 @@ Page { id: layout Label { - id: label text: "Onboarding (Login, Sign Up)" } + Label { + text: "Username: test" + } + + Label { + text: "Password: test" + } + ToolButton { onClicked: { console.log("Onboarding started") From e7fe7cfc830447a38d00253925db58ca4e570b41 Mon Sep 17 00:00:00 2001 From: PeterPetrik Date: Mon, 11 Dec 2023 08:15:52 +0100 Subject: [PATCH 03/19] another progress --- app/icons/AcceptInvitationImage.svg | 3 + app/icons/AcceptInvitationLogoImage.svg | 22 ++ app/icons/Back.svg | 3 + app/icons/Bubble.svg | 27 ++ app/icons/icons.qrc | 4 + app/mmstyle.h | 8 + app/qml/components/MMBackButton.qml | 32 +++ .../MMHeader.qml} | 12 +- .../MMHlineText.qml} | 9 +- app/qml/components/MMPasswordInput.qml | 20 +- app/qml/components/MMTextBubble.qml | 70 +++++ app/qml/inputs/MMCheckBox.qml | 2 +- app/qml/onboarding/MMAcceptInvitation.qml | 53 +++- app/qml/onboarding/MMCreateWorkspace.qml | 23 +- app/qml/onboarding/MMHowYouFoundUs.qml | 6 +- app/qml/onboarding/MMLogin.qml | 15 +- app/qml/onboarding/MMOnboarding.qml | 20 ++ app/qml/onboarding/MMSignUp.qml | 29 +- app/qml/onboarding/MMWhichIndustry.qml | 6 +- gallery/qml.qrc | 11 +- .../qml/ColorBox.qml | 23 +- gallery/qml/Main.qml | 8 + gallery/qml/pages/ButtonsPage.qml | 24 +- gallery/qml/pages/MiscPage.qml | 113 ++++++++ gallery/qml/pages/OnboardingPage.qml | 111 ++++++-- gallery/qml/pages/StylePage.qml | 260 ++++++++++++++++++ 26 files changed, 838 insertions(+), 76 deletions(-) create mode 100644 app/icons/AcceptInvitationImage.svg create mode 100644 app/icons/AcceptInvitationLogoImage.svg create mode 100644 app/icons/Back.svg create mode 100644 app/icons/Bubble.svg create mode 100644 app/qml/components/MMBackButton.qml rename app/qml/{onboarding/MMOnboardingHeader.qml => components/MMHeader.qml} (88%) rename app/qml/{onboarding/MMOnboardingHlineText.qml => components/MMHlineText.qml} (83%) create mode 100644 app/qml/components/MMTextBubble.qml rename app/qml/onboarding/MMChangeServerButton.qml => gallery/qml/ColorBox.qml (74%) create mode 100644 gallery/qml/pages/MiscPage.qml create mode 100644 gallery/qml/pages/StylePage.qml diff --git a/app/icons/AcceptInvitationImage.svg b/app/icons/AcceptInvitationImage.svg new file mode 100644 index 000000000..cf7101ff4 --- /dev/null +++ b/app/icons/AcceptInvitationImage.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/AcceptInvitationLogoImage.svg b/app/icons/AcceptInvitationLogoImage.svg new file mode 100644 index 000000000..8075b2f04 --- /dev/null +++ b/app/icons/AcceptInvitationLogoImage.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/Back.svg b/app/icons/Back.svg new file mode 100644 index 000000000..f7180a4ee --- /dev/null +++ b/app/icons/Back.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Bubble.svg b/app/icons/Bubble.svg new file mode 100644 index 000000000..0912079af --- /dev/null +++ b/app/icons/Bubble.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 8c0b4cec4..6f76dc07d 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -1,6 +1,10 @@ Arrow Link Right.svg + Back.svg + Bubble.svg + AcceptInvitationImage.svg + AcceptInvitationLogoImage.svg Calendar.svg Hide.svg Search.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index aa4a7669c..146cb9f95 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -77,6 +77,8 @@ class MMStyle: public QObject // Icons Q_PROPERTY( QUrl arrowLinkRightIcon READ arrowLinkRightIcon CONSTANT ) Q_PROPERTY( QUrl searchIcon READ searchIcon CONSTANT ) + Q_PROPERTY( QUrl backIcon READ backIcon CONSTANT ) + Q_PROPERTY( QUrl bubbleIcon READ bubbleIcon CONSTANT ) Q_PROPERTY( QUrl calendarIcon READ calendarIcon CONSTANT ) Q_PROPERTY( QUrl showIcon READ showIcon CONSTANT ) Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) @@ -103,6 +105,8 @@ class MMStyle: public QObject // Images Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT ) Q_PROPERTY( QUrl reachedDataLimitImage READ reachedDataLimitImage CONSTANT ) + Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT ) + Q_PROPERTY( QUrl acceptInvitationLogoImage READ acceptInvitationLogoImage CONSTANT ) // Map items Q_PROPERTY( double mapItemHeight READ mapItemHeight CONSTANT ) @@ -166,6 +170,8 @@ class MMStyle: public QObject QUrl arrowLinkRightIcon() {return QUrl( "qrc:/Arrow Link Right.svg" );} QUrl searchIcon() {return QUrl( "qrc:/Search.svg" );} + QUrl backIcon() {return QUrl( "qrc:/Back.svg" );} + QUrl bubbleIcon() {return QUrl( "qrc:/Bubble.svg" );} QUrl calendarIcon() {return QUrl( "qrc:/Calendar.svg" );} QUrl showIcon() {return QUrl( "qrc:/Show.svg" );} QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );} @@ -189,6 +195,8 @@ class MMStyle: public QObject QUrl downloadIcon() {return QUrl( "qrc:/Download.svg" );} QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );} + QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); } + QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); } QUrl uploadImage() {return QUrl( "qrc:/UploadImage.svg" );} QUrl reachedDataLimitImage() {return QUrl( "qrc:/ReachedDataLimitImage.svg" );} diff --git a/app/qml/components/MMBackButton.qml b/app/qml/components/MMBackButton.qml new file mode 100644 index 000000000..653d3b8c4 --- /dev/null +++ b/app/qml/components/MMBackButton.qml @@ -0,0 +1,32 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import "." + +RoundButton { + id: control + + implicitWidth: icon.width * 2 + implicitHeight: icon.height * 2 + + contentItem: MMIcon { + id: icon + + source: __style.backIcon + color: __style.forestColor + } + + background: Rectangle { + color: control.down || control.hovered ? __style.mediumGreenColor : __style.lightGreenColor + radius: control.implicitHeight / 2 + } +} diff --git a/app/qml/onboarding/MMOnboardingHeader.qml b/app/qml/components/MMHeader.qml similarity index 88% rename from app/qml/onboarding/MMOnboardingHeader.qml rename to app/qml/components/MMHeader.qml index 4d5ffbe00..61f64ddcd 100644 --- a/app/qml/onboarding/MMOnboardingHeader.qml +++ b/app/qml/components/MMHeader.qml @@ -25,20 +25,20 @@ RowLayout { property bool backVisible: true - RoundButton { + MMBackButton { visible: backVisible onClicked: root.backClicked() - text: "<" } Label { text: headerTitle + font: __style.p2 + color: __style.forestColor } - ProgressBar { + MMProgressBar { + width: 50 visible: step > 0 - from: 0 - to: 3 - value: step > 0 ? step : 0 + position: step > 0 ? step / 3 : 0 } } diff --git a/app/qml/onboarding/MMOnboardingHlineText.qml b/app/qml/components/MMHlineText.qml similarity index 83% rename from app/qml/onboarding/MMOnboardingHlineText.qml rename to app/qml/components/MMHlineText.qml index 23231a859..b583fbbd4 100644 --- a/app/qml/onboarding/MMOnboardingHlineText.qml +++ b/app/qml/components/MMHlineText.qml @@ -19,16 +19,21 @@ RowLayout { spacing: 10 Rectangle { + id: topRect width: 50 height: 1 + color: __style.forestColor } Label { text: title + font: __style.p5 + color: topRect.color } Rectangle { - width: 50 - height: 1 + width: topRect.width + height: topRect.height + color: topRect.color } } diff --git a/app/qml/components/MMPasswordInput.qml b/app/qml/components/MMPasswordInput.qml index 5e045c115..9a0ff0d58 100644 --- a/app/qml/components/MMPasswordInput.qml +++ b/app/qml/components/MMPasswordInput.qml @@ -14,10 +14,19 @@ import QtQuick.Controls.Basic Column { id: control + signal textEdited + + enum MsgShowBehaviour { + Never, + OnNotMatchingRegex, + Always + } + property alias title: titleItem.text property alias text: textField.text property alias placeholderText: textField.placeholderText - required property string regexp + property string regexp: '.*' + property int msgShowBehaviour: MMPasswordInput.OnNotMatchingRegex property url iconSource: "" property string warningMsg property string errorMsg @@ -77,6 +86,10 @@ Column { background: Rectangle { color: __style.transparentColor } + + onTextEdited: { + control.textEdited() + } } MMIcon { @@ -127,6 +140,11 @@ Column { } function isPasswordCorrect(pwd) { + if (msgShowBehaviour === MMPasswordInput.Never) + return true + else if (msgShowBehaviour === MMPasswordInput.Always) + return false + let pwdRegexp = new RegExp(control.regexp) return pwdRegexp.test(pwd) } diff --git a/app/qml/components/MMTextBubble.qml b/app/qml/components/MMTextBubble.qml new file mode 100644 index 000000000..8dce7b451 --- /dev/null +++ b/app/qml/components/MMTextBubble.qml @@ -0,0 +1,70 @@ + +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Item { + id: root + + height: 100 + width: 300 + + required property var title + required property var description + + Rectangle { + width: root.width + height: root.height + color: __style.whiteColor + radius: 15 + } + + Row { + padding: 10 + spacing: 10 + anchors.fill: parent + + Rectangle { + implicitWidth: radius * 2 + implicitHeight: radius * 2 + // x: control.leftPadding + y: parent.height / 2 - height / 2 + radius: 20 + color: __style.forestColor + + MMIcon { + id: icon + anchors.centerIn: parent + source: __style.bubbleIcon + } + } + + Column { + id: column + width: 2* root.width / 3 + spacing: 10 + Label { + text: root.title + font: __style.t1 + color: __style.nightColor + wrapMode: Label.WordWrap + } + + Label { + text:root.description + font: __style.p5 + color: __style.forestColor + wrapMode: Label.WordWrap + width: column.width + } + } + } +} diff --git a/app/qml/inputs/MMCheckBox.qml b/app/qml/inputs/MMCheckBox.qml index fa6acf3ef..d1e6f18ce 100644 --- a/app/qml/inputs/MMCheckBox.qml +++ b/app/qml/inputs/MMCheckBox.qml @@ -18,7 +18,7 @@ CheckBox { property bool small: false width: (control.small ? 16 : 24) * __dp - height: width + height: control.width indicator: Rectangle { width: control.width diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml index c7bd548e9..25a369fc2 100644 --- a/app/qml/onboarding/MMAcceptInvitation.qml +++ b/app/qml/onboarding/MMAcceptInvitation.qml @@ -12,6 +12,8 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" + Page { id: root @@ -19,21 +21,60 @@ Page { signal continueClicked signal createWorkspaceClicked - ColumnLayout { - MMOnboardingHeader { + Column { + spacing: 20 + + MMHeader { headerTitle: qsTr("Accept Invitation") onBackClicked: root.backClicked() } - ToolButton { + Item { + width: bg.width + height: bg.height + + MMIcon { + id: bg + source: __style.acceptInvitationImage + } + + MMIcon { + id: fg + x: ( bg.width - fg.width ) / 2 + 7 + y: ( bg.height - fg.height ) / 2 + 5 + source: __style.acceptInvitationLogoImage + } + } + + Label { + text: qsTr("You have been invited to workspace") + font: __style.t1 + color: __style.forestColor + } + + Label { + text: qsTr("User %1 has invited you to join his workspace").arg("andrej") + font: __style.p2 + } + + Label { + text: "my-workspace-funny" + font: __style.p2 + } + + MMButton { onClicked: root.continueClicked() - text: qsTr("Continue") + text: qsTr("Join workspace") + } + + MMHlineText { + title: qsTr("or") } - ToolButton { + MMLinkButton { onClicked: root.createWorkspaceClicked() - text: qsTr("Create Workspace") + text: qsTr("Create new workspace") } } } diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml index 8c85053e8..fc057d8e3 100644 --- a/app/qml/onboarding/MMCreateWorkspace.qml +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -12,30 +12,39 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" + Page { id: root signal continueClicked - ColumnLayout { - MMOnboardingHeader { + Column { + MMHeader { headerTitle: qsTr("Create Workspace") step: 1 backVisible: false } Label { - text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.") + 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 } - Label { - // TODO - text: qsTr("A good candidate for a workspace name is the name of your team or organisation.") + MMInput { + title: qsTr("Workspace name") + placeholderText: qsTr("e.g. my-company") + } + + 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.") } ToolButton { onClicked: root.continueClicked() - text: qsTr("Continue") + text: qsTr("Create workspace") } } } diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index b6b621380..58fbb9392 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -12,14 +12,16 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" + Page { id: root signal backClicked signal continueClicked - ColumnLayout { - MMOnboardingHeader { + Column { + MMHeader { headerTitle: qsTr("HowYouFoundUs") step: 2 diff --git a/app/qml/onboarding/MMLogin.qml b/app/qml/onboarding/MMLogin.qml index 088e1aefc..5a4df54b4 100644 --- a/app/qml/onboarding/MMLogin.qml +++ b/app/qml/onboarding/MMLogin.qml @@ -11,6 +11,7 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls + import "../components" Page { @@ -42,14 +43,13 @@ Page { } } - ColumnLayout { + Column { id: layout anchors.fill: parent - MMOnboardingHeader { + MMHeader { headerTitle: qsTr("Log In") - Layout.fillWidth: true onBackClicked: root.backClicked() } @@ -59,8 +59,7 @@ Page { MMPasswordInput { 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.") + regexp: '.*' } MMButton { @@ -75,7 +74,7 @@ Page { onClicked: root.signInClicked() } - MMOnboardingHlineText { + MMHlineText { title: qsTr("Don't have an account?") } @@ -85,9 +84,11 @@ Page { onClicked: root.signUpClicked() } - MMChangeServerButton { + MMLinkButton { id: changeServerButton + text: "https://app.merginmaps.com/" + onClicked: { changeServerDrawer.visible = true } diff --git a/app/qml/onboarding/MMOnboarding.qml b/app/qml/onboarding/MMOnboarding.qml index 3b0a208e6..0f4a779f9 100644 --- a/app/qml/onboarding/MMOnboarding.qml +++ b/app/qml/onboarding/MMOnboarding.qml @@ -22,6 +22,26 @@ Item { signal createWorkspaceRequested signal submitWorkspaceInfoRequested + /* + Component { + id: onboarding + MMOnboarding { + anchors.fill: parent + + onCloseOnboarding: { + loader.active = false + } + } + } + + Loader { + id: loader + sourceComponent: onboarding + anchors.fill: parent + active: false + } + */ + Component { id: mmsignup MMSignUp { diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml index 76c055690..da927e694 100644 --- a/app/qml/onboarding/MMSignUp.qml +++ b/app/qml/onboarding/MMSignUp.qml @@ -11,6 +11,7 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls + import "../components" import "../inputs" @@ -21,14 +22,13 @@ Page { signal signInClicked signal signUpClicked - ColumnLayout { + Column { id: layout anchors.fill: parent - MMOnboardingHeader { + MMHeader { headerTitle: qsTr("Sign Up") - Layout.fillWidth: true onBackClicked: root.backClicked() } @@ -37,20 +37,31 @@ Page { } 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 + } } MMPasswordInput { + id: confirmPassword title: qsTr("Confirm 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.") - } + errorMsg: qsTr("Passwords do not match") + onTextEdited: { + if (password.text === confirmPassword.text) + msgShowBehaviour = MMPasswordInput.Never + else + msgShowBehaviour = MMPasswordInput.Always + } + } - CheckBox { + MMCheckBox { // TODO external links - // TODO branded checkbox + small: false text: qsTr("I accept the terms and Conditions and Privacy Policy") } @@ -60,7 +71,7 @@ Page { onClicked: root.signUpClicked() } - MMOnboardingHlineText { + MMHlineText { title: qsTr("Already have an account?") } MMLinkButton { diff --git a/app/qml/onboarding/MMWhichIndustry.qml b/app/qml/onboarding/MMWhichIndustry.qml index c414b5e6b..eb994d37d 100644 --- a/app/qml/onboarding/MMWhichIndustry.qml +++ b/app/qml/onboarding/MMWhichIndustry.qml @@ -12,14 +12,16 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls +import "../components" + Page { id: root signal backClicked signal continueClicked - ColumnLayout { - MMOnboardingHeader { + Column { + MMHeader { headerTitle: qsTr("Which industry") step: 3 diff --git a/gallery/qml.qrc b/gallery/qml.qrc index aabf8a7c9..72eb96cb1 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -1,6 +1,8 @@ qml/Main.qml + qml/pages/StylePage.qml + qml/pages/MiscPage.qml qml/pages/InitialGalleryPage.qml qml/pages/InputsPage.qml qml/pages/ButtonsPage.qml @@ -52,15 +54,16 @@ ../app/qml/inputs/MMPasswordEditor.qml ../app/qml/inputs/MMSliderEditor.qml qml/pages/OnboardingPage.qml - ../app/qml/onboarding/MMOnboardingHlineText.qml - ../app/qml/onboarding/MMChangeServerButton.qml - ../app/qml/onboarding/MMOnboardingHeader.qml ../app/qml/onboarding/MMAcceptInvitation.qml ../app/qml/onboarding/MMCreateWorkspace.qml ../app/qml/onboarding/MMHowYouFoundUs.qml ../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 + ../app/qml/components/MMBackButton.qml diff --git a/app/qml/onboarding/MMChangeServerButton.qml b/gallery/qml/ColorBox.qml similarity index 74% rename from app/qml/onboarding/MMChangeServerButton.qml rename to gallery/qml/ColorBox.qml index 0e058eb1f..e9e54f914 100644 --- a/app/qml/onboarding/MMChangeServerButton.qml +++ b/gallery/qml/ColorBox.qml @@ -1,4 +1,3 @@ - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -7,13 +6,27 @@ * (at your option) any later version. * * * ***************************************************************************/ + import QtQuick import QtQuick.Controls -import QtQuick.Layouts +import QtQuick.Controls.Basic -Button { +Column { + spacing: 5 id: root - // TODO - text: "https://app.merginmaps.com" + property var color + property var text + + Label { + text: root.text + } + + Rectangle { + width: 40 + height: 40 + color: root.color + border.color: "gray" + } + } diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index 02f21f180..773f114aa 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -105,6 +105,10 @@ ApplicationWindow { title: "Initial" source: "InitialGalleryPage.qml" } + ListElement { + title: "Style" + source: "StylePage.qml" + } ListElement { title: "Buttons" source: "ButtonsPage.qml" @@ -153,6 +157,10 @@ ApplicationWindow { title: "Project items" source: "ProjectItemsPage.qml" } + ListElement { + title: "Misc" + source: "MiscPage.qml" + } ListElement { title: "Onboarding" source: "OnboardingPage.qml" diff --git a/gallery/qml/pages/ButtonsPage.qml b/gallery/qml/pages/ButtonsPage.qml index 81debb1eb..81bb7d3c5 100644 --- a/gallery/qml/pages/ButtonsPage.qml +++ b/gallery/qml/pages/ButtonsPage.qml @@ -15,7 +15,7 @@ import "../../app/qml/components" Column { padding: 20 - spacing: 20 + spacing: 5 GroupBox { title: "MMButton" @@ -140,4 +140,26 @@ Column { } } } + + GroupBox { + title: "MMBackButton" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 10 + anchors.fill: parent + + MMBackButton { + enabled: false + } + } + } } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml new file mode 100644 index 000000000..ac77754fe --- /dev/null +++ b/gallery/qml/pages/MiscPage.qml @@ -0,0 +1,113 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +import "../../app/qml/components" + +Column { + padding: 20 + spacing: 5 + + GroupBox { + title: "MMProgressBar" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMProgressBar { + position: 0 + } + MMProgressBar { + position: 0.4 + } + } + } + + GroupBox { + title: "MMHeader" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMHeader { + headerTitle: "With Progress" + step: 1 + } + + MMHeader { + headerTitle: "No Back" + backVisible: false + step: 2 + } + } + } + + GroupBox { + title: "MMHlineText" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMHlineText { + title: "My text is great" + } + } + } + + GroupBox { + title: "MMTextBubble" + background: Rectangle { + color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMTextBubble { + title: "My text is great" + description: "My text is great. y text is great My text is great. y text is great. y text is great" + } + } + } +} diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml index 58b37835b..510c617f8 100644 --- a/gallery/qml/pages/OnboardingPage.qml +++ b/gallery/qml/pages/OnboardingPage.qml @@ -16,45 +16,110 @@ import "../../app/qml/onboarding" Page { id: pane - Component { - id: onboarding - MMOnboarding { - anchors.fill: parent - - onCloseOnboarding: { - loader.active = false - } - } + function hideAll() { + acceptInvitation.visible = false + createWorkspace = false + howYouFoundUs = false + login = false + signUp = false + whichIndustry = false } - ColumnLayout { + Column { id: layout Label { - text: "Onboarding (Login, Sign Up)" + text: "Onboarding (Login, Sign Up, ...)" } - Label { - text: "Username: test" + Button { + onClicked: { + login.visible = true + } + text: "Login" } - Label { - text: "Password: test" + Button { + onClicked: { + signUp.visible = true + } + text: "Sign Up" + } + + Button { + onClicked: { + createWorkspace.visible = true + } + text: "Create Workspace" + } + + Button { + onClicked: { + acceptInvitation.visible = true + } + text: "Accept Invitation" } - ToolButton { + Button { onClicked: { - console.log("Onboarding started") - loader.active = true + howYouFoundUs.visible = true } - text: "Start Here (Login)!" + text: "How You Found Us" } + + Button { + onClicked: { + whichIndustry.visible = true + } + text: "Which Industry" + } + } + + MMAcceptInvitation { + id: acceptInvitation + anchors.fill: parent + visible: false + + onBackClicked: {visible=false} + } + + MMCreateWorkspace { + id: createWorkspace + anchors.fill: parent + visible: false + + onContinueClicked: {visible=false} + } + + MMHowYouFoundUs { + id: howYouFoundUs + anchors.fill: parent + visible: false + + onBackClicked: {visible=false} + } + + MMLogin { + id: login + anchors.fill: parent + visible: false + + onBackClicked: {visible=false} } - Loader { - id: loader - sourceComponent: onboarding + MMSignUp { + id: signUp anchors.fill: parent - active: false + visible: false + + onBackClicked: {visible=false} + } + + MMWhichIndustry { + id: whichIndustry + anchors.fill: parent + visible: false + + onBackClicked: {visible=false} } } diff --git a/gallery/qml/pages/StylePage.qml b/gallery/qml/pages/StylePage.qml new file mode 100644 index 000000000..33aa43aea --- /dev/null +++ b/gallery/qml/pages/StylePage.qml @@ -0,0 +1,260 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +import "../../app/qml/components" +import "../" + +Column { + padding: 20 + spacing: 5 + + property int rectSize: 10 + + GroupBox { + title: "Fonts" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + Label { + text: "t1" + font: __style.t1 + } + Label { + text: "t2" + font: __style.t2 + } + Label { + text: "t3" + font: __style.t3 + } + Label { + text: "t4" + font: __style.t4 + } + Label { + text: "t5" + font: __style.t5 + } + Label { + text: "p1" + font: __style.p1 + } + Label { + text: "p2" + font: __style.p2 + } + Label { + text: "p3" + font: __style.p3 + } + Label { + text: "p4" + font: __style.p4 + } + Label { + text: "p5" + font: __style.p5 + } + Label { + text: "p6" + font: __style.p6 + } + Label { + text: "p7" + font: __style.p7 + } + } + } + + GroupBox { + title: "Colors - primary palette" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "grassColor" + color: __style.grassColor + } + ColorBox { + text: "forestColor" + color: __style.forestColor + } + ColorBox { + text: "nightColor" + color: __style.nightColor + } + ColorBox { + text: "whiteColor" + color: __style.whiteColor + } + ColorBox { + text: "transparentColor" + color: __style.transparentColor + } + } + } + + GroupBox { + title: "Colors - additional colors" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "sandColor" + color: __style.sandColor + } + ColorBox { + text: "sunsetColor" + color: __style.sunsetColor + } + ColorBox { + text: "sunColor" + color: __style.sunColor + } + ColorBox { + text: "earthColor" + color: __style.earthColor + } + ColorBox { + text: "roseColor" + color: __style.roseColor + } + ColorBox { + text: "skyColor" + color: __style.skyColor + } + ColorBox { + text: "grapeColor" + color: __style.grapeColor + } + ColorBox { + text: "deepOceanColor" + color: __style.deepOceanColor + } + ColorBox { + text: "purpleColor" + color: __style.purpleColor + } + ColorBox { + text: "fieldColor" + color: __style.fieldColor + } + } + } + + GroupBox { + title: "Colors - additional colors" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "positiveColor" + color: __style.positiveColor + } + ColorBox { + text: "warningColor" + color: __style.warningColor + } + ColorBox { + text: "negativeColor" + color: __style.negativeColor + } + ColorBox { + text: "informativeColor" + color: __style.informativeColor + } + } + } + + GroupBox { + title: "Colors - others" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "nightAlphaColor" + color: __style.nightAlphaColor + } + ColorBox { + text: "errorBgInputColor" + color: __style.errorBgInputColor + } + ColorBox { + text: "shadowColor" + color: __style.shadowColor + } + ColorBox { + text: "lightGreenColor" + color: __style.lightGreenColor + } + ColorBox { + text: "mediumGreenColor" + color: __style.mediumGreenColor + } + ColorBox { + text: "grayColor" + color: __style.grayColor + } + } + } +} From 01548839e15a9c6d1b920cc89f313f815b250408 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 09:12:45 +0100 Subject: [PATCH 04/19] add some icons --- app/icons/Briefcase.svg | 5 +++++ app/icons/Mouth.svg | 4 ++++ app/icons/Other.svg | 4 ++++ app/icons/Social media.svg | 4 ++++ app/icons/Terms.svg | 5 +++++ app/qml/onboarding/MMCreateWorkspace.qml | 12 ++++++------ app/qml/onboarding/MMHowYouFoundUs.qml | 4 ++-- 7 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 app/icons/Briefcase.svg create mode 100644 app/icons/Mouth.svg create mode 100644 app/icons/Other.svg create mode 100644 app/icons/Social media.svg create mode 100644 app/icons/Terms.svg diff --git a/app/icons/Briefcase.svg b/app/icons/Briefcase.svg new file mode 100644 index 000000000..923bcb6d3 --- /dev/null +++ b/app/icons/Briefcase.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/Mouth.svg b/app/icons/Mouth.svg new file mode 100644 index 000000000..ad2a5efca --- /dev/null +++ b/app/icons/Mouth.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Other.svg b/app/icons/Other.svg new file mode 100644 index 000000000..930aa1085 --- /dev/null +++ b/app/icons/Other.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Social media.svg b/app/icons/Social media.svg new file mode 100644 index 000000000..158775f13 --- /dev/null +++ b/app/icons/Social media.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Terms.svg b/app/icons/Terms.svg new file mode 100644 index 000000000..b358dd1bf --- /dev/null +++ b/app/icons/Terms.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml index fc057d8e3..a6577fa9b 100644 --- a/app/qml/onboarding/MMCreateWorkspace.qml +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -27,9 +27,9 @@ Page { } 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 + 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 } MMInput { @@ -38,11 +38,11 @@ Page { } 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.") + 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.") } - ToolButton { + MMButton { onClicked: root.continueClicked() text: qsTr("Create workspace") } diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index 58fbb9392..8f4f0a135 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -22,13 +22,13 @@ Page { Column { MMHeader { - headerTitle: qsTr("HowYouFoundUs") + headerTitle: qsTr("How did you learn about us") step: 2 onBackClicked: root.backClicked() } - ToolButton { + MMButton { onClicked: root.continueClicked() text: qsTr("Continue") } From fe984e3e600e5f59fb0fec417f3ac660941da5c5 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 09:19:03 +0100 Subject: [PATCH 05/19] format qml --- app/qml/components/MMHlineText.qml | 2 +- app/qml/components/MMTextBubble.qml | 2 +- app/qml/onboarding/MMAcceptInvitation.qml | 2 -- app/qml/onboarding/MMCreateWorkspace.qml | 2 -- app/qml/onboarding/MMHowYouFoundUs.qml | 2 -- app/qml/onboarding/MMLogin.qml | 2 -- app/qml/onboarding/MMOnboarding.qml | 2 -- app/qml/onboarding/MMSignUp.qml | 2 -- app/qml/onboarding/MMWhichIndustry.qml | 2 -- 9 files changed, 2 insertions(+), 16 deletions(-) diff --git a/app/qml/components/MMHlineText.qml b/app/qml/components/MMHlineText.qml index b583fbbd4..a01feaf6c 100644 --- a/app/qml/components/MMHlineText.qml +++ b/app/qml/components/MMHlineText.qml @@ -1,4 +1,3 @@ - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -7,6 +6,7 @@ * (at your option) any later version. * * * ***************************************************************************/ + import QtQuick import QtQuick.Controls import QtQuick.Layouts diff --git a/app/qml/components/MMTextBubble.qml b/app/qml/components/MMTextBubble.qml index 8dce7b451..9a50b8e5d 100644 --- a/app/qml/components/MMTextBubble.qml +++ b/app/qml/components/MMTextBubble.qml @@ -1,4 +1,3 @@ - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -7,6 +6,7 @@ * (at your option) any later version. * * * ***************************************************************************/ + import QtQuick import QtQuick.Controls import QtQuick.Layouts diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml index 25a369fc2..0e324d935 100644 --- a/app/qml/onboarding/MMAcceptInvitation.qml +++ b/app/qml/onboarding/MMAcceptInvitation.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml index a6577fa9b..b3ca662e2 100644 --- a/app/qml/onboarding/MMCreateWorkspace.qml +++ b/app/qml/onboarding/MMCreateWorkspace.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index 8f4f0a135..e352d22bb 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMLogin.qml b/app/qml/onboarding/MMLogin.qml index 5a4df54b4..d5342d260 100644 --- a/app/qml/onboarding/MMLogin.qml +++ b/app/qml/onboarding/MMLogin.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMOnboarding.qml b/app/qml/onboarding/MMOnboarding.qml index 0f4a779f9..746bd1e17 100644 --- a/app/qml/onboarding/MMOnboarding.qml +++ b/app/qml/onboarding/MMOnboarding.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml index da927e694..53696f95a 100644 --- a/app/qml/onboarding/MMSignUp.qml +++ b/app/qml/onboarding/MMSignUp.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * diff --git a/app/qml/onboarding/MMWhichIndustry.qml b/app/qml/onboarding/MMWhichIndustry.qml index eb994d37d..be9ae349e 100644 --- a/app/qml/onboarding/MMWhichIndustry.qml +++ b/app/qml/onboarding/MMWhichIndustry.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * From ae37aca3e5cdc90a25adc68d2d6259faf86c8207 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 09:47:50 +0100 Subject: [PATCH 06/19] Styled Progress bar for the Header item --- app/qml/components/MMProgressBar.qml | 3 +- gallery/qml/pages/MiscPage.qml | 71 +++++++++++++++++++++------- 2 files changed, 56 insertions(+), 18 deletions(-) diff --git a/app/qml/components/MMProgressBar.qml b/app/qml/components/MMProgressBar.qml index d3df3f6e3..9c52e9af4 100644 --- a/app/qml/components/MMProgressBar.qml +++ b/app/qml/components/MMProgressBar.qml @@ -14,6 +14,7 @@ Rectangle { id: control required property real position // [0 - 1] + property color progressColor: __style.grassColor width: parent.width height: 12 * __dp @@ -23,7 +24,7 @@ Rectangle { Rectangle { width: parent.width * control.position height: parent.height - color: __style.grassColor + color: control.progressColor radius: height / 2 } } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index ac77754fe..c546d7652 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -17,26 +17,63 @@ Column { padding: 20 spacing: 5 - GroupBox { - title: "MMProgressBar" - background: Rectangle { - color: "white" - border.color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 + Row { + spacing: 5 + GroupBox { + title: "MMProgressBar" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMProgressBar { + position: 0 + } + MMProgressBar { + position: 0.6 + } + } } - Column { - spacing: 20 - anchors.fill: parent - MMProgressBar { - position: 0 + GroupBox { + title: "MMProgressBar" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 } - MMProgressBar { - position: 0.4 + + Column { + spacing: 20 + anchors.fill: parent + MMProgressBar { + width: 60 * __dp + height: 4 * __dp + + position: 0 + color: __style.grassColor + progressColor: __style.forestColor + } + MMProgressBar { + width: 60 * __dp + height: 4 * __dp + + position: 0.6 + color: __style.grassColor + progressColor: __style.forestColor + } } } } From 0515e52a12a200527ff903617282dff3a437a58b Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 09:51:49 +0100 Subject: [PATCH 07/19] add icons --- app/icons/Archaeology.svg | 4 ++++ app/icons/Electricity.svg | 3 +++ app/icons/Engineering.svg | 5 +++++ app/icons/Environmental.svg | 3 +++ app/icons/Facebook.svg | 3 +++ app/icons/Linkedin.svg | 3 +++ app/icons/Mastodon.svg | 3 +++ app/icons/Natural Resources.svg | 4 ++++ app/icons/Others.svg | 7 +++++++ app/icons/QGIS.svg | 5 +++++ app/icons/Reddit.svg | 3 +++ app/icons/State and Local.svg | 7 +++++++ app/icons/Subscriptions.svg | 6 ++++++ app/icons/Teacher.svg | 5 +++++ app/icons/Telecommunication.svg | 5 +++++ app/icons/Tractor.svg | 3 +++ app/icons/Transportation.svg | 4 ++++ app/icons/Water resources.svg | 3 +++ app/icons/X Twitter.svg | 3 +++ 19 files changed, 79 insertions(+) create mode 100644 app/icons/Archaeology.svg create mode 100644 app/icons/Electricity.svg create mode 100644 app/icons/Engineering.svg create mode 100644 app/icons/Environmental.svg create mode 100644 app/icons/Facebook.svg create mode 100644 app/icons/Linkedin.svg create mode 100644 app/icons/Mastodon.svg create mode 100644 app/icons/Natural Resources.svg create mode 100644 app/icons/Others.svg create mode 100644 app/icons/QGIS.svg create mode 100644 app/icons/Reddit.svg create mode 100644 app/icons/State and Local.svg create mode 100644 app/icons/Subscriptions.svg create mode 100644 app/icons/Teacher.svg create mode 100644 app/icons/Telecommunication.svg create mode 100644 app/icons/Tractor.svg create mode 100644 app/icons/Transportation.svg create mode 100644 app/icons/Water resources.svg create mode 100644 app/icons/X Twitter.svg diff --git a/app/icons/Archaeology.svg b/app/icons/Archaeology.svg new file mode 100644 index 000000000..b6e36d66a --- /dev/null +++ b/app/icons/Archaeology.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Electricity.svg b/app/icons/Electricity.svg new file mode 100644 index 000000000..43790e6ba --- /dev/null +++ b/app/icons/Electricity.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Engineering.svg b/app/icons/Engineering.svg new file mode 100644 index 000000000..a7ebc6700 --- /dev/null +++ b/app/icons/Engineering.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/Environmental.svg b/app/icons/Environmental.svg new file mode 100644 index 000000000..6d9b067d9 --- /dev/null +++ b/app/icons/Environmental.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Facebook.svg b/app/icons/Facebook.svg new file mode 100644 index 000000000..38867f50a --- /dev/null +++ b/app/icons/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Linkedin.svg b/app/icons/Linkedin.svg new file mode 100644 index 000000000..4165bb5c2 --- /dev/null +++ b/app/icons/Linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Mastodon.svg b/app/icons/Mastodon.svg new file mode 100644 index 000000000..d072c2dd4 --- /dev/null +++ b/app/icons/Mastodon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Natural Resources.svg b/app/icons/Natural Resources.svg new file mode 100644 index 000000000..612c85e11 --- /dev/null +++ b/app/icons/Natural Resources.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Others.svg b/app/icons/Others.svg new file mode 100644 index 000000000..d0eb5a4f4 --- /dev/null +++ b/app/icons/Others.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/icons/QGIS.svg b/app/icons/QGIS.svg new file mode 100644 index 000000000..25efb61f8 --- /dev/null +++ b/app/icons/QGIS.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/Reddit.svg b/app/icons/Reddit.svg new file mode 100644 index 000000000..fe4c99b32 --- /dev/null +++ b/app/icons/Reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/State and Local.svg b/app/icons/State and Local.svg new file mode 100644 index 000000000..e734c79ed --- /dev/null +++ b/app/icons/State and Local.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/icons/Subscriptions.svg b/app/icons/Subscriptions.svg new file mode 100644 index 000000000..70b5368c2 --- /dev/null +++ b/app/icons/Subscriptions.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/icons/Teacher.svg b/app/icons/Teacher.svg new file mode 100644 index 000000000..252d67a86 --- /dev/null +++ b/app/icons/Teacher.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/Telecommunication.svg b/app/icons/Telecommunication.svg new file mode 100644 index 000000000..1b043a67c --- /dev/null +++ b/app/icons/Telecommunication.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/Tractor.svg b/app/icons/Tractor.svg new file mode 100644 index 000000000..acc009e88 --- /dev/null +++ b/app/icons/Tractor.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/Transportation.svg b/app/icons/Transportation.svg new file mode 100644 index 000000000..cf5779377 --- /dev/null +++ b/app/icons/Transportation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Water resources.svg b/app/icons/Water resources.svg new file mode 100644 index 000000000..50ce29ca5 --- /dev/null +++ b/app/icons/Water resources.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/X Twitter.svg b/app/icons/X Twitter.svg new file mode 100644 index 000000000..82a91bec7 --- /dev/null +++ b/app/icons/X Twitter.svg @@ -0,0 +1,3 @@ + + + From 1cfdd7bc1906799fd6bba378a553a7e129081d6c Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 10:28:15 +0100 Subject: [PATCH 08/19] another set of icons --- app/icons/Youtube.svg | 3 + app/icons/icons.qrc | 59 +++++--- app/mmstyle.h | 78 ++++++++-- gallery/qml.qrc | 6 +- gallery/qml/IconBox.qml | 40 +++++ gallery/qml/Main.qml | 4 + gallery/qml/pages/IconsPage.qml | 260 ++++++++++++++++++++++++++++++++ 7 files changed, 417 insertions(+), 33 deletions(-) create mode 100644 app/icons/Youtube.svg create mode 100644 gallery/qml/IconBox.qml create mode 100644 gallery/qml/pages/IconsPage.qml diff --git a/app/icons/Youtube.svg b/app/icons/Youtube.svg new file mode 100644 index 000000000..ccd699107 --- /dev/null +++ b/app/icons/Youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 6f76dc07d..c8450836e 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -1,34 +1,59 @@ - Arrow Link Right.svg - Back.svg - Bubble.svg AcceptInvitationImage.svg AcceptInvitationLogoImage.svg - Calendar.svg - Hide.svg - Search.svg - Show.svg - X Mark.svg - Error.svg + Archaeology.svg Arrow Down.svg + Arrow Link Right.svg Arrow Up.svg - QR Code.svg + Back.svg + Briefcase.svg + Bubble.svg + Calendar.svg Checkmark.svg - CloseButton.svg - UploadImage.svg - ReachedDataLimitImage.svg Close.svg - Waiting.svg + CloseButton.svg Delete.svg Done.svg + Download.svg Edit.svg + Electricity.svg + Engineering.svg + Environmental.svg + Error.svg + Facebook.svg + Hide.svg + Info.svg + Linkedin.svg + Mastodon.svg More.svg + MorePhotos.svg + Mouth.svg + Natural Resources.svg + Other.svg + Others.svg ProjectButtonMore.svg + QGIS.svg + QR Code.svg + ReachedDataLimitImage.svg + Reddit.svg + Search.svg + Show.svg + Social media.svg + State and Local.svg Stop.svg - Download.svg - Info.svg + Subscriptions.svg Sync.svg - MorePhotos.svg + Teacher.svg + Telecommunication.svg + Terms.svg + Tractor.svg + Transportation.svg + UploadImage.svg + Waiting.svg + Water resources.svg + X Mark.svg + X Twitter.svg + Youtube.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index 146cb9f95..8d0a74239 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -75,38 +75,63 @@ class MMStyle: public QObject Q_PROPERTY( QColor shadowColor READ shadowColor CONSTANT ) // Icons + Q_PROPERTY( QUrl archaeologyIcon READ archaeologyIcon CONSTANT ) + Q_PROPERTY( QUrl arrowDownIcon READ arrowDownIcon CONSTANT ) Q_PROPERTY( QUrl arrowLinkRightIcon READ arrowLinkRightIcon CONSTANT ) - Q_PROPERTY( QUrl searchIcon READ searchIcon CONSTANT ) + Q_PROPERTY( QUrl arrowUpIcon READ arrowUpIcon CONSTANT ) Q_PROPERTY( QUrl backIcon READ backIcon CONSTANT ) + Q_PROPERTY( QUrl briefcaseIcon READ briefcaseIcon CONSTANT ) Q_PROPERTY( QUrl bubbleIcon READ bubbleIcon CONSTANT ) Q_PROPERTY( QUrl calendarIcon READ calendarIcon CONSTANT ) - Q_PROPERTY( QUrl showIcon READ showIcon CONSTANT ) - Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) - Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT ) - Q_PROPERTY( QUrl errorIcon READ errorIcon CONSTANT ) - Q_PROPERTY( QUrl arrowUpIcon READ arrowUpIcon CONSTANT ) - Q_PROPERTY( QUrl arrowDownIcon READ arrowDownIcon CONSTANT ) - Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT ) Q_PROPERTY( QUrl checkmarkIcon READ checkmarkIcon CONSTANT ) Q_PROPERTY( QUrl closeButtonIcon READ closeButtonIcon CONSTANT ) Q_PROPERTY( QUrl closeIcon READ closeIcon CONSTANT ) - Q_PROPERTY( QUrl waitingIcon READ waitingIcon CONSTANT ) Q_PROPERTY( QUrl deleteIcon READ deleteIcon CONSTANT ) Q_PROPERTY( QUrl doneIcon READ doneIcon CONSTANT ) + Q_PROPERTY( QUrl downloadIcon READ downloadIcon CONSTANT ) Q_PROPERTY( QUrl editIcon READ editIcon CONSTANT ) + Q_PROPERTY( QUrl electricityIcon READ electricityIcon CONSTANT ) + Q_PROPERTY( QUrl engineeringIcon READ engineeringIcon CONSTANT ) + Q_PROPERTY( QUrl environmentalIcon READ environmentalIcon CONSTANT ) + Q_PROPERTY( QUrl errorIcon READ errorIcon CONSTANT ) + Q_PROPERTY( QUrl facebookIcon READ facebookIcon CONSTANT ) + Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) + Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT ) + Q_PROPERTY( QUrl linkedinIcon READ linkedinIcon CONSTANT ) + Q_PROPERTY( QUrl mastodonIcon READ mastodonIcon CONSTANT ) Q_PROPERTY( QUrl moreIcon READ moreIcon CONSTANT ) + Q_PROPERTY( QUrl morePhotosIcon READ morePhotosIcon CONSTANT ) + Q_PROPERTY( QUrl mouthIcon READ mouthIcon CONSTANT ) + Q_PROPERTY( QUrl naturalResourcesIcon READ naturalResourcesIcon CONSTANT ) + Q_PROPERTY( QUrl otherIcon READ otherIcon CONSTANT ) + Q_PROPERTY( QUrl othersIcon READ othersIcon CONSTANT ) Q_PROPERTY( QUrl projectButtonMoreIcon READ projectButtonMoreIcon CONSTANT ) + Q_PROPERTY( QUrl qgisIcon READ qgisIcon CONSTANT ) + Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT ) + Q_PROPERTY( QUrl redditIcon READ redditIcon CONSTANT ) + Q_PROPERTY( QUrl searchIcon READ searchIcon CONSTANT ) + Q_PROPERTY( QUrl showIcon READ showIcon CONSTANT ) + Q_PROPERTY( QUrl socialMediaIcon READ socialMediaIcon CONSTANT ) + Q_PROPERTY( QUrl stateAndLocalIcon READ stateAndLocalIcon CONSTANT ) Q_PROPERTY( QUrl stopIcon READ stopIcon CONSTANT ) + Q_PROPERTY( QUrl subscriptionsIcon READ subscriptionsIcon CONSTANT ) Q_PROPERTY( QUrl syncIcon READ syncIcon CONSTANT ) - Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT ) - Q_PROPERTY( QUrl downloadIcon READ downloadIcon CONSTANT ) - Q_PROPERTY( QUrl morePhotosIcon READ morePhotosIcon CONSTANT ) + Q_PROPERTY( QUrl teacherIcon READ teacherIcon CONSTANT ) + Q_PROPERTY( QUrl telecommunicationIcon READ telecommunicationIcon CONSTANT ) + Q_PROPERTY( QUrl termsIcon READ termsIcon CONSTANT ) + Q_PROPERTY( QUrl tractorIcon READ tractorIcon CONSTANT ) + Q_PROPERTY( QUrl transportationIcon READ transportationIcon CONSTANT ) + Q_PROPERTY( QUrl waitingIcon READ waitingIcon CONSTANT ) + Q_PROPERTY( QUrl waterResourcesIcon READ waterResourcesIcon CONSTANT ) + Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT ) + Q_PROPERTY( QUrl xTwitterIcon READ xTwitterIcon CONSTANT ) + Q_PROPERTY( QUrl youtubeIcon READ youtubeIcon CONSTANT ) // Images - Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT ) - Q_PROPERTY( QUrl reachedDataLimitImage READ reachedDataLimitImage CONSTANT ) Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT ) Q_PROPERTY( QUrl acceptInvitationLogoImage READ acceptInvitationLogoImage CONSTANT ) + Q_PROPERTY( QUrl reachedDataLimitImage READ reachedDataLimitImage CONSTANT ) + Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT ) // Map items Q_PROPERTY( double mapItemHeight READ mapItemHeight CONSTANT ) @@ -194,6 +219,31 @@ class MMStyle: public QObject QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );} QUrl downloadIcon() {return QUrl( "qrc:/Download.svg" );} QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );} + QUrl archaeologyIcon() {return QUrl( "qrc:/Archaeology.svg" );} + QUrl briefcaseIcon() {return QUrl( "qrc:/Briefcase.svg" );} + QUrl electricityIcon() {return QUrl( "qrc:/Electricity.svg" );} + QUrl engineeringIcon() {return QUrl( "qrc:/Engineering.svg" );} + QUrl environmentalIcon() {return QUrl( "qrc:/Environmental.svg" );} + QUrl facebookIcon() {return QUrl( "qrc:/Facebook.svg" );} + QUrl linkedinIcon() {return QUrl( "qrc:/Linkedin.svg" );} + QUrl mastodonIcon() {return QUrl( "qrc:/Mastodon.svg" );} + QUrl mouthIcon() {return QUrl( "qrc:/Mouth.svg" );} + QUrl naturalResourcesIcon() {return QUrl( "qrc:/Natural Resources.svg" );} + QUrl otherIcon() {return QUrl( "qrc:/Other.svg" );} + QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );} + QUrl qgisIcon() {return QUrl( "qrc:/QGIS.svg" );} + QUrl redditIcon() {return QUrl( "qrc:/Reddit.svg" );} + QUrl socialMediaIcon() {return QUrl( "qrc:/Social media.svg" );} + QUrl stateAndLocalIcon() {return QUrl( "qrc:/State and Local.svg" );} + QUrl subscriptionsIcon() {return QUrl( "qrc:/Subscriptions.svg" );} + QUrl teacherIcon() {return QUrl( "qrc:/Teacher.svg" );} + QUrl telecommunicationIcon() {return QUrl( "qrc:/Telecommunication.svg" );} + QUrl termsIcon() {return QUrl( "qrc:/Terms.svg" );} + QUrl tractorIcon() {return QUrl( "qrc:/Tractor.svg" );} + QUrl transportationIcon() {return QUrl( "qrc:/Transportation.svg" );} + QUrl waterResourcesIcon() {return QUrl( "qrc:/Water resources.svg" );} + QUrl xTwitterIcon() {return QUrl( "qrc:/X Twitter.svg" );} + QUrl youtubeIcon() {return QUrl( "qrc:/Toutube.svg" );} QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); } QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); } diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 72eb96cb1..932f5ddf0 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -1,8 +1,10 @@ qml/Main.qml - qml/pages/StylePage.qml - qml/pages/MiscPage.qml + qml/pages/IconsPage.qml + qml/IconBox.qml + qml/pages/StylePage.qml + qml/pages/MiscPage.qml qml/pages/InitialGalleryPage.qml qml/pages/InputsPage.qml qml/pages/ButtonsPage.qml diff --git a/gallery/qml/IconBox.qml b/gallery/qml/IconBox.qml new file mode 100644 index 000000000..e98a5bffa --- /dev/null +++ b/gallery/qml/IconBox.qml @@ -0,0 +1,40 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +import "../../app/qml/components" + +Column { + spacing: 5 + id: root + + property var source + property var text + + Label { + text: root.text + } + + Rectangle { + width: 50 + height: 50 + // color: root.color + border.color: "gray" + + MMIcon { + width: parent.width + height: parent.height + source: root.source + } + } + +} diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index 773f114aa..ecabb9d3b 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -109,6 +109,10 @@ ApplicationWindow { title: "Style" source: "StylePage.qml" } + ListElement { + title: "Icons" + source: "IconsPage.qml" + } ListElement { title: "Buttons" source: "ButtonsPage.qml" diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml new file mode 100644 index 000000000..33aa43aea --- /dev/null +++ b/gallery/qml/pages/IconsPage.qml @@ -0,0 +1,260 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +import "../../app/qml/components" +import "../" + +Column { + padding: 20 + spacing: 5 + + property int rectSize: 10 + + GroupBox { + title: "Fonts" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + Label { + text: "t1" + font: __style.t1 + } + Label { + text: "t2" + font: __style.t2 + } + Label { + text: "t3" + font: __style.t3 + } + Label { + text: "t4" + font: __style.t4 + } + Label { + text: "t5" + font: __style.t5 + } + Label { + text: "p1" + font: __style.p1 + } + Label { + text: "p2" + font: __style.p2 + } + Label { + text: "p3" + font: __style.p3 + } + Label { + text: "p4" + font: __style.p4 + } + Label { + text: "p5" + font: __style.p5 + } + Label { + text: "p6" + font: __style.p6 + } + Label { + text: "p7" + font: __style.p7 + } + } + } + + GroupBox { + title: "Colors - primary palette" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "grassColor" + color: __style.grassColor + } + ColorBox { + text: "forestColor" + color: __style.forestColor + } + ColorBox { + text: "nightColor" + color: __style.nightColor + } + ColorBox { + text: "whiteColor" + color: __style.whiteColor + } + ColorBox { + text: "transparentColor" + color: __style.transparentColor + } + } + } + + GroupBox { + title: "Colors - additional colors" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "sandColor" + color: __style.sandColor + } + ColorBox { + text: "sunsetColor" + color: __style.sunsetColor + } + ColorBox { + text: "sunColor" + color: __style.sunColor + } + ColorBox { + text: "earthColor" + color: __style.earthColor + } + ColorBox { + text: "roseColor" + color: __style.roseColor + } + ColorBox { + text: "skyColor" + color: __style.skyColor + } + ColorBox { + text: "grapeColor" + color: __style.grapeColor + } + ColorBox { + text: "deepOceanColor" + color: __style.deepOceanColor + } + ColorBox { + text: "purpleColor" + color: __style.purpleColor + } + ColorBox { + text: "fieldColor" + color: __style.fieldColor + } + } + } + + GroupBox { + title: "Colors - additional colors" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "positiveColor" + color: __style.positiveColor + } + ColorBox { + text: "warningColor" + color: __style.warningColor + } + ColorBox { + text: "negativeColor" + color: __style.negativeColor + } + ColorBox { + text: "informativeColor" + color: __style.informativeColor + } + } + } + + GroupBox { + title: "Colors - others" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "nightAlphaColor" + color: __style.nightAlphaColor + } + ColorBox { + text: "errorBgInputColor" + color: __style.errorBgInputColor + } + ColorBox { + text: "shadowColor" + color: __style.shadowColor + } + ColorBox { + text: "lightGreenColor" + color: __style.lightGreenColor + } + ColorBox { + text: "mediumGreenColor" + color: __style.mediumGreenColor + } + ColorBox { + text: "grayColor" + color: __style.grayColor + } + } + } +} From 4effcec10054db91fd5de7874b84ca1a92d6990d Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 10:47:55 +0100 Subject: [PATCH 09/19] icons page --- app/mmstyle.h | 2 +- gallery/qml/IconBox.qml | 17 +- gallery/qml/pages/IconsPage.qml | 341 ++++++++++++++++++-------------- 3 files changed, 207 insertions(+), 153 deletions(-) diff --git a/app/mmstyle.h b/app/mmstyle.h index 8d0a74239..eb9892a92 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -243,7 +243,7 @@ class MMStyle: public QObject QUrl transportationIcon() {return QUrl( "qrc:/Transportation.svg" );} QUrl waterResourcesIcon() {return QUrl( "qrc:/Water resources.svg" );} QUrl xTwitterIcon() {return QUrl( "qrc:/X Twitter.svg" );} - QUrl youtubeIcon() {return QUrl( "qrc:/Toutube.svg" );} + QUrl youtubeIcon() {return QUrl( "qrc:/Youtube.svg" );} QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); } QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); } diff --git a/gallery/qml/IconBox.qml b/gallery/qml/IconBox.qml index e98a5bffa..827d9a071 100644 --- a/gallery/qml/IconBox.qml +++ b/gallery/qml/IconBox.qml @@ -11,14 +11,15 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../../app/qml/components" +import "../app/qml/components" Column { spacing: 5 id: root - property var source - property var text + required property var source + required property var text + property bool colorise: false Label { text: root.text @@ -27,14 +28,22 @@ Column { Rectangle { width: 50 height: 50 - // color: root.color border.color: "gray" MMIcon { + id: icon + width: parent.width height: parent.height source: root.source } + + } + Component.onCompleted: { + if (root.colorise) { + icon.color = "black" + } + } } diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml index 33aa43aea..9a6b0c616 100644 --- a/gallery/qml/pages/IconsPage.qml +++ b/gallery/qml/pages/IconsPage.qml @@ -21,7 +21,7 @@ Column { property int rectSize: 10 GroupBox { - title: "Fonts" + title: "Icons" background: Rectangle { color: "white" border.color: "gray" @@ -35,59 +35,118 @@ Column { Row { spacing: 20 anchors.fill: parent - Label { - text: "t1" - font: __style.t1 - } - Label { - text: "t2" - font: __style.t2 - } - Label { - text: "t3" - font: __style.t3 - } - Label { - text: "t4" - font: __style.t4 - } - Label { - text: "t5" - font: __style.t5 - } - Label { - text: "p1" - font: __style.p1 - } - Label { - text: "p2" - font: __style.p2 - } - Label { - text: "p3" - font: __style.p3 - } - Label { - text: "p4" - font: __style.p4 - } - Label { - text: "p5" - font: __style.p5 - } - Label { - text: "p6" - font: __style.p6 - } - Label { - text: "p7" - font: __style.p7 + IconBox { + text: "arrowDownIcon" + source: __style.arrowDownIcon + } + IconBox { + text: "arrowLinkRightIcon" + source: __style.arrowLinkRightIcon + colorise: true + } + IconBox { + text: "arrowUpIcon" + source: __style.arrowUpIcon + } + IconBox { + text: "backIcon" + source: __style.backIcon + } + IconBox { + text: "calendarIcon" + source: __style.calendarIcon + } + IconBox { + text: "checkmarkIcon" + source: __style.checkmarkIcon + } + IconBox { + text: "closeButtonIcon" + source: __style.closeButtonIcon + } + IconBox { + text: "closeIcon" + source: __style.closeIcon + colorise: true + } + IconBox { + text: "deleteIcon" + source: __style.deleteIcon + colorise: true + } + IconBox { + text: "doneIcon" + source: __style.doneIcon + } + IconBox { + text: "downloadIcon" + source: __style.downloadIcon + } + IconBox { + text: "editIcon" + source: __style.editIcon + colorise: true + } + IconBox { + text: "errorIcon" + source: __style.errorIcon + } + IconBox { + text: "hideIcon" + source: __style.hideIcon + } + IconBox { + text: "infoIcon" + source: __style.infoIcon + } + IconBox { + text: "moreIcon" + source: __style.moreIcon + colorise: true + } + IconBox { + text: "morePhotosIcon" + source: __style.morePhotosIcon + colorise: true + } + IconBox { + text: "projectButtonMoreIcon" + source: __style.projectButtonMoreIcon + } + IconBox { + text: "qrCodeIcon" + source: __style.qrCodeIcon + } + IconBox { + text: "searchIcon" + source: __style.searchIcon + } + IconBox { + text: "showIcon" + source: __style.showIcon + } + IconBox { + text: "stopIcon" + source: __style.stopIcon + colorise: true + } + IconBox { + text: "syncIcon" + source: __style.syncIcon + } + IconBox { + text: "waitingIcon" + source: __style.waitingIcon + } + IconBox { + text: "xMarkIcon" + source: __style.xMarkIcon } } } GroupBox { - title: "Colors - primary palette" + title: "Icons - How you found us" background: Rectangle { color: "white" border.color: "gray" @@ -101,31 +160,47 @@ Column { Row { spacing: 20 anchors.fill: parent - ColorBox { - text: "grassColor" - color: __style.grassColor + IconBox { + text: "searchIcon" + source: __style.searchIcon + } + IconBox { + text: "termsIcon" + source: __style.termsIcon + } + IconBox { + text: "mouthIcon" + source: __style.mouthIcon + } + IconBox { + text: "qgisIcon" + source: __style.qgisIcon + } + IconBox { + text: "subscriptionsIcon" + source: __style.subscriptionsIcon } - ColorBox { - text: "forestColor" - color: __style.forestColor + IconBox { + text: "teacherIcon" + source: __style.teacherIcon } - ColorBox { - text: "nightColor" - color: __style.nightColor + IconBox { + text: "briefcaseIcon" + source: __style.briefcaseIcon } - ColorBox { - text: "whiteColor" - color: __style.whiteColor + IconBox { + text: "socialMediaIcon" + source: __style.socialMediaIcon } - ColorBox { - text: "transparentColor" - color: __style.transparentColor + IconBox { + text: "otherIcon" + source: __style.otherIcon } } } GroupBox { - title: "Colors - additional colors" + title: "Icons - Social" background: Rectangle { color: "white" border.color: "gray" @@ -139,51 +214,35 @@ Column { Row { spacing: 20 anchors.fill: parent - ColorBox { - text: "sandColor" - color: __style.sandColor - } - ColorBox { - text: "sunsetColor" - color: __style.sunsetColor - } - ColorBox { - text: "sunColor" - color: __style.sunColor - } - ColorBox { - text: "earthColor" - color: __style.earthColor - } - ColorBox { - text: "roseColor" - color: __style.roseColor + IconBox { + text: "youtubeIcon" + source: __style.youtubeIcon } - ColorBox { - text: "skyColor" - color: __style.skyColor + IconBox { + text: "xTwitterIcon" + source: __style.xTwitterIcon } - ColorBox { - text: "grapeColor" - color: __style.grapeColor + IconBox { + text: "facebookIcon" + source: __style.facebookIcon } - ColorBox { - text: "deepOceanColor" - color: __style.deepOceanColor + IconBox { + text: "linkedinIcon" + source: __style.linkedinIcon } - ColorBox { - text: "purpleColor" - color: __style.purpleColor + IconBox { + text: "mastodonIcon" + source: __style.mastodonIcon } - ColorBox { - text: "fieldColor" - color: __style.fieldColor + IconBox { + text: "redditIcon" + source: __style.redditIcon } } } GroupBox { - title: "Colors - additional colors" + title: "Icons - Industries" background: Rectangle { color: "white" border.color: "gray" @@ -197,63 +256,49 @@ Column { Row { spacing: 20 anchors.fill: parent - ColorBox { - text: "positiveColor" - color: __style.positiveColor + IconBox { + text: "tractorIcon" + source: __style.tractorIcon } - ColorBox { - text: "warningColor" - color: __style.warningColor + IconBox { + text: "archaeologyIcon" + source: __style.archaeologyIcon } - ColorBox { - text: "negativeColor" - color: __style.negativeColor + IconBox { + text: "engineeringIcon" + source: __style.engineeringIcon } - ColorBox { - text: "informativeColor" - color: __style.informativeColor + IconBox { + text: "electricityIcon" + source: __style.electricityIcon } - } - } - - GroupBox { - title: "Colors - others" - background: Rectangle { - color: "white" - border.color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 - } - - Row { - spacing: 20 - anchors.fill: parent - ColorBox { - text: "nightAlphaColor" - color: __style.nightAlphaColor + IconBox { + text: "environmentalIcon" + source: __style.environmentalIcon + } + IconBox { + text: "stateAndLocalIcon" + source: __style.stateAndLocalIcon } - ColorBox { - text: "errorBgInputColor" - color: __style.errorBgInputColor + IconBox { + text: "naturalResourcesIcon" + source: __style.naturalResourcesIcon } - ColorBox { - text: "shadowColor" - color: __style.shadowColor + IconBox { + text: "telecommunicationIcon" + source: __style.telecommunicationIcon } - ColorBox { - text: "lightGreenColor" - color: __style.lightGreenColor + IconBox { + text: "transportationIcon" + source: __style.transportationIcon } - ColorBox { - text: "mediumGreenColor" - color: __style.mediumGreenColor + IconBox { + text: "waterResourcesIcon" + source: __style.waterResourcesIcon } - ColorBox { - text: "grayColor" - color: __style.grayColor + IconBox { + text: "othersIcon" + source: __style.othersIcon } } } From 969b0a413dbadf4ccd44cbb7198be2c60261513e Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 11:14:26 +0100 Subject: [PATCH 10/19] Finished Header item --- app/qml/components/MMBackButton.qml | 9 ++-- app/qml/components/MMHeader.qml | 71 +++++++++++++++++++++-------- gallery/qml/pages/MiscPage.qml | 25 ++++++++-- 3 files changed, 80 insertions(+), 25 deletions(-) diff --git a/app/qml/components/MMBackButton.qml b/app/qml/components/MMBackButton.qml index 653d3b8c4..658ef2537 100644 --- a/app/qml/components/MMBackButton.qml +++ b/app/qml/components/MMBackButton.qml @@ -15,8 +15,11 @@ import "." RoundButton { id: control - implicitWidth: icon.width * 2 - implicitHeight: icon.height * 2 + implicitWidth: 40 * __dp + implicitHeight: 40 * __dp + + property color color: __style.whiteColor + property color hoverColor: __style.mediumGreenColor contentItem: MMIcon { id: icon @@ -26,7 +29,7 @@ RoundButton { } background: Rectangle { - color: control.down || control.hovered ? __style.mediumGreenColor : __style.lightGreenColor + color: control.down || control.hovered ? control.hoverColor : control.color radius: control.implicitHeight / 2 } } diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml index 61f64ddcd..498f56247 100644 --- a/app/qml/components/MMHeader.qml +++ b/app/qml/components/MMHeader.qml @@ -1,5 +1,3 @@ - - /*************************************************************************** * * * This program is free software; you can redistribute it and/or modify * @@ -8,37 +6,74 @@ * (at your option) any later version. * * * ***************************************************************************/ + import QtQuick -import QtQuick.Layouts import QtQuick.Controls -RowLayout { +Row { id: root - signal backClicked - /* translate in parent! */ required property var headerTitle - /* -1 no step bar shown; 1, 2, 3 */ property int step: -1 - property bool backVisible: true - MMBackButton { - visible: backVisible - onClicked: root.backClicked() + signal backClicked + + width: parent.width + spacing: 5 * __dp + + Row { + id: backButton + + width: 60 * __dp + + MMBackButton { + visible: backVisible + + onClicked: root.backClicked() + } + + Item { + id: space + + width: 20 * __dp + height: 1 + visible: backButton.visible + } } - Label { - text: headerTitle - font: __style.p2 + Text { + anchors.verticalCenter: parent.verticalCenter + width: { + if(backButton.visible || progressBar.visible) + return root.width - (backButton.visible ? backButton.width + root.spacing : 0) + - progressBar.width - root.spacing + return root.width + } + text: root.headerTitle + font: __style.t4 color: __style.forestColor + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter } - MMProgressBar { - width: 50 - visible: step > 0 - position: step > 0 ? step / 3 : 0 + Item { + width: progressBar.width + height: progressBar.height + anchors.verticalCenter: parent.verticalCenter + + MMProgressBar { + id: progressBar + + width: 60 * __dp + height: 4 * __dp + + color: __style.grassColor + progressColor: __style.forestColor + visible: root.step > 0 + position: root.step > 0 ? root.step / 3 : 0 + } } } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index c546d7652..121aa522e 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -14,6 +14,8 @@ import QtQuick.Controls.Basic import "../../app/qml/components" Column { + id: page + padding: 20 spacing: 5 @@ -80,8 +82,10 @@ Column { GroupBox { title: "MMHeader" + width: page.width - 2 * page.padding + background: Rectangle { - color: "white" + color: __style.lightGreenColor border.color: "gray" } label: Label { @@ -93,14 +97,27 @@ Column { Column { spacing: 20 anchors.fill: parent + + MMHeader { - headerTitle: "With Progress" - step: 1 + headerTitle: "Only title" + backVisible: false + step: -1 } MMHeader { - headerTitle: "No Back" + headerTitle: "Title with back button" + step: 0 + } + + MMHeader { + headerTitle: "Title with progress bar" backVisible: false + step: 1 + } + + MMHeader { + headerTitle: "Title with back button and Progress bar" step: 2 } } From e352f63be473865d9ce6b6a6f1531fdbdeb236c8 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 11:23:50 +0100 Subject: [PATCH 11/19] start on how you found us --- app/qml/onboarding/MMHowYouFoundUs.qml | 73 ++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index e352d22bb..f8d86cfed 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -18,6 +18,37 @@ Page { signal backClicked signal continueClicked + + ListModel { + id: howYouFoundUsModel + + /* + ListElement { + channel: qsTr("Search engine (Google, ...)") + //channelIcon: __style.searchIcon + } + ListElement { + channel: qsTr("Social Media") + //channelIcon: __style.socialMediaIcon + details: [ + ListElement { + media: "YouTube" + //mediaIcon: __style.youtubeIcon + }, + ListElement { + media: "X (formerly Twitter)" + //mediaIcon: __style.xTwitterIcon + } + ] + } + ListElement { + channel: qsTr("Other") + // channelIcon: __style.otherIcon + } + + */ + } + Column { MMHeader { headerTitle: qsTr("How did you learn about us") @@ -26,6 +57,48 @@ Page { onBackClicked: root.backClicked() } + TreeView { + model: howYouFoundUsModel + + delegate: Item { + id: treeDelegate + + implicitWidth: padding + label.x + label.implicitWidth + padding + implicitHeight: label.implicitHeight * 1.5 + + readonly property real indent: 20 + readonly property real padding: 5 + + // Assigned to by TreeView: + required property TreeView treeView + required property bool isTreeNode + required property bool expanded + required property int hasChildren + required property int depth + + TapHandler { + onTapped: treeView.toggleExpanded(row) + } + + Text { + id: indicator + visible: treeDelegate.isTreeNode && treeDelegate.hasChildren + x: padding + (treeDelegate.depth * treeDelegate.indent) + anchors.verticalCenter: label.verticalCenter + text: "▸" + rotation: treeDelegate.expanded ? 90 : 0 + } + + Text { + id: label + x: padding + (treeDelegate.isTreeNode ? (treeDelegate.depth + 1) * treeDelegate.indent : 0) + width: treeDelegate.width - treeDelegate.padding - x + clip: true + text: model.channel + } + } + } + MMButton { onClicked: root.continueClicked() text: qsTr("Continue") From d1a453b99884705080388b8ff27f3673efd23430 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 12:08:21 +0100 Subject: [PATCH 12/19] Updated Header item for Drawers. Added heading fonts --- app/mmstyle.h | 9 +++++++++ app/qml/components/MMHeader.qml | 9 ++++++--- gallery/qml/pages/MiscPage.qml | 26 ++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/app/mmstyle.h b/app/mmstyle.h index 146cb9f95..b286508c3 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -23,6 +23,11 @@ class MMStyle: public QObject // standard - font: __style.p5 // extended - font.pixelSize: __style.p5.pixelSize; font.italic: true + // Fonts - Heading + Q_PROPERTY( QFont h1 READ h1 CONSTANT ) + Q_PROPERTY( QFont h2 READ h2 CONSTANT ) + Q_PROPERTY( QFont h3 READ h3 CONSTANT ) + // Fonts - Title Q_PROPERTY( QFont t1 READ t1 CONSTANT ) Q_PROPERTY( QFont t2 READ t2 CONSTANT ) @@ -124,6 +129,10 @@ class MMStyle: public QObject {} ~MMStyle() = default; + QFont h1() {return fontFactory( 48, true );} + QFont h2() {return fontFactory( 36, true );} + QFont h3() {return fontFactory( 24, true );} + QFont t1() {return fontFactory( 18, true );} QFont t2() {return fontFactory( 16, true );} QFont t3() {return fontFactory( 14, true );} diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml index 498f56247..a5f794c78 100644 --- a/app/qml/components/MMHeader.qml +++ b/app/qml/components/MMHeader.qml @@ -14,10 +14,12 @@ Row { id: root /* translate in parent! */ - required property var headerTitle + required property string headerTitle /* -1 no step bar shown; 1, 2, 3 */ property int step: -1 property bool backVisible: true + property color backColor: __style.whiteColor + property font titleFont: __style.t4 signal backClicked @@ -30,7 +32,8 @@ Row { width: 60 * __dp MMBackButton { - visible: backVisible + visible: root.backVisible + color: root.backColor onClicked: root.backClicked() } @@ -53,7 +56,7 @@ Row { return root.width } text: root.headerTitle - font: __style.t4 + font: root.titleFont color: __style.forestColor wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index 121aa522e..6d0d50274 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -123,6 +123,32 @@ Column { } } + GroupBox { + title: "MMHeader (for Drawer)" + width: page.width - 2 * page.padding + + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + + MMHeader { + headerTitle: "Drawer title" + titleFont: __style.h3 + backColor: __style.lightGreenColor + } + } + } + GroupBox { title: "MMHlineText" background: Rectangle { From a3268c7f9714091aee552013b2eb60ebb2b8d587 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 13:32:31 +0100 Subject: [PATCH 13/19] Added H1-3 fonts. Fixed colors in dark mode --- gallery/qml/ColorBox.qml | 2 +- gallery/qml/pages/MiscPage.qml | 255 +++++++++++----------- gallery/qml/pages/StylePage.qml | 360 +++++++++++++++++--------------- 3 files changed, 328 insertions(+), 289 deletions(-) diff --git a/gallery/qml/ColorBox.qml b/gallery/qml/ColorBox.qml index e9e54f914..fd9bee109 100644 --- a/gallery/qml/ColorBox.qml +++ b/gallery/qml/ColorBox.qml @@ -18,7 +18,7 @@ Column { property var color property var text - Label { + Text { text: root.text } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index 6d0d50274..9cab6b2fc 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -13,18 +13,83 @@ import QtQuick.Controls.Basic import "../../app/qml/components" -Column { +ScrollView { id: page + width: mainColumn.width - 20 - padding: 20 - spacing: 5 - - Row { + Column { + id: mainColumn + width: page.width + padding: 20 spacing: 5 + + Row { + spacing: 5 + GroupBox { + title: "MMProgressBar" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMProgressBar { + position: 0 + } + MMProgressBar { + position: 0.6 + } + } + } + + GroupBox { + title: "MMProgressBar" + background: Rectangle { + color: "white" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Column { + spacing: 20 + anchors.fill: parent + MMProgressBar { + width: 60 * __dp + height: 4 * __dp + + position: 0 + color: __style.grassColor + progressColor: __style.forestColor + } + MMProgressBar { + width: 60 * __dp + height: 4 * __dp + + position: 0.6 + color: __style.grassColor + progressColor: __style.forestColor + } + } + } + } + GroupBox { - title: "MMProgressBar" + title: "MMHeader" + width: page.width - 2 * page.padding + background: Rectangle { - color: "white" + color: __style.lightGreenColor border.color: "gray" } label: Label { @@ -36,17 +101,36 @@ Column { Column { spacing: 20 anchors.fill: parent - MMProgressBar { - position: 0 + + + MMHeader { + headerTitle: "Only title" + backVisible: false + step: -1 } - MMProgressBar { - position: 0.6 + + MMHeader { + headerTitle: "Title with back button" + step: 0 + } + + MMHeader { + headerTitle: "Title with progress bar" + backVisible: false + step: 1 + } + + MMHeader { + headerTitle: "Title with back button and Progress bar" + step: 2 } } } GroupBox { - title: "MMProgressBar" + title: "MMHeader (for Drawer)" + width: page.width - 2 * page.padding + background: Rectangle { color: "white" border.color: "gray" @@ -60,133 +144,54 @@ Column { Column { spacing: 20 anchors.fill: parent - MMProgressBar { - width: 60 * __dp - height: 4 * __dp - - position: 0 - color: __style.grassColor - progressColor: __style.forestColor - } - MMProgressBar { - width: 60 * __dp - height: 4 * __dp - position: 0.6 - color: __style.grassColor - progressColor: __style.forestColor + MMHeader { + headerTitle: "Drawer title" + titleFont: __style.h3 + backColor: __style.lightGreenColor } } } - } - - GroupBox { - title: "MMHeader" - width: page.width - 2 * page.padding - background: Rectangle { - color: __style.lightGreenColor - border.color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 - } - - Column { - spacing: 20 - anchors.fill: parent - - - MMHeader { - headerTitle: "Only title" - backVisible: false - step: -1 - } - - MMHeader { - headerTitle: "Title with back button" - step: 0 + GroupBox { + title: "MMHlineText" + background: Rectangle { + color: "white" + border.color: "gray" } - - MMHeader { - headerTitle: "Title with progress bar" - backVisible: false - step: 1 + label: Label { + color: "black" + text: parent.title + padding: 5 } - MMHeader { - headerTitle: "Title with back button and Progress bar" - step: 2 + Column { + spacing: 20 + anchors.fill: parent + MMHlineText { + title: "My text is great" + } } } - } - - GroupBox { - title: "MMHeader (for Drawer)" - width: page.width - 2 * page.padding - background: Rectangle { - color: "white" - border.color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 - } - - Column { - spacing: 20 - anchors.fill: parent - - MMHeader { - headerTitle: "Drawer title" - titleFont: __style.h3 - backColor: __style.lightGreenColor + GroupBox { + title: "MMTextBubble" + background: Rectangle { + color: "gray" } - } - } - - GroupBox { - title: "MMHlineText" - background: Rectangle { - color: "white" - border.color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 - } - - Column { - spacing: 20 - anchors.fill: parent - MMHlineText { - title: "My text is great" + label: Label { + color: "black" + text: parent.title + padding: 5 } - } - } - - GroupBox { - title: "MMTextBubble" - background: Rectangle { - color: "gray" - } - label: Label { - color: "black" - text: parent.title - padding: 5 - } - Column { - spacing: 20 - anchors.fill: parent - MMTextBubble { - title: "My text is great" - description: "My text is great. y text is great My text is great. y text is great. y text is great" + Column { + spacing: 20 + anchors.fill: parent + MMTextBubble { + title: "My text is great" + description: "My text is great. y text is great My text is great. y text is great. y text is great" + } } } } diff --git a/gallery/qml/pages/StylePage.qml b/gallery/qml/pages/StylePage.qml index 33aa43aea..f599071d0 100644 --- a/gallery/qml/pages/StylePage.qml +++ b/gallery/qml/pages/StylePage.qml @@ -15,6 +15,8 @@ import "../../app/qml/components" import "../" Column { + id: page + padding: 20 spacing: 5 @@ -26,62 +28,78 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 } - Row { - spacing: 20 - anchors.fill: parent - Label { - text: "t1" - font: __style.t1 - } - Label { - text: "t2" - font: __style.t2 - } - Label { - text: "t3" - font: __style.t3 - } - Label { - text: "t4" - font: __style.t4 - } - Label { - text: "t5" - font: __style.t5 - } - Label { - text: "p1" - font: __style.p1 - } - Label { - text: "p2" - font: __style.p2 - } - Label { - text: "p3" - font: __style.p3 - } - Label { - text: "p4" - font: __style.p4 - } - Label { - text: "p5" - font: __style.p5 - } - Label { - text: "p6" - font: __style.p6 - } - Label { - text: "p7" - font: __style.p7 + ScrollView { + width: page.width + + Row { + spacing: 20 + anchors.fill: parent + Text { + text: "h1" + font: __style.h1 + } + Text { + text: "h2" + font: __style.h2 + } + Text { + text: "h3" + font: __style.h3 + } + Text { + text: "t1" + font: __style.t1 + } + Text { + text: "t2" + font: __style.t2 + } + Text { + text: "t3" + font: __style.t3 + } + Text { + text: "t4" + font: __style.t4 + } + Text { + text: "t5" + font: __style.t5 + } + Text { + text: "p1" + font: __style.p1 + } + Text { + text: "p2" + font: __style.p2 + } + Text { + text: "p3" + font: __style.p3 + } + Text { + text: "p4" + font: __style.p4 + } + Text { + text: "p5" + font: __style.p5 + } + Text { + text: "p6" + font: __style.p6 + } + Text { + text: "p7" + font: __style.p7 + } } } } @@ -92,34 +110,38 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 } - Row { - spacing: 20 - anchors.fill: parent - ColorBox { - text: "grassColor" - color: __style.grassColor - } - ColorBox { - text: "forestColor" - color: __style.forestColor - } - ColorBox { - text: "nightColor" - color: __style.nightColor - } - ColorBox { - text: "whiteColor" - color: __style.whiteColor - } - ColorBox { - text: "transparentColor" - color: __style.transparentColor + ScrollView { + width: page.width + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "grassColor" + color: __style.grassColor + } + ColorBox { + text: "forestColor" + color: __style.forestColor + } + ColorBox { + text: "nightColor" + color: __style.nightColor + } + ColorBox { + text: "whiteColor" + color: __style.whiteColor + } + ColorBox { + text: "transparentColor" + color: __style.transparentColor + } } } } @@ -130,54 +152,58 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 } - Row { - spacing: 20 - anchors.fill: parent - ColorBox { - text: "sandColor" - color: __style.sandColor - } - ColorBox { - text: "sunsetColor" - color: __style.sunsetColor - } - ColorBox { - text: "sunColor" - color: __style.sunColor - } - ColorBox { - text: "earthColor" - color: __style.earthColor - } - ColorBox { - text: "roseColor" - color: __style.roseColor - } - ColorBox { - text: "skyColor" - color: __style.skyColor - } - ColorBox { - text: "grapeColor" - color: __style.grapeColor - } - ColorBox { - text: "deepOceanColor" - color: __style.deepOceanColor - } - ColorBox { - text: "purpleColor" - color: __style.purpleColor - } - ColorBox { - text: "fieldColor" - color: __style.fieldColor + ScrollView { + width: page.width + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "sandColor" + color: __style.sandColor + } + ColorBox { + text: "sunsetColor" + color: __style.sunsetColor + } + ColorBox { + text: "sunColor" + color: __style.sunColor + } + ColorBox { + text: "earthColor" + color: __style.earthColor + } + ColorBox { + text: "roseColor" + color: __style.roseColor + } + ColorBox { + text: "skyColor" + color: __style.skyColor + } + ColorBox { + text: "grapeColor" + color: __style.grapeColor + } + ColorBox { + text: "deepOceanColor" + color: __style.deepOceanColor + } + ColorBox { + text: "purpleColor" + color: __style.purpleColor + } + ColorBox { + text: "fieldColor" + color: __style.fieldColor + } } } } @@ -188,30 +214,34 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 } - Row { - spacing: 20 - anchors.fill: parent - ColorBox { - text: "positiveColor" - color: __style.positiveColor - } - ColorBox { - text: "warningColor" - color: __style.warningColor - } - ColorBox { - text: "negativeColor" - color: __style.negativeColor - } - ColorBox { - text: "informativeColor" - color: __style.informativeColor + ScrollView { + width: page.width + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "positiveColor" + color: __style.positiveColor + } + ColorBox { + text: "warningColor" + color: __style.warningColor + } + ColorBox { + text: "negativeColor" + color: __style.negativeColor + } + ColorBox { + text: "informativeColor" + color: __style.informativeColor + } } } } @@ -222,38 +252,42 @@ Column { color: "white" border.color: "gray" } - label: Label { + label: Text { color: "black" text: parent.title padding: 5 } - Row { - spacing: 20 - anchors.fill: parent - ColorBox { - text: "nightAlphaColor" - color: __style.nightAlphaColor - } - ColorBox { - text: "errorBgInputColor" - color: __style.errorBgInputColor - } - ColorBox { - text: "shadowColor" - color: __style.shadowColor - } - ColorBox { - text: "lightGreenColor" - color: __style.lightGreenColor - } - ColorBox { - text: "mediumGreenColor" - color: __style.mediumGreenColor - } - ColorBox { - text: "grayColor" - color: __style.grayColor + ScrollView { + width: page.width + + Row { + spacing: 20 + anchors.fill: parent + ColorBox { + text: "nightAlphaColor" + color: __style.nightAlphaColor + } + ColorBox { + text: "errorBgInputColor" + color: __style.errorBgInputColor + } + ColorBox { + text: "shadowColor" + color: __style.shadowColor + } + ColorBox { + text: "lightGreenColor" + color: __style.lightGreenColor + } + ColorBox { + text: "mediumGreenColor" + color: __style.mediumGreenColor + } + ColorBox { + text: "grayColor" + color: __style.grayColor + } } } } From 5f1e90b1120237588a98a2d1fd8a5c39b7fbfcc6 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 14:01:10 +0100 Subject: [PATCH 14/19] Updated MMHlineText --- app/qml/components/MMHlineText.qml | 38 +++++++++++++++++------------- gallery/qml/pages/MiscPage.qml | 9 +++---- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/app/qml/components/MMHlineText.qml b/app/qml/components/MMHlineText.qml index a01feaf6c..eb07ee277 100644 --- a/app/qml/components/MMHlineText.qml +++ b/app/qml/components/MMHlineText.qml @@ -8,32 +8,38 @@ ***************************************************************************/ import QtQuick -import QtQuick.Controls -import QtQuick.Layouts -RowLayout { +Row { + id: root - required property var title + required property string title + property color lineColor: __style.grayColor + property color textColor: __style.nightColor - id: root - spacing: 10 + spacing: 15 Rectangle { - id: topRect - width: 50 + id: leftLine + + width: (root.width - text.width) / 2 - root.spacing height: 1 - color: __style.forestColor + anchors.verticalCenter: parent.verticalCenter + color: root.lineColor } - Label { - text: title - font: __style.p5 - color: topRect.color + Text { + id: text + + text: root.title + font: __style.t3 + color: root.textColor + wrapMode: Text.WordWrap } Rectangle { - width: topRect.width - height: topRect.height - color: topRect.color + width: leftLine.width + height: leftLine.height + color: leftLine.color + anchors.verticalCenter: parent.verticalCenter } } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index 9cab6b2fc..f24a61c9c 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -15,12 +15,12 @@ import "../../app/qml/components" ScrollView { id: page - width: mainColumn.width - 20 Column { id: mainColumn + + x: 20 width: page.width - padding: 20 spacing: 5 Row { @@ -86,7 +86,7 @@ ScrollView { GroupBox { title: "MMHeader" - width: page.width - 2 * page.padding + width: page.width - 40 background: Rectangle { color: __style.lightGreenColor @@ -129,7 +129,7 @@ ScrollView { GroupBox { title: "MMHeader (for Drawer)" - width: page.width - 2 * page.padding + width: page.width - 40 background: Rectangle { color: "white" @@ -169,6 +169,7 @@ ScrollView { spacing: 20 anchors.fill: parent MMHlineText { + width: page.width - 64 title: "My text is great" } } From 562d698cfe3cf5b19d5ac5395baf2c745275c6b3 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 14:36:01 +0100 Subject: [PATCH 15/19] Updated MMTextBubble.qml --- app/qml/components/MMTextBubble.qml | 86 +++++++++++++++-------------- gallery/qml/pages/MiscPage.qml | 5 +- 2 files changed, 48 insertions(+), 43 deletions(-) diff --git a/app/qml/components/MMTextBubble.qml b/app/qml/components/MMTextBubble.qml index 9a50b8e5d..f72270e99 100644 --- a/app/qml/components/MMTextBubble.qml +++ b/app/qml/components/MMTextBubble.qml @@ -14,57 +14,61 @@ import QtQuick.Layouts Item { id: root - height: 100 - width: 300 + height: row.height - required property var title - required property var description + required property string title + required property string description Rectangle { - width: root.width - height: root.height - color: __style.whiteColor - radius: 15 + width: root.width + height: row.height + color: __style.whiteColor + radius: __style.inputRadius } Row { - padding: 10 - spacing: 10 - anchors.fill: parent + id: row - Rectangle { - implicitWidth: radius * 2 - implicitHeight: radius * 2 - // x: control.leftPadding - y: parent.height / 2 - height / 2 - radius: 20 - color: __style.forestColor + padding: 20 * __dp + spacing: 10 * __dp - MMIcon { - id: icon - anchors.centerIn: parent - source: __style.bubbleIcon - } - } + Rectangle { + width: 50 * __dp + height: width + radius: height / 2 + color: __style.forestColor - Column { - id: column - width: 2* root.width / 3 - spacing: 10 - Label { - text: root.title - font: __style.t1 - color: __style.nightColor - wrapMode: Label.WordWrap - } + Image { + id: icon + anchors.centerIn: parent + source: __style.bubbleIcon + } + } + + Column { + id: column + + width: root.width - icon.width - 4 * row.spacing - 2 * row.padding + spacing: 10 * __dp + + Text { + width: parent.width + + text: root.title + font: __style.t3 + color: __style.deepOceanColor + wrapMode: Label.WordWrap + } + + Text { + width: column.width - Label { - text:root.description - font: __style.p5 - color: __style.forestColor - wrapMode: Label.WordWrap - width: column.width - } + text: root.description + font: __style.p6 + color: __style.deepOceanColor + wrapMode: Label.WordWrap + lineHeight: 1.5 } + } } } diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml index f24a61c9c..ce29be52c 100644 --- a/gallery/qml/pages/MiscPage.qml +++ b/gallery/qml/pages/MiscPage.qml @@ -190,8 +190,9 @@ ScrollView { spacing: 20 anchors.fill: parent MMTextBubble { - title: "My text is great" - description: "My text is great. y text is great My text is great. y text is great. y text is great" + width: page.width - 64 + title: "Tip from Mergin Maps" + description: "A good candidate for a workspace name is the name of your team or organisation" } } } From 80b2d111886989c497d4647d3a600509a6dd5d97 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 14:43:17 +0100 Subject: [PATCH 16/19] checkboxes --- .../components/MMIconCheckBoxHorizontal.qml | 54 +++++++++++++ app/qml/components/MMIconCheckBoxVertical.qml | 53 +++++++++++++ app/qml/onboarding/MMHowYouFoundUs.qml | 31 -------- gallery/qml.qrc | 2 + gallery/qml/pages/ChecksPage.qml | 76 +++++++++++++++++++ 5 files changed, 185 insertions(+), 31 deletions(-) create mode 100644 app/qml/components/MMIconCheckBoxHorizontal.qml create mode 100644 app/qml/components/MMIconCheckBoxVertical.qml diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml new file mode 100644 index 000000000..f40145619 --- /dev/null +++ b/app/qml/components/MMIconCheckBoxHorizontal.qml @@ -0,0 +1,54 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import "." + +CheckBox { + id: control + + required property var sourceIcon + property bool small: false + + width: (control.small ? 90 : 220) * __dp + height: (control.small ? 30 : 50) * __dp + + indicator: Rectangle { + id: iconBgRectangle + width: (control.small ? 24 : 40) * __dp + height: (control.small ? 24 : 40) * __dp + y: control.height / 2 - height / 2 + radius: width / 2 + color: control.checked ? __style.whiteColor : __style.lightGreenColor + + MMIcon { + id: icon + width: (control.small ? 16 : 24) * __dp + height: (control.small ? 16 : 24) * __dp + anchors.centerIn: parent + source: control.sourceIcon + color: __style.forestColor + } + } + + contentItem: Text { + text: control.text + font: __style.t3 + color: control.checked ? __style.whiteColor : __style.nightColor + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + } + + background: Rectangle { + radius: 12 * __dp + color: control.checked ? __style.forestColor: __style.whiteColor + } +} diff --git a/app/qml/components/MMIconCheckBoxVertical.qml b/app/qml/components/MMIconCheckBoxVertical.qml new file mode 100644 index 000000000..df711c409 --- /dev/null +++ b/app/qml/components/MMIconCheckBoxVertical.qml @@ -0,0 +1,53 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import "." + +CheckBox { + id: control + + required property var sourceIcon + required property var bgColorIcon + + width: (control.small ? 90 : 220) * __dp + height: (control.small ? 30 : 50) * __dp + + indicator: Rectangle { + id: iconBgRectangle + width: (control.small ? 24 : 40) * __dp + height: (control.small ? 24 : 40) * __dp + y: control.height / 2 - height / 2 + radius: width / 2 + color: control.bgColorIcon + + MMIcon { + id: icon + width: (control.small ? 16 : 24) * __dp + height: (control.small ? 16 : 24) * __dp + anchors.centerIn: parent + source: control.sourceIcon + } + } + + contentItem: Text { + text: control.text + font: __style.t3 + color: control.checked ? __style.whiteColor : __style.nightColor + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + } + + background: Rectangle { + radius: 12 * __dp + color: control.checked ? __style.forestColor: __style.whiteColor + } +} diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index f8d86cfed..71f7b7ff3 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -18,37 +18,6 @@ Page { signal backClicked signal continueClicked - - ListModel { - id: howYouFoundUsModel - - /* - ListElement { - channel: qsTr("Search engine (Google, ...)") - //channelIcon: __style.searchIcon - } - ListElement { - channel: qsTr("Social Media") - //channelIcon: __style.socialMediaIcon - details: [ - ListElement { - media: "YouTube" - //mediaIcon: __style.youtubeIcon - }, - ListElement { - media: "X (formerly Twitter)" - //mediaIcon: __style.xTwitterIcon - } - ] - } - ListElement { - channel: qsTr("Other") - // channelIcon: __style.otherIcon - } - - */ - } - Column { MMHeader { headerTitle: qsTr("How did you learn about us") diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 932f5ddf0..6fe9b87f3 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -67,5 +67,7 @@ ../app/qml/components/MMHlineText.qml ../app/qml/components/MMTextBubble.qml ../app/qml/components/MMBackButton.qml + ../app/qml/components/MMIconCheckBoxHorizontal.qml + ../app/qml/components/MMIconCheckBoxVertical.qml diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml index 2496aa812..9c0733cb7 100644 --- a/gallery/qml/pages/ChecksPage.qml +++ b/gallery/qml/pages/ChecksPage.qml @@ -52,6 +52,82 @@ Column { } } + GroupBox { + title: "MMIconCheckBoxHorizontal" + background: Rectangle { + color: __style.lightGreenColor + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 10 + anchors.fill: parent + + MMIconCheckBoxHorizontal { + checked: false + sourceIcon: __style.qgisIcon + text: "QGIS website" + } + + MMIconCheckBoxHorizontal { + checked: true + sourceIcon: __style.qgisIcon + text: "QGIS website" + } + + MMIconCheckBoxHorizontal { + checked: false + sourceIcon: __style.redditIcon + text: "Reddit" + small: true + } + + MMIconCheckBoxHorizontal { + checked: true + sourceIcon: __style.redditIcon + text: "Reddit" + small: true + } + } + } + + GroupBox { + title: "MMIconCheckBoxVertical" + background: Rectangle { + color: __style.lightGreenColor + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 10 + anchors.fill: parent + + MMIconCheckBoxVertical { + checked: false + sourceIcon: __style.archaeologyIcon + text: "Archeology" + bgColorIcon: __style.sandColor + } + + MMIconCheckBoxVertical { + checked: true + sourceIcon: __style.tractorIcon + text: "Agriculture" + bgColorIcon: __style.sunColor + } + } + } + GroupBox { title: "MMRadioButton" background: Rectangle { From 70ff9532df0b2511f64486018b996103dfe4a0a9 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 15:20:23 +0100 Subject: [PATCH 17/19] how you found us logic --- app/qml/onboarding/MMHowYouFoundUs.qml | 208 ++++++++++++++++++++----- 1 file changed, 167 insertions(+), 41 deletions(-) diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index 71f7b7ff3..a04bd560d 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -18,6 +18,50 @@ Page { signal backClicked signal continueClicked + function uncheck(except, isChecked, items) { + if (!isChecked) + return; + + items.forEach( function(item) { + if (item !== except) { + item.checked = false + } + } ) + } + + function uncheckAllPrimary(except, isChecked) { + + var items = [ + searchSource, + blogSource, + mouthSource, + qgisSource, + applicationStoreSource, + teacherSource, + conferenceSource, + socialMediaSource, + otherSource + ] + + uncheck(except, isChecked, items) + } + + function uncheckAllSocialMedia(except, isChecked) { + if (!isChecked) + return; + + var items = [ + youtubeSocialMediaSource, + twitterSocialMediaSource, + facebookSocialMediaSource, + linkedinSocialMediaSource, + mastodonSocialMediaSource, + redditSocialMediaSource, + ] + + uncheck(except, isChecked, items) + } + Column { MMHeader { headerTitle: qsTr("How did you learn about us") @@ -26,47 +70,129 @@ Page { onBackClicked: root.backClicked() } - TreeView { - model: howYouFoundUsModel - - delegate: Item { - id: treeDelegate - - implicitWidth: padding + label.x + label.implicitWidth + padding - implicitHeight: label.implicitHeight * 1.5 - - readonly property real indent: 20 - readonly property real padding: 5 - - // Assigned to by TreeView: - required property TreeView treeView - required property bool isTreeNode - required property bool expanded - required property int hasChildren - required property int depth - - TapHandler { - onTapped: treeView.toggleExpanded(row) - } - - Text { - id: indicator - visible: treeDelegate.isTreeNode && treeDelegate.hasChildren - x: padding + (treeDelegate.depth * treeDelegate.indent) - anchors.verticalCenter: label.verticalCenter - text: "▸" - rotation: treeDelegate.expanded ? 90 : 0 - } - - Text { - id: label - x: padding + (treeDelegate.isTreeNode ? (treeDelegate.depth + 1) * treeDelegate.indent : 0) - width: treeDelegate.width - treeDelegate.padding - x - clip: true - text: model.channel - } - } - } + MMIconCheckBoxHorizontal { + id: searchSource + sourceIcon: __style.searchIcon + text: qsTr("Search engine (Google, ...)") + onToggled: uncheckAllPrimary(searchSource, checked) + } + + MMIconCheckBoxHorizontal { + id: blogSource + sourceIcon: __style.termsIcon + text: qsTr("Blog") + onToggled: uncheckAllPrimary(blogSource, checked) + } + + MMIconCheckBoxHorizontal { + id: mouthSource + sourceIcon: __style.mouthIcon + text: qsTr("Mouth") + onToggled: uncheckAllPrimary(mouthSource, checked) + } + + MMIconCheckBoxHorizontal { + id: qgisSource + sourceIcon: __style.qgisIcon + text: qsTr("QGIS website") + onToggled: uncheckAllPrimary(qgisSource, checked) + } + + MMIconCheckBoxHorizontal { + id: applicationStoreSource + sourceIcon: __style.subscriptionsIcon + text: qsTr("Application store") + onToggled: uncheckAllPrimary(applicationStoreSource, checked) + } + + MMIconCheckBoxHorizontal { + id: teacherSource + sourceIcon: __style.teacherIcon + text: qsTr("Teacher") + onToggled: uncheckAllPrimary(teacherSource, checked) + } + + MMIconCheckBoxHorizontal { + id: conferenceSource + sourceIcon: __style.briefcaseIcon + text: qsTr("Conference") + onToggled: uncheckAllPrimary(conferenceSource, checked) + } + + MMIconCheckBoxHorizontal { + id: socialMediaSource + sourceIcon: __style.socialMediaIcon + text: qsTr("Social media") + onToggled: uncheckAllPrimary(socialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: youtubeSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.youtubeIcon + text: qsTr("YouTube") + small:true + onToggled: uncheckAllSocialMedia(youtubeSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: twitterSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.xTwitterIcon + text: qsTr("Twitter") + small:true + onToggled: uncheckAllSocialMedia(twitterSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: facebookSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.facebookIcon + text: qsTr("Facebook") + small:true + onToggled: uncheckAllSocialMedia(facebookSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: linkedinSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.linkedinIcon + text: qsTr("LinkedIn") + small:true + onToggled: uncheckAllSocialMedia(linkedinSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: mastodonSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.mastodonIcon + text: qsTr("Mastodon") + small:true + onToggled: uncheckAllSocialMedia(mastodonSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: redditSocialMediaSource + visible: socialMediaSource.checked + sourceIcon: __style.redditIcon + text: qsTr("Reddit") + small:true + onToggled: uncheckAllSocialMedia(redditSocialMediaSource, checked) + } + + MMIconCheckBoxHorizontal { + id: otherSource + sourceIcon: __style.otherIcon + text: qsTr("Other") + onToggled: uncheckAllPrimary(otherSource, checked) + } + + MMInput { + id: otherSourceDescription + visible: otherSource.checked + title: qsTr("Source") + placeholderText: qsTr("Please specify the source") + } MMButton { onClicked: root.continueClicked() From 77215d9b513c24d073f3402cdd41f15e0044554a Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 11 Dec 2023 15:35:27 +0100 Subject: [PATCH 18/19] Updated MMIconCheckBoxHorizontal.qml and MMIconCheckBoxVertical.qml --- .../components/MMIconCheckBoxHorizontal.qml | 9 +-- app/qml/components/MMIconCheckBoxVertical.qml | 70 ++++++++++++------- gallery/qml/pages/ChecksPage.qml | 2 +- 3 files changed, 51 insertions(+), 30 deletions(-) diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml index f40145619..368fb733c 100644 --- a/app/qml/components/MMIconCheckBoxHorizontal.qml +++ b/app/qml/components/MMIconCheckBoxHorizontal.qml @@ -18,13 +18,13 @@ CheckBox { required property var sourceIcon property bool small: false - width: (control.small ? 90 : 220) * __dp - height: (control.small ? 30 : 50) * __dp + height: (control.small ? 50 : 80) * __dp indicator: Rectangle { id: iconBgRectangle width: (control.small ? 24 : 40) * __dp height: (control.small ? 24 : 40) * __dp + x: 20 * __dp y: control.height / 2 - height / 2 radius: width / 2 color: control.checked ? __style.whiteColor : __style.lightGreenColor @@ -44,11 +44,12 @@ CheckBox { font: __style.t3 color: control.checked ? __style.whiteColor : __style.nightColor verticalAlignment: Text.AlignVCenter - leftPadding: control.indicator.width + leftPadding: control.indicator.width + 30 * __dp + rightPadding: 20 * __dp } background: Rectangle { - radius: 12 * __dp + radius: __style.inputRadius color: control.checked ? __style.forestColor: __style.whiteColor } } diff --git a/app/qml/components/MMIconCheckBoxVertical.qml b/app/qml/components/MMIconCheckBoxVertical.qml index df711c409..672a47118 100644 --- a/app/qml/components/MMIconCheckBoxVertical.qml +++ b/app/qml/components/MMIconCheckBoxVertical.qml @@ -18,36 +18,56 @@ CheckBox { required property var sourceIcon required property var bgColorIcon - width: (control.small ? 90 : 220) * __dp - height: (control.small ? 30 : 50) * __dp - - indicator: Rectangle { - id: iconBgRectangle - width: (control.small ? 24 : 40) * __dp - height: (control.small ? 24 : 40) * __dp - y: control.height / 2 - height / 2 - radius: width / 2 - color: control.bgColorIcon - - MMIcon { - id: icon - width: (control.small ? 16 : 24) * __dp - height: (control.small ? 16 : 24) * __dp - anchors.centerIn: parent - source: control.sourceIcon + width: 170 * __dp + height: 158 * __dp + + indicator: Item {} + + contentItem: Column { + padding: 20 * __dp + spacing: 10 * __dp + + Item { + width: parent.width + height: 50 * __dp + anchors.horizontalCenter: parent.horizontalCenter + + Rectangle { + id: iconBgRectangle + + width: 50 * __dp + height: width + radius: width / 2 + anchors.horizontalCenter: parent.horizontalCenter + color: control.bgColorIcon + + MMIcon { + id: icon + + width: (control.small ? 16 : 24) * __dp + height: (control.small ? 16 : 24) * __dp + anchors.centerIn: parent + source: control.sourceIcon + } + } } - } + Text { + width: parent.width - 2 * parent.padding + height: control.height - 2 * parent.padding - parent.spacing - iconBgRectangle.height + anchors.horizontalCenter: parent.horizontalCenter - contentItem: Text { - text: control.text - font: __style.t3 - color: control.checked ? __style.whiteColor : __style.nightColor - verticalAlignment: Text.AlignVCenter - leftPadding: control.indicator.width + text: control.text + font: __style.t3 + color: control.checked ? __style.whiteColor : __style.nightColor + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + lineHeight: 1.5 + } } background: Rectangle { - radius: 12 * __dp + radius: __style.inputRadius color: control.checked ? __style.forestColor: __style.whiteColor } } diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml index 9c0733cb7..6b20522b4 100644 --- a/gallery/qml/pages/ChecksPage.qml +++ b/gallery/qml/pages/ChecksPage.qml @@ -122,7 +122,7 @@ Column { MMIconCheckBoxVertical { checked: true sourceIcon: __style.tractorIcon - text: "Agriculture" + text: "Agriculture Long text" bgColorIcon: __style.sunColor } } From 4fff19dbe77af15fa113adddded736145c2e60ba Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Mon, 11 Dec 2023 15:38:30 +0100 Subject: [PATCH 19/19] which industry page --- app/qml/onboarding/MMHowYouFoundUs.qml | 10 +-- app/qml/onboarding/MMWhichIndustry.qml | 118 ++++++++++++++++++++++++- 2 files changed, 122 insertions(+), 6 deletions(-) diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml index a04bd560d..2c6cf9df9 100644 --- a/app/qml/onboarding/MMHowYouFoundUs.qml +++ b/app/qml/onboarding/MMHowYouFoundUs.qml @@ -52,11 +52,11 @@ Page { var items = [ youtubeSocialMediaSource, - twitterSocialMediaSource, - facebookSocialMediaSource, - linkedinSocialMediaSource, - mastodonSocialMediaSource, - redditSocialMediaSource, + twitterSocialMediaSource, + facebookSocialMediaSource, + linkedinSocialMediaSource, + mastodonSocialMediaSource, + redditSocialMediaSource, ] uncheck(except, isChecked, items) diff --git a/app/qml/onboarding/MMWhichIndustry.qml b/app/qml/onboarding/MMWhichIndustry.qml index be9ae349e..8d49c0ba8 100644 --- a/app/qml/onboarding/MMWhichIndustry.qml +++ b/app/qml/onboarding/MMWhichIndustry.qml @@ -18,6 +18,31 @@ Page { signal backClicked signal continueClicked + function uncheckAll(except, isChecked) { + if (!isChecked) + return; + + var items = [ + agricultureSource, + archaeologySource, + engineeringSource, + electricitySource, + environmentalSource, + stateAndLocalSource, + naturalResourcesSource, + telecommunicationSource, + transportationSource, + waterResourcesSource, + othersSource + ] + + items.forEach( function(item) { + if (item !== except) { + item.checked = false + } + } ) + } + Column { MMHeader { headerTitle: qsTr("Which industry") @@ -26,7 +51,98 @@ Page { onBackClicked: root.backClicked() } - ToolButton { + Grid { + columns: 2 + spacing: 10 + + MMIconCheckBoxVertical { + id: agricultureSource + sourceIcon: __style.tractorIcon + text: qsTr("Agriculture") + onToggled: uncheckAll(agricultureSource, checked) + bgColorIcon: __style.sunColor + } + MMIconCheckBoxVertical { + id: archaeologySource + sourceIcon: __style.archaeologyIcon + text: qsTr("Archaeology") + onToggled: uncheckAll(archaeologySource, checked) + bgColorIcon: __style.sandColor + } + MMIconCheckBoxVertical { + id: engineeringSource + sourceIcon: __style.engineeringIcon + text: qsTr("Construction and engineering") + onToggled: uncheckAll(engineeringSource, checked) + bgColorIcon: __style.roseColor + } + MMIconCheckBoxVertical { + id: electricitySource + sourceIcon: __style.electricityIcon + text: qsTr("Electric utilities") + onToggled: uncheckAll(electricitySource, checked) + bgColorIcon: __style.nightColor + } + MMIconCheckBoxVertical { + id: environmentalSource + sourceIcon: __style.environmentalIcon + text: qsTr("Environmental protection") + onToggled: uncheckAll(environmentalSource, checked) + bgColorIcon: __style.fieldColor + } + MMIconCheckBoxVertical { + id: stateAndLocalSource + sourceIcon: __style.stateAndLocalIcon + text: qsTr("Local governments") + onToggled: uncheckAll(stateAndLocalSource, checked) + bgColorIcon: __style.purpleColor + } + MMIconCheckBoxVertical { + id: naturalResourcesSource + sourceIcon: __style.naturalResourcesIcon + text: qsTr("Natural resources") + onToggled: uncheckAll(naturalResourcesSource, checked) + bgColorIcon: __style.earthColor + } + MMIconCheckBoxVertical { + id: telecommunicationSource + sourceIcon: __style.telecommunicationIcon + text: qsTr("Telecom") + onToggled: uncheckAll(telecommunicationSource, checked) + bgColorIcon: __style.deepOceanColor + } + MMIconCheckBoxVertical { + id: transportationSource + sourceIcon: __style.transportationIcon + text: qsTr("Transportation") + onToggled: uncheckAll(transportationSource, checked) + bgColorIcon: __style.skyColor + } + MMIconCheckBoxVertical { + id: waterResourcesSource + sourceIcon: __style.waterResourcesIcon + text: qsTr("Water utilities") + onToggled: uncheckAll(waterResourcesSource, checked) + bgColorIcon: __style.lightGreenColor + } + + MMIconCheckBoxVertical { + id: othersSource + sourceIcon: __style.othersIcon + text: qsTr("Others") + onToggled: uncheckAll(othersSource, checked) + bgColorIcon: __style.sunsetColor + } + } + + MMInput { + id: othersSourceDescription + visible: othersSource.checked + title: qsTr("Industry") + placeholderText: qsTr("Please specify the industry") + } + + MMButton { onClicked: root.continueClicked() text: qsTr("Continue") }