diff options
| -rw-r--r-- | addons/website_mail/static/src/css/website_mail.scss | 41 | ||||
| -rw-r--r-- | addons/website_mail/views/website_mail_templates.xml | 14 |
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> |