initial commit 2

3 files changed, 225 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/notification_group/notification_group.js b/addons/mail/static/src/components/notification_group/notification_group.js
new file mode 100644
index 00000000..17936986
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.js
@@ -0,0 +1,93 @@
+odoo.define('mail/static/src/components/notification_group/notification_group.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class NotificationGroup extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const group = this.env.models['mail.notification_group'].get(props.notificationGroupLocalId);
+            return {
+                group: group ? group.__state : undefined,
+            };
+        });
+        /**
+         * Reference of the "mark as read" button. Useful to disable the
+         * top-level click handler when clicking on this specific button.
+         */
+        this._markAsReadRef = useRef('markAsRead');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.notification_group}
+     */
+    get group() {
+        return this.env.models['mail.notification_group'].get(this.props.notificationGroupLocalId);
+    }
+
+    /**
+     * @returns {string|undefined}
+     */
+    image() {
+        if (this.group.notification_type === 'email') {
+            return '/mail/static/src/img/smiley/mailfailure.jpg';
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const markAsRead = this._markAsReadRef.el;
+        if (markAsRead && markAsRead.contains(ev.target)) {
+            // handled in `_onClickMarkAsRead`
+            return;
+        }
+        this.group.openDocuments();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickMarkAsRead(ev) {
+        this.group.openCancelAction();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+}
+
+Object.assign(NotificationGroup, {
+    props: {
+        notificationGroupLocalId: String,
+    },
+    template: 'mail.NotificationGroup',
+});
+
+return NotificationGroup;
+
+});
diff --git a/addons/mail/static/src/components/notification_group/notification_group.scss b/addons/mail/static/src/components/notification_group/notification_group.scss
new file mode 100644
index 00000000..88a67002
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.scss
@@ -0,0 +1,93 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_NotificationGroup {
+    @include o-mail-notification-list-item-layout();
+
+    &:hover .o_NotificationGroup_markAsRead {
+        // TODO also mixin this
+        // task-2258605
+        opacity: 1;
+    }
+}
+
+.o_NotificationGroup_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_NotificationGroup_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_NotificationGroup_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_NotificationGroup_counter {
+    @include o-mail-notification-list-item-counter-layout();
+}
+
+.o_NotificationGroup_date {
+    @include o-mail-notification-list-item-date-layout();
+}
+
+.o_NotificationGroup_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_NotificationGroup_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_NotificationGroup_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_NotificationGroup_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_NotificationGroup_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-layout();
+}
+
+.o_NotificationGroup_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_NotificationGroup_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_NotificationGroup {
+    @include o-mail-notification-list-item-style();
+}
+
+.o_NotificationGroup_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_NotificationGroup_counter {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_NotificationGroup_date {
+    @include o-mail-notification-list-item-date-style();
+}
+
+.o_NotificationGroup_image {
+    @include o-mail-notification-list-item-image-style();
+}
+
+.o_NotificationGroup_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-style();
+}
+
+.o_NotificationGroup_name {
+    @include o-mail-notification-list-item-bold-style();
+}
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
new file mode 100644
index 00000000..c2f3dceb
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationGroup" owl="1">
+        <div class="o_NotificationGroup" t-on-click="_onClick">
+            <t t-if="group">
+                <div class="o_NotificationGroup_sidebar">
+                    <div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem">
+                        <img class="o_NotificationGroup_image rounded-circle" t-att-src="image()" alt="Message delivery failure image"/>
+                    </div>
+                </div>
+                <div class="o_NotificationGroup_content">
+                    <div class="o_NotificationGroup_header">
+                        <span class="o_NotificationGroup_name">
+                            <t t-esc="group.res_model_name"/>
+                        </span>
+                        <span class="o_NotificationGroup_counter">
+                            (<t t-esc="group.notifications.length"/>)
+                        </span>
+                        <span class="o-autogrow"/>
+                        <span class="o_NotificationGroup_date">
+                            <t t-esc="group.date.fromNow()"/>
+                        </span>
+                    </div>
+                    <div class="o_NotificationGroup_core">
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText">
+                            <t t-if="group.notification_type === 'email'">
+                                An error occurred when sending an email.
+                            </t>
+                        </span>
+                        <span class="o-autogrow"/>
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check" title="Discard message delivery failures" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>