[IMP] website_mail: allow two different designs for the follow button

Part of https://github.com/odoo/odoo/pull/35749
task-2024197

2 files changed, 54 insertions, 1 deletions

diff --git a/addons/website_mail/static/src/css/website_mail.scss b/addons/website_mail/static/src/css/website_mail.scss
index 6be6bf9007c..def6d8d37cb 100644
--- a/addons/website_mail/static/src/css/website_mail.scss
+++ b/addons/website_mail/static/src/css/website_mail.scss
@@ -2,3 +2,44 @@
 .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/views/website_mail_templates.xml b/addons/website_mail/views/website_mail_templates.xml
index 856af90ca93..549043a28fb 100644
--- a/addons/website_mail/views/website_mail_templates.xml
+++ b/addons/website_mail/views/website_mail_templates.xml
@@ -10,7 +10,19 @@
                   class="js_follow_email form-control"
                   placeholder="your email..."
                   groups="base.group_public"/>
-            <div t-att-class="(request.env.user.has_group('base.group_public') and 'input-group-append ' or '') + (div_class or '')">
+            <div t-if="icons_design and not request.env.user.has_group('base.group_public')" class="js_follow_icons_container">
+                <button class="btn text-reset js_unfollow_btn">
+                    <div class="d-flex align-items-center">
+                        <small>Unfollow</small><i class="fa fa-fw ml-1"/>
+                    </div>
+                </button>
+                <button class="btn text-reset js_follow_btn">
+                    <div class="d-flex align-items-center">
+                        <small>Follow</small><i class="fa fa-fw ml-1"/>
+                    </div>
+                </button>
+            </div>
+            <div t-else="" t-attf-class="#{request.env.user.has_group('base.group_public') and 'input-group-append'} #{div_class}">
                 <button href="#" t-attf-class="btn btn-secondary js_unfollow_btn">Unsubscribe</button>
                 <button href="#" t-attf-class="btn btn-primary js_follow_btn">Subscribe</button>
             </div>