11 files changed, 174 insertions, 0 deletions

diff --git a/addons/website_mail/static/src/css/website_mail.scss b/addons/website_mail/static/src/css/website_mail.scss
new file mode 100644
index 00000000..def6d8d3
--- /dev/null
+++ b/addons/website_mail/static/src/css/website_mail.scss
@@ -0,0 +1,45 @@
+.js_follow[data-follow='on'] .js_follow_btn ,
+.js_follow[data-follow='off'] .js_unfollow_btn {
+    display: none;
+}
+
+.js_follow_icons_container {
+    .js_follow_btn, .js_unfollow_btn {
+        animation: js_follow_fade 1s ease forwards;
+        opacity: 0;
+
+        small {
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        @include hover-focus () {
+            small {
+                transition-duration: 1s;
+                opacity: 1;
+            }
+        };
+    }
+
+    .fa:before {
+        content: "\f0f3";
+        color: $text-muted;
+    }
+
+    .js_follow_btn:hover .fa:before {
+        color: $body-color;
+    }
+
+    .js_unfollow_btn .fa:before {
+        color: theme-color('primary');
+    }
+
+    .js_unfollow_btn:hover .fa:before {
+        content: "\f1f6";
+        color: theme-color('danger');
+    }
+}
+
+@keyframes js_follow_fade {
+    to { opacity: 1; }
+}
diff --git a/addons/website_mail/static/src/img/thumbnail/airmail.png b/addons/website_mail/static/src/img/thumbnail/airmail.png
new file mode 100644
index 00000000..4988a4fe
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/airmail.png
diff --git a/addons/website_mail/static/src/img/thumbnail/basic.png b/addons/website_mail/static/src/img/thumbnail/basic.png
new file mode 100644
index 00000000..2debbb4e
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/basic.png
diff --git a/addons/website_mail/static/src/img/thumbnail/cleave.png b/addons/website_mail/static/src/img/thumbnail/cleave.png
new file mode 100644
index 00000000..34e97ac6
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/cleave.png
diff --git a/addons/website_mail/static/src/img/thumbnail/go.png b/addons/website_mail/static/src/img/thumbnail/go.png
new file mode 100644
index 00000000..7c5f0ad0
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/go.png
diff --git a/addons/website_mail/static/src/img/thumbnail/narrative.png b/addons/website_mail/static/src/img/thumbnail/narrative.png
new file mode 100644
index 00000000..823e206a
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/narrative.png
diff --git a/addons/website_mail/static/src/img/thumbnail/neopolitan.png b/addons/website_mail/static/src/img/thumbnail/neopolitan.png
new file mode 100644
index 00000000..37d8f9d7
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/neopolitan.png
diff --git a/addons/website_mail/static/src/img/thumbnail/skyline.png b/addons/website_mail/static/src/img/thumbnail/skyline.png
new file mode 100644
index 00000000..bdc7a5b8
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/skyline.png
diff --git a/addons/website_mail/static/src/img/thumbnail/sunday.png b/addons/website_mail/static/src/img/thumbnail/sunday.png
new file mode 100644
index 00000000..2dd6444c
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/sunday.png
diff --git a/addons/website_mail/static/src/img/thumbnail/zenflat.png b/addons/website_mail/static/src/img/thumbnail/zenflat.png
new file mode 100644
index 00000000..690f08a2
--- /dev/null
+++ b/addons/website_mail/static/src/img/thumbnail/zenflat.png
diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
new file mode 100644
index 00000000..e2c349ce
--- /dev/null
+++ b/addons/website_mail/static/src/js/follow.js
@@ -0,0 +1,129 @@
+odoo.define('website_mail.follow', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+
+publicWidget.registry.follow = publicWidget.Widget.extend({
+    selector: '#wrapwrap:has(.js_follow)',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        this.isUser = false;
+        var $jsFollowEls = this.$el.find('.js_follow');
+
+        var always = function (data) {
+            self.isUser = data[0].is_user;
+            const $jsFollowToEnable = $jsFollowEls.filter(function () {
+                const model = this.dataset.object;
+                return model in data[1] && data[1][model].includes(parseInt(this.dataset.id));
+            });
+            self._toggleSubscription(true, data[0].email, $jsFollowToEnable);
+            self._toggleSubscription(false, data[0].email, $jsFollowEls.not($jsFollowToEnable));
+            $jsFollowEls.removeClass('d-none');
+        };
+
+        const records = {};
+        for (const el of $jsFollowEls) {
+            const model = el.dataset.object;
+            if (!(model in records)) {
+                records[model] = [];
+            }
+            records[model].push(parseInt(el.dataset.id));
+        }
+
+        this._rpc({
+            route: '/website_mail/is_follower',
+            params: {
+                records: records,
+            },
+        }).then(always).guardedCatch(always);
+
+        // not if editable mode to allow designer to edit
+        if (!this.editableMode) {
+            $('.js_follow > .input-group-append.d-none').removeClass('d-none');
+            this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
+                event.preventDefault();
+                self._onClick(event);
+            });
+        }
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Toggles subscription state for every given records.
+     *
+     * @private
+     * @param {boolean} follow
+     * @param {string} email
+     * @param {jQuery} $jsFollowEls
+     */
+    _toggleSubscription: function (follow, email, $jsFollowEls) {
+        if (follow) {
+            this._updateSubscriptionDOM(follow, email, $jsFollowEls);
+        } else {
+            for (const el of $jsFollowEls) {
+                const follow = !email && el.getAttribute('data-unsubscribe');
+                this._updateSubscriptionDOM(follow, email, $(el));
+            }
+        }
+    },
+    /**
+     * Updates subscription DOM for every given records.
+     * This should not be called directly, use `_toggleSubscription`.
+     *
+     * @private
+     * @param {boolean} follow
+     * @param {string} email
+     * @param {jQuery} $jsFollowEls
+     */
+    _updateSubscriptionDOM: function (follow, email, $jsFollowEls) {
+        $jsFollowEls.find('input.js_follow_email')
+            .val(email || "")
+            .attr("disabled", email && (follow || this.isUser) ? "disabled" : false);
+        $jsFollowEls.attr("data-follow", follow ? 'on' : 'off');
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClick: function (ev) {
+        var self = this;
+        var $jsFollow = $(ev.currentTarget).closest('.js_follow');
+        var $email = $jsFollow.find(".js_follow_email");
+
+        if ($email.length && !$email.val().match(/.+@.+/)) {
+            $jsFollow.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            return false;
+        }
+        $jsFollow.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+
+        var email = $email.length ? $email.val() : false;
+        if (email || this.isUser) {
+            this._rpc({
+                route: '/website_mail/follow',
+                params: {
+                    'id': +$jsFollow.data('id'),
+                    'object': $jsFollow.data('object'),
+                    'message_is_follower': $jsFollow.attr("data-follow") || "off",
+                    'email': email,
+                },
+            }).then(function (follow) {
+                self._toggleSubscription(follow, email, $jsFollow);
+            });
+        }
+    },
+});
+});