From 2aab9b3026f6532cf468afb06239fe6feb623983 Mon Sep 17 00:00:00 2001 From: Lubos Date: Fri, 6 Oct 2023 08:53:23 +0200 Subject: [PATCH] Added new design for animated dialogs (Drawers) and Check items --- app/icons/CloseButton.svg | 5 ++ app/icons/ReachedDataLimitImage.svg | 3 + app/icons/UploadImage.svg | 69 +++++++++++++++++ app/icons/icons.qrc | 3 + app/qmlV2/Style.js | 8 +- app/qmlV2/component/MMButton.qml | 4 +- gallery/qml.qrc | 2 + gallery/qml/Main.qml | 8 ++ gallery/qml/pages/ChecksPage.qml | 115 ++++++++++++++++++++++++++++ gallery/qml/pages/DrawerPage.qml | 67 ++++++++++++++++ 10 files changed, 282 insertions(+), 2 deletions(-) create mode 100644 app/icons/CloseButton.svg create mode 100644 app/icons/ReachedDataLimitImage.svg create mode 100644 app/icons/UploadImage.svg create mode 100644 gallery/qml/pages/ChecksPage.qml create mode 100644 gallery/qml/pages/DrawerPage.qml diff --git a/app/icons/CloseButton.svg b/app/icons/CloseButton.svg new file mode 100644 index 000000000..d49239135 --- /dev/null +++ b/app/icons/CloseButton.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/ReachedDataLimitImage.svg b/app/icons/ReachedDataLimitImage.svg new file mode 100644 index 000000000..a469f63b0 --- /dev/null +++ b/app/icons/ReachedDataLimitImage.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/icons/UploadImage.svg b/app/icons/UploadImage.svg new file mode 100644 index 000000000..717f90585 --- /dev/null +++ b/app/icons/UploadImage.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 6fc220ff9..7f82ade42 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -11,5 +11,8 @@ Arrow Up.svg QR Code.svg Checkmark.svg + CloseButton.svg + UploadImage.svg + ReachedDataLimitImage.svg diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js index c0222cf0b..98c8b2567 100644 --- a/app/qmlV2/Style.js +++ b/app/qmlV2/Style.js @@ -69,8 +69,14 @@ const arrowUpIcon = "qrc:/Arrow Up.svg" const arrowDownIcon = "qrc:/Arrow Down.svg" const qrCodeIcon = "qrc:/QR Code.svg" const checkmarkIcon = "qrc:/Checkmark.svg" +const closeButtonIcon = "qrc:/CloseButton.svg" -const textColor = "black" +// Images +const uploadImage = "qrc:/UploadImage.svg" +const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg" + +// Spacing +const commonSpacing = 20 * __dp function dynamicText() { return "Dynamic text" diff --git a/app/qmlV2/component/MMButton.qml b/app/qmlV2/component/MMButton.qml index 82a5d243b..6c4585c18 100644 --- a/app/qmlV2/component/MMButton.qml +++ b/app/qmlV2/component/MMButton.qml @@ -16,6 +16,8 @@ import "." Button { id: control + property bool transparent: false + contentItem: Text { anchors.centerIn: control font: Qt.font(Style.t3) @@ -31,7 +33,7 @@ Button { } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen + color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen radius: height / 2 } diff --git a/gallery/qml.qrc b/gallery/qml.qrc index a119c2ac4..c555a0b30 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -19,5 +19,7 @@ ../app/qmlV2/component/MMCheckBox.qml ../app/qmlV2/component/MMRadioButton.qml ../app/qmlV2/component/MMSwitch.qml + ../app/qmlV2/component/MMDrawer.qml + qml/pages/DrawerPage.qml diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index e9b29b5df..1859be814 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -100,6 +100,10 @@ ApplicationWindow { } model: ListModel { + ListElement { + title: "Initial" + source: "InitialGalleryPage.qml" + } ListElement { title: "Buttons" source: "ButtonsPage.qml" @@ -120,6 +124,10 @@ ApplicationWindow { title: "Checks" source: "ChecksPage.qml" } + ListElement { + title: "Drawers" + source: "DrawerPage.qml" + } } ScrollIndicator.vertical: ScrollIndicator {} diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml new file mode 100644 index 000000000..6ddb80cba --- /dev/null +++ b/gallery/qml/pages/ChecksPage.qml @@ -0,0 +1,115 @@ +/*************************************************************************** + * * + * 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/qmlV2/component" + +Column { + padding: 20 + spacing: 20 + + GroupBox { + title: "MMCheckBox" + background: Rectangle { + color: "lightGray" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + MMCheckBox { + checked: false + text: checked ? "checked" : "unchecked" + } + MMCheckBox { + checked: true + } + MMCheckBox { + checked: false + enabled: false + } + MMCheckBox { + checked: true + enabled: false + } + } + } + + GroupBox { + title: "MMRadioButton" + background: Rectangle { + color: "lightGray" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + MMRadioButton { + text: "one" + checked: false + } + MMRadioButton { + text: "two" + checked: true + } + MMRadioButton { + text: "three" + enabled: false + checked: false + } + } + } + + GroupBox { + title: "MMSwitch" + background: Rectangle { + color: "lightGray" + border.color: "gray" + } + label: Label { + color: "black" + text: parent.title + padding: 5 + } + + Row { + spacing: 20 + anchors.fill: parent + MMSwitch { + textOn: "ON" + textOff: "OFF" + checked: false + } + MMSwitch { + text: "static" + checked: true + } + MMSwitch { + text: "disabled" + enabled: false + checked: false + } + } + } +} diff --git a/gallery/qml/pages/DrawerPage.qml b/gallery/qml/pages/DrawerPage.qml new file mode 100644 index 000000000..e900ea068 --- /dev/null +++ b/gallery/qml/pages/DrawerPage.qml @@ -0,0 +1,67 @@ +/*************************************************************************** + * * + * 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/qmlV2/component" +import "../../app/qmlV2/Style.js" as Style + +Page { + id: pane + + Column { + width: parent.width + spacing: 10 + + MMButton { + text: "Upload" + onClicked: drawer1.visible = true + } + MMButton { + text: "Reached Data Limit" + onClicked: drawer2.visible = true + } + MMButton { + text: "Synchronization Failed" + onClicked: drawer3.visible = true + } + } + + MMDrawer { + id: drawer1 + + picture: Style.uploadImage + title: "Upload project to Margin?" + description: "This project is currently not uploaded on Mergin. Upload it to Mergin in order to activate synchronization and collaboration." + primaryButton: "Yes, Upload Project" + secondaryButton: "No Cancel" + } + + MMDrawer { + id: drawer2 + + picture: Style.ReachedDataLimitImage + title: "You have reached a data limit" + primaryButton: "Manage Subscription" + specialComponent: MMButton { text: "Special Component"; padding: 20 } + } + + MMDrawer { + id: drawer3 + + picture: Style.uploadImage + title: "Failed to synchronize your changes" + description: "Your changes could not be sent to server, make sure you are connected to internet and have write access to this project." + primaryButton: "Ok, I understand" + boundedDescription: "Failed to push changes. Ask the project workspace owner to log in to their Mergin Maps dashboard for more information." + visible: true + } +}