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/app/qmlV2/component/MMDrawer.qml b/app/qmlV2/component/MMDrawer.qml new file mode 100644 index 000000000..14e04e6e4 --- /dev/null +++ b/app/qmlV2/component/MMDrawer.qml @@ -0,0 +1,150 @@ +/*************************************************************************** + * * + * 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 "../Style.js" as Style +import "." + +Drawer { + id: control + + property alias picture: picture.source + property alias title: title.text + property alias description: description.text + property alias boundedDescription: boundedDescription.text + property alias primaryButton: primaryButton.text + property alias secondaryButton: secondaryButton.text + property alias specialComponent: loader.sourceComponent + + width: window.width + height: mainColumn.height + edge: Qt.BottomEdge + + Rectangle { + id: roundedRect + + anchors.fill: parent + color: Style.white + radius: Style.commonSpacing + + // Make the bottom corners more rounded by masking them + Rectangle { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + height: roundedRect.radius + color: Style.white + } + + Column { + id: mainColumn + + width: parent.width + spacing: Style.commonSpacing + padding: Style.commonSpacing + + Image { + id: closeButton + + source: Style.closeButtonIcon + anchors.right: parent.right + anchors.rightMargin: Style.commonSpacing + + MouseArea { + anchors.fill: parent + onClicked: control.visible = false + } + } + + Image { + id: picture + + anchors.horizontalCenter: parent.horizontalCenter + } + + Text { + id: title + + anchors.horizontalCenter: parent.horizontalCenter + font: Qt.font(Style.t1) + width: parent.width - 2*Style.commonSpacing + color: Style.forest + visible: text.length > 0 + horizontalAlignment: Text.AlignHCenter + } + + Text { + id: description + + anchors.horizontalCenter: parent.horizontalCenter + font: Qt.font(Style.p5) + width: parent.width - 2*Style.commonSpacing + color: Style.night + visible: text.length > 0 + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + lineHeight: 1.6 + } + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + visible: boundedDescription.text.length > 0 + width: parent.width - 2*Style.commonSpacing + height: boundedDescription.height + radius: 16 * __dp + + color: Style.lightGreen + + Text { + id: boundedDescription + + anchors.horizontalCenter: parent.horizontalCenter + font: Qt.font(Style.p6) + width: parent.width + color: Style.night + visible: text.length > 0 + horizontalAlignment: Text.AlignLeft + wrapMode: Text.WordWrap + lineHeight: 1.6 + padding: Style.commonSpacing + } + } + + Loader { + id: loader + + anchors.horizontalCenter: parent.horizontalCenter + } + + Item { width: 1; height: 1 } + + MMButton { + id: primaryButton + + width: parent.width - 2*Style.commonSpacing + visible: text.length > 0 + + onClicked: control.visible = false + } + + MMButton { + id: secondaryButton + + width: parent.width - 2*Style.commonSpacing + visible: text.length > 0 + transparent: true + topPadding: 0 + + onClicked: control.visible = false + } + } + } +} diff --git a/app/qmlV2/component/MMInput.qml b/app/qmlV2/component/MMInput.qml index 85a810435..f0f2128e2 100644 --- a/app/qmlV2/component/MMInput.qml +++ b/app/qmlV2/component/MMInput.qml @@ -23,6 +23,8 @@ Item { property string warningMsg property string errorMsg + signal enterPressed() + width: 280 * __dp height: rect.height + messageItem.height @@ -106,6 +108,13 @@ Item { background: Rectangle { color: Style.transparent } + + Keys.onPressed: (event) => { + if ( event.key === Qt.Key_Return || event.key === Qt.Key_Enter ) { + control.enterPressed() + event.accepted = true + } + } } MMIcon { diff --git a/app/qmlV2/component/MMNotification.qml b/app/qmlV2/component/MMNotification.qml new file mode 100644 index 000000000..90f3ee081 --- /dev/null +++ b/app/qmlV2/component/MMNotification.qml @@ -0,0 +1,52 @@ +/*************************************************************************** + * * + * 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 "../Style.js" as Style + +Row { + id: notification + + width: listView.width * 0.95 + height: 25 + anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined + + Rectangle { + width: parent.width + height: parent.height + color: "#BBFFFFFF" // Style.white + border.color: Style.mediumGreen + border.width: 1 + radius: 5 + Text { + anchors.fill: parent + anchors.leftMargin: 5 + text: message + color: Style.forest + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignRight + rightPadding: 20 + } + Text { + anchors.right: parent.right + anchors.rightMargin: 5 + height: parent.height + verticalAlignment: Text.AlignVCenter + scale: maRemove.containsMouse ? 1.2 : 1 + text: "✘" + color: maRemove.containsMouse ? Style.forest : Style.mediumGreen + MouseArea { + id: maRemove + anchors.fill: parent + hoverEnabled: true + onClicked: _notificationModel.remove(id) + } + } + } +} diff --git a/app/qmlV2/component/MMNotificationView.qml b/app/qmlV2/component/MMNotificationView.qml new file mode 100644 index 000000000..284c9d946 --- /dev/null +++ b/app/qmlV2/component/MMNotificationView.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 "../Style.js" as Style + +Item { + id: control + + z: 100 + anchors.top: parent.top + width: parent.width + height: parent.height + + Rectangle { + anchors.bottom: parent.bottom + width: control.width + height: 20 + color: Style.white + + Text { + text: listView.count + anchors.centerIn: parent + color: Style.forest + } + } + + ListView { + id: listView + + anchors.top: parent.top + width: parent.width + height: 25 * listView.count + spacing * (listView.count - 1) + spacing: 3 + clip: true + model: _notificationModel + delegate: MMNotification { + + } + + add: Transition { + NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 } + NumberAnimation { property: "scale"; easing.type: Easing.OutCubic; from: 0; to: 1.0; duration: 200 } + } + + } +} diff --git a/gallery/CMakeLists.txt b/gallery/CMakeLists.txt index f73d8793d..76c83a72d 100644 --- a/gallery/CMakeLists.txt +++ b/gallery/CMakeLists.txt @@ -29,9 +29,9 @@ find_package( qt_standard_project_setup() qt_policy(SET QTP0001 NEW) -set(GALLERY_HDRS helper.h) +set(GALLERY_HDRS helper.h notificationmodel.h) -set(GALLERY_SRCS helper.cpp) +set(GALLERY_SRCS helper.cpp notificationmodel.cpp) if (IOS OR ANDROID) add_compile_definitions(MOBILE_OS) diff --git a/gallery/main.cpp b/gallery/main.cpp index 0055d1efa..be99e976d 100644 --- a/gallery/main.cpp +++ b/gallery/main.cpp @@ -16,6 +16,7 @@ #include "helper.h" #include #include +#include "notificationmodel.h" int main( int argc, char *argv[] ) { @@ -30,6 +31,9 @@ int main( int argc, char *argv[] ) engine.rootContext()->setContextProperty( "_hotReload", &hotReload ); #endif + NotificationModel notificationModel; + engine.rootContext()->setContextProperty("_notificationModel", ¬ificationModel); + // path to local wrapper pages engine.rootContext()->setContextProperty( "_qmlWrapperPath", QGuiApplication::applicationDirPath() + "/HotReload/qml/pages/" ); engine.rootContext()->setContextProperty( "__dp", Helper::calculateDpRatio() ); diff --git a/gallery/mobile.qrc b/gallery/mobile.qrc index fb0406072..4a80d1abf 100644 --- a/gallery/mobile.qrc +++ b/gallery/mobile.qrc @@ -12,5 +12,8 @@ app/qmlV2/component/MMCheckBox.qml app/qmlV2/component/MMRadioButton.qml app/qmlV2/component/MMSwitch.qml + app/qmlV2/component/MMNotification.qml + app/qmlV2/component/MMNotificationView.qml + app/qmlV2/component/MMDrawer.qml diff --git a/gallery/notificationmodel.cpp b/gallery/notificationmodel.cpp new file mode 100644 index 000000000..70699159e --- /dev/null +++ b/gallery/notificationmodel.cpp @@ -0,0 +1,86 @@ +/*************************************************************************** + * * + * 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. * + * * + ***************************************************************************/ + +#include "notificationmodel.h" + +Notification::Notification(uint id, const QString &message, uint interval, MessageType type = Information) +{ + mId = id; + mMessage = message; + mInterval = interval; + mType = type; +} + +NotificationModel::NotificationModel(QObject *parent) : QAbstractListModel{parent} +{ + // Initial data + _notifications << Notification{ nextId(), "Ahoj", 10 }; + _notifications << Notification{ nextId(), "Hello all", 5 }; +} + +QHash NotificationModel::roleNames() const +{ + return { + { IdRole, "id" }, + { MessageRole, "message" }, + { TypeRole, "type" } + }; +} + +int NotificationModel::rowCount(const QModelIndex &parent) const +{ + Q_UNUSED(parent) + return _notifications.size(); +} + +QVariant NotificationModel::data(const QModelIndex &index, int role) const +{ + if (!hasIndex(index.row(), index.column(), index.parent())) + return {}; + + Notification notification = _notifications.at(index.row()); + if (role == IdRole) return notification.id(); + if (role == MessageRole) return notification.message(); + if (role == TypeRole) return notification.type(); + + return {}; +} + +// remove item by message +void NotificationModel::remove(uint id) +{ + for(int i=0; i<_notifications.count(); i++) { + if(_notifications[i].id() == id) { + beginRemoveRows(QModelIndex(), i, i); + _notifications.removeAt(i); + endRemoveRows(); + + emit dataChanged(createIndex(0, 0), createIndex(rowCount(), 0)); // refresh whole model + emit rowCountChanged(); + return; + } + } +} + +// add new unique message with interval +void NotificationModel::add(const QString &message, uint interval, Notification::MessageType type = Notification::Information) +{ + for(Notification ¬ification : _notifications) { + if(notification.message() == message) + return; + } + + beginInsertRows(QModelIndex(), rowCount(), rowCount()); + _notifications << Notification{ nextId(), message, interval, type }; + endInsertRows(); + + emit rowCountChanged(); +} + + diff --git a/gallery/notificationmodel.h b/gallery/notificationmodel.h new file mode 100644 index 000000000..d459ab1a0 --- /dev/null +++ b/gallery/notificationmodel.h @@ -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. * + * * + ***************************************************************************/ + +#ifndef NOTIFICATIONMODEL_H +#define NOTIFICATIONMODEL_H + +#include "qqmlintegration.h" +#include + +class Notification +{ + Q_GADGET + + public: + enum MessageType { + Information, + Warning, + Error + }; + Q_ENUM(MessageType) + + Notification(uint id, const QString &message, uint interval, MessageType type); + uint id() { return mId; } + QString message() { return mMessage; } + MessageType type() { return mType; } + + private: + uint mId; + QString mMessage; + uint mInterval; // [seconds] + MessageType mType = Information; +}; + +class NotificationModel : public QAbstractListModel +{ + Q_OBJECT + + public: + enum MyRoles { + IdRole = Qt::UserRole + 1, MessageRole, TypeRole + }; + Q_ENUM(MyRoles) + + NotificationModel(QObject *parent = nullptr); + + QHash roleNames() const override; + int rowCount(const QModelIndex & parent = QModelIndex()) const override; + QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override; + + Q_PROPERTY(int rowCount READ rowCount NOTIFY rowCountChanged); + Q_INVOKABLE void remove(uint id); + Q_INVOKABLE void add(const QString &message, uint interval, Notification::MessageType type); + + private: + uint nextId() { static uint id = 0; return id++; } + + signals: + void rowCountChanged(); + + private: + QList _notifications; +}; + +#endif // NOTIFICATIONMODEL_H diff --git a/gallery/qml.qrc b/gallery/qml.qrc index b5569a99f..3cd10624d 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -20,5 +20,10 @@ ../app/qmlV2/component/MMCheckBox.qml ../app/qmlV2/component/MMRadioButton.qml ../app/qmlV2/component/MMSwitch.qml + qml/pages/NotificationPage.qml + ../app/qmlV2/component/MMNotification.qml + ../app/qmlV2/component/MMNotificationView.qml + ../app/qmlV2/component/MMDrawer.qml + qml/pages/DrawerPage.qml diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index e9b29b5df..11866cd69 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,14 @@ ApplicationWindow { title: "Checks" source: "ChecksPage.qml" } + ListElement { + title: "Notifications" + source: "NotificationPage.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 + } +} diff --git a/gallery/qml/pages/InitialGalleryPage.qml b/gallery/qml/pages/InitialGalleryPage.qml index c6e0b96e5..8aacf5dce 100644 --- a/gallery/qml/pages/InitialGalleryPage.qml +++ b/gallery/qml/pages/InitialGalleryPage.qml @@ -10,10 +10,11 @@ import QtQuick import QtQuick.Controls +import "../../app/qmlV2/component" + Page { id: pane - //FontLoader { id: fontx; source: "qrc:/fonts/SquarePeg-Regular.ttf" } Label { width: parent.width / 2 text: "DP ratio: ~" + Math.round(__dp * 1000) / 1000 + "\n" + @@ -25,6 +26,5 @@ Page { color: "red" font.family: "Inter" font.pixelSize: 20 - //font.family: fontx.font.family } } diff --git a/gallery/qml/pages/NotificationPage.qml b/gallery/qml/pages/NotificationPage.qml new file mode 100644 index 000000000..b020fbcf8 --- /dev/null +++ b/gallery/qml/pages/NotificationPage.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.Controls +import QtQuick.Controls.Basic + +import "../../app/qmlV2/component" + +Page { + id: pane + + MMNotificationView { + + } + + Column { + width: parent.width + spacing: 20 + anchors.centerIn: parent + + MMInput { + anchors.horizontalCenter: parent.horizontalCenter + placeholderText: "Write an informative message" + onEnterPressed: _notificationModel.add(text, 10, 0) + } + MMInput { + anchors.horizontalCenter: parent.horizontalCenter + placeholderText: "Write a warning message" + onEnterPressed: _notificationModel.add(text, 10, 1) + } + MMInput { + anchors.horizontalCenter: parent.horizontalCenter + placeholderText: "Write an error message" + onEnterPressed: _notificationModel.add(text, 10, 2) + } + } +}