From 002955a7b06319d8413f0916318b92a41d665f12 Mon Sep 17 00:00:00 2001 From: PeterPetrik Date: Mon, 11 Dec 2023 08:15:52 +0100 Subject: [PATCH] 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 0000000000..cf7101ff49 --- /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 0000000000..8075b2f04f --- /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 0000000000..f7180a4ee4 --- /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 0000000000..0912079af6 --- /dev/null +++ b/app/icons/Bubble.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 832b11c2e4..9539140ab9 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 722a190467..93d67f0828 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 ) @@ -97,6 +99,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 ) @@ -160,6 +164,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" );} @@ -177,6 +183,8 @@ class MMStyle: public QObject QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );} QUrl moreIcon() {return QUrl( "qrc:/More.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 0000000000..653d3b8c4c --- /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 4d5ffbe006..61f64ddcd6 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 23231a859c..b583fbbd4a 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 5e045c1151..9a0ff0d588 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 0000000000..8dce7b4513 --- /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 fa6acf3efd..d1e6f18ced 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 c7bd548e9c..25a369fc26 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 8c85053e85..fc057d8e37 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 b6b6213805..58fbb93924 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 088e1aefc0..5a4df54b49 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 3b0a208e6d..0f4a779f9f 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 76c055690f..da927e694b 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 c414b5e6b2..eb994d37dc 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 51bde2173e..a853f9b49f 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 @@ -44,15 +46,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 0e058eb1fa..e9e54f9144 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 c9ac2fbe22..acd06f68ee 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -104,6 +104,10 @@ ApplicationWindow { title: "Initial" source: "InitialGalleryPage.qml" } + ListElement { + title: "Style" + source: "StylePage.qml" + } ListElement { title: "Buttons" source: "ButtonsPage.qml" @@ -144,6 +148,10 @@ ApplicationWindow { title: "Toolbars" source: "ToolbarPage.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 81debb1eb2..81bb7d3c52 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 0000000000..ac77754fe8 --- /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 58b37835b3..510c617f8a 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 0000000000..33aa43aea0 --- /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 + } + } + } +}