diff --git a/app/icons/Waiting.svg b/app/icons/Waiting.svg new file mode 100644 index 000000000..d435640ec --- /dev/null +++ b/app/icons/Waiting.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 56ba3d5fa..f29f64815 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -15,5 +15,6 @@ UploadImage.svg ReachedDataLimitImage.svg Close.svg + Waiting.svg diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js index 605a61e5c..477e8e8d6 100644 --- a/app/qmlV2/Style.js +++ b/app/qmlV2/Style.js @@ -71,6 +71,7 @@ const qrCodeIcon = "qrc:/QR Code.svg" const checkmarkIcon = "qrc:/Checkmark.svg" const closeButtonIcon = "qrc:/CloseButton.svg" const closeIcon = "qrc:/Close.svg" +const waitingIcon = "qrc:/Waiting.svg" // Images const uploadImage = "qrc:/UploadImage.svg" @@ -80,7 +81,6 @@ const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg" const commonSpacing = 20 * __dp // Notification -const notificationHeight = 66 * __dp const notificationRadius = 12 * __dp const notificationSpace = 3 * __dp diff --git a/app/qmlV2/component/MMNotification.qml b/app/qmlV2/component/MMNotification.qml index df026115f..f6800e5a3 100644 --- a/app/qmlV2/component/MMNotification.qml +++ b/app/qmlV2/component/MMNotification.qml @@ -11,80 +11,87 @@ import QtQuick import "../Style.js" as Style import notificationType 1.0 -Row { +Rectangle { id: notification width: listView.width - 2 * Style.commonSpacing - height: Style.notificationHeight + height: text.height + 2 * 15 * __dp anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined readonly property int innerSpacing: 5 * __dp - Rectangle { - width: parent.width - height: parent.height - radius: Style.notificationRadius - color: { - switch( type ) { - case NotificationType.Information: return Style.informative - case NotificationType.Success: return Style.positive - case NotificationType.Warning: return Style.warning - case NotificationType.Error: return Style.negative - default: return Style.positive - } + radius: Style.notificationRadius + color: { + switch( type ) { + case NotificationType.Information: return Style.informative + case NotificationType.Success: return Style.positive + case NotificationType.Warning: return Style.warning + case NotificationType.Error: return Style.negative + default: return Style.positive } + } - Rectangle { - id: icon + MMIcon { + id: leftIcon - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: Style.commonSpacing - width: 18 * __dp - height: 18 * __dp - color: text.color - radius: width/2 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 20 * __dp + width: 18 * __dp + height: 18 * __dp + color: text.color + visible: icon !== NotificationType.None + source: { + switch( icon ) { + case NotificationType.None: return Style.checkmarkIcon + case NotificationType.Waiting: return Style.waitingIcon + case NotificationType.Check: return Style.checkmarkIcon + } } + } - Text { - id: text + Text { + id: text - anchors.verticalCenter: parent.verticalCenter - anchors.left: icon.right - width: parent.width - 3 * Style.commonSpacing - closeButton.width - icon.width - text: message - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - leftPadding: Style.commonSpacing - notification.innerSpacing - font: Qt.font(Style.t3) - clip: true - color: { - switch( type ) { - case NotificationType.Information: return Style.deepOcean - case NotificationType.Success: return Style.forest - case NotificationType.Warning: return Style.earth - case NotificationType.Error: return Style.grape - } + anchors.verticalCenter: parent.verticalCenter + anchors.left: leftIcon.right + width: parent.width - 3 * Style.commonSpacing - closeButton.width - leftIcon.width + text: message + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + leftPadding: Style.commonSpacing - notification.innerSpacing + font: Qt.font(Style.t3) + clip: true + maximumLineCount: 3 + wrapMode: Text.WordWrap + lineHeight: 1.4 + elide: Text.ElideRight + color: { + switch( type ) { + case NotificationType.Information: return Style.deepOcean + case NotificationType.Success: return Style.forest + case NotificationType.Warning: return Style.earth + case NotificationType.Error: return Style.grape } } + } - MMIcon { - id: closeButton + MMIcon { + id: closeButton - anchors.right: parent.right - anchors.rightMargin: Style.commonSpacing - anchors.verticalCenter: parent.verticalCenter - scale: maRemove.containsMouse ? 1.2 : 1 - source: Style.closeIcon - color: text.color + anchors.right: parent.right + anchors.rightMargin: Style.commonSpacing + anchors.verticalCenter: parent.verticalCenter + scale: maRemove.containsMouse ? 1.2 : 1 + source: Style.closeIcon + color: text.color - MouseArea { - id: maRemove + MouseArea { + id: maRemove - anchors.fill: parent - hoverEnabled: true - onClicked: notificationModel.remove(id) - } + anchors.fill: parent + hoverEnabled: true + onClicked: notificationModel.remove(id) } } } diff --git a/app/qmlV2/component/MMNotificationView.qml b/app/qmlV2/component/MMNotificationView.qml index 8211d8498..8ca9b495f 100644 --- a/app/qmlV2/component/MMNotificationView.qml +++ b/app/qmlV2/component/MMNotificationView.qml @@ -37,7 +37,7 @@ Item { anchors.top: parent.top width: parent.width - height: Style.notificationHeight * listView.count + spacing * (listView.count - 1) + height: contentHeight spacing: Style.notificationSpace clip: true model: notificationModel diff --git a/gallery/main.cpp b/gallery/main.cpp index 1d33f5b93..d7b4ffee8 100644 --- a/gallery/main.cpp +++ b/gallery/main.cpp @@ -32,7 +32,7 @@ int main( int argc, char *argv[] ) #endif NotificationModel notificationModel; - engine.rootContext()->setContextProperty("notificationModel", ¬ificationModel); + engine.rootContext()->setContextProperty( "notificationModel", ¬ificationModel ); // path to local wrapper pages engine.rootContext()->setContextProperty( "_qmlWrapperPath", QGuiApplication::applicationDirPath() + "/HotReload/qml/pages/" ); diff --git a/gallery/notificationmodel.cpp b/gallery/notificationmodel.cpp index cf53a5228..9ec091c07 100644 --- a/gallery/notificationmodel.cpp +++ b/gallery/notificationmodel.cpp @@ -10,25 +10,22 @@ #include "notificationmodel.h" #include -Notification::Notification(uint id, const QString &message, uint interval, NotificationType::MessageType type = NotificationType::Information) +Notification::Notification( uint id, const QString &message, uint interval, NotificationType::MessageType type = NotificationType::Information, NotificationType::IconType icon = NotificationType::None ) { mId = id; mMessage = message; mInterval = interval; mType = type; + mIcon = icon; } -NotificationModel::NotificationModel(QObject *parent) : QAbstractListModel{parent} +NotificationModel::NotificationModel( QObject *parent ) : QAbstractListModel{parent} { - qmlRegisterUncreatableType("notificationType", 1, 0, "NotificationType", "Not creatable as it is an enum type"); + qmlRegisterUncreatableType( "notificationType", 1, 0, "NotificationType", "Not creatable as it is an enum type" ); - mTimer = new QTimer(this); - connect(mTimer, &QTimer::timeout, this, &NotificationModel::timerFired); - mTimer->start(1000); - - // Initial data - mNotifications << Notification{ nextId(), "Ahoj", 10, NotificationType::Information }; - mNotifications << Notification{ nextId(), "Hello all", 5, NotificationType::Information }; + mTimer = new QTimer( this ); + connect( mTimer, &QTimer::timeout, this, &NotificationModel::timerFired ); + mTimer->start( 1000 ); } NotificationModel::~NotificationModel() @@ -39,42 +36,47 @@ NotificationModel::~NotificationModel() QHash NotificationModel::roleNames() const { - return { - { IdRole, "id" }, - { MessageRole, "message" }, - { TypeRole, "type" } + return + { + { IdRole, "id" }, + { MessageRole, "message" }, + { TypeRole, "type" }, + { IconRole, "icon" } }; } -int NotificationModel::rowCount(const QModelIndex &parent) const +int NotificationModel::rowCount( const QModelIndex &parent ) const { - Q_UNUSED(parent) + Q_UNUSED( parent ) return mNotifications.size(); } -QVariant NotificationModel::data(const QModelIndex &index, int role) const +QVariant NotificationModel::data( const QModelIndex &index, int role ) const { - if (!hasIndex(index.row(), index.column(), index.parent())) + if ( !hasIndex( index.row(), index.column(), index.parent() ) ) return {}; - Notification notification = mNotifications.at(index.row()); - if (role == IdRole) return notification.id(); - if (role == MessageRole) return notification.message(); - if (role == TypeRole) return notification.type(); + Notification notification = mNotifications.at( index.row() ); + if ( role == IdRole ) return notification.id(); + if ( role == MessageRole ) return notification.message(); + if ( role == TypeRole ) return notification.type(); + if ( role == IconRole ) return notification.icon(); return {}; } // remove item by message -void NotificationModel::remove(uint id) +void NotificationModel::remove( uint id ) { - for(int i=0; i roleNames() const override; - int rowCount(const QModelIndex & parent = QModelIndex()) const override; - QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override; + 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, NotificationType::MessageType type); + Q_PROPERTY( int rowCount READ rowCount NOTIFY rowCountChanged ); + Q_INVOKABLE void remove( uint id ); + Q_INVOKABLE void add( const QString &message, uint interval, NotificationType::MessageType type, NotificationType::IconType icon ); private: - uint nextId() { static uint id = 0; return id++; } - void timerFired(); + uint nextId() { static uint id = 0; return id++; } + void timerFired(); signals: - void rowCountChanged(); + void rowCountChanged(); private: - QList mNotifications; - QTimer *mTimer; + QList mNotifications; + QTimer *mTimer; }; #endif // NOTIFICATIONMODEL_H diff --git a/gallery/qml/pages/NotificationPage.qml b/gallery/qml/pages/NotificationPage.qml index 19e367bd2..56900acce 100644 --- a/gallery/qml/pages/NotificationPage.qml +++ b/gallery/qml/pages/NotificationPage.qml @@ -31,25 +31,31 @@ Page { type: MMInput.Type.SendButton anchors.horizontalCenter: parent.horizontalCenter placeholderText: "Write an informative message" - onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Information); text = "" } + onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Information, NotificationType.None); text = "" } } MMInput { type: MMInput.Type.SendButton anchors.horizontalCenter: parent.horizontalCenter placeholderText: "Write a success message" - onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Success); text = "" } + onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Success, NotificationType.Check); text = "" } } MMInput { type: MMInput.Type.SendButton anchors.horizontalCenter: parent.horizontalCenter placeholderText: "Write a warning message" - onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Warning); text = "" } + onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Warning, NotificationType.Waiting); text = "" } } MMInput { type: MMInput.Type.SendButton anchors.horizontalCenter: parent.horizontalCenter placeholderText: "Write an error message" - onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Error); text = "" } + onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Error, NotificationType.None); text = "" } + } + MMInput { + type: MMInput.Type.SendButton + anchors.horizontalCenter: parent.horizontalCenter + text: "Stojí, stojí mohyla, Na mohyle zlá chvíľa, Na mohyle tŕnie chrastie A v tom tŕní, chrastí rastie, Rastie, kvety rozvíja Jedna žltá ľalia. Tá ľalia smutno vzdychá: „Hlávku moju tŕnie pichá A nožičky oheň páli – Pomôžte mi v mojom žiali!“ " + onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Information, NotificationType.None); text = "" } } Text { text: "Note: Notification will be removed in 1 minute"