From 7d26d2fed664d1ac7f7bd027d2876f9b92b68bf4 Mon Sep 17 00:00:00 2001
From: Fabien Pinckaers <fp@odoo.com>
Date: Wed, 19 Aug 2020 07:50:55 +0000
Subject: [PATCH] [REF] website_event_track_online: improve reminder / wishlist
 widget display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PURPOSE

Improve tracks list display at current solution does not scale well with lots
of tracks.

SPECIFICATIONS

Introduce a lighter reminder design: use standard bootstrap btn classes and
let colors be the standard one. This allows to simplify reminder CSS notably.

UDPATE

  * website_event_track_online.track_widget_reminder

LINKS

Task ID-2322408
PR #56095

Co-Authored-By Thibault Delavallée <tde@odoo.com>

X-original-commit: 471ac3d9f0cf918c2318fb74ddfeab39e5046383
---
 .../src/scss/event_track_templates.scss       | 41 +++++--------------
 .../views/event_track_templates_reminder.xml  | 17 ++++----
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/addons/website_event_track_online/static/src/scss/event_track_templates.scss b/addons/website_event_track_online/static/src/scss/event_track_templates.scss
index e3cac1965a4..692fd0cd186 100644
--- a/addons/website_event_track_online/static/src/scss/event_track_templates.scss
+++ b/addons/website_event_track_online/static/src/scss/event_track_templates.scss
@@ -2,43 +2,22 @@
  * EVENT TOOL: REMINDER WIDGET
  */
 .o_wevent_event .o_wetrack_js_reminder {
-    width: fit-content;
-    height: fit-content;
-    cursor: pointer;
-    background: grey;
+    // Icon only
+    &.btn-link {
+        padding: 0;
+    }
+
+    // Ensure width for size coherency
+    &:not(.btn-link) {
+        min-width: 100px;
+    }
 
     i {
         &.fa-bell {
             color: gold;
         }
         &.fa-bell-o {
-            color: white
-        }
-    }
-
-    // Icon only
-    &.o_wetrack_reminder_light {
-        background: transparent;
-        padding: 0;
-        i {
-            &.inactive_color_dark {
-                color: grey;
-            }
-        }
-        &:not(.o_wetrack_reminder_small) {
-            i {
-                font-size: 1.5em;
-            }
-        }
-    }
-
-    // Text included
-    &:not(.o_wetrack_reminder_light) {
-        &.o_wetrack_reminder_small {
-            padding: 0.25rem 0.50rem;
-            span {
-                min-width: 70px;
-            }
+            color: black;
         }
     }
 }
diff --git a/addons/website_event_track_online/views/event_track_templates_reminder.xml b/addons/website_event_track_online/views/event_track_templates_reminder.xml
index 2771cda1307..5731dc81ce7 100644
--- a/addons/website_event_track_online/views/event_track_templates_reminder.xml
+++ b/addons/website_event_track_online/views/event_track_templates_reminder.xml
@@ -7,17 +7,20 @@
     * light_theme: bell is white/gold if set; otherwse bell is gray / white
  -->
 <template id="track_widget_reminder">
-    <div t-att-class="'o_wetrack_js_reminder btn d-flex align-items-center justify-content-between rounded %s %s' % (
-        'o_wetrack_reminder_light' if reminder_light else '',
-        'o_wetrack_reminder_small' if reminder_small else '')">
-        <span t-if="not reminder_light"
-              t-att-class="'o_wetrack_js_reminder_text text-white text-left mr-1 %s' % ('small d-sm-inline' if reminder_small else '')">
-            <t t-esc="'Set Reminder' if not track.is_reminder_on else 'Reminder On'"/>
-        </span>
+    <div t-att-class="'o_wetrack_js_reminder btn %s %s' % (
+        'btn-link' if reminder_light else 'btn-outline-primary',
+        'btn-sm' if reminder_small else '')">
         <i t-att-class="'fa fa-bell%s inactive_color_%s' % ('' if track.is_reminder_on else '-o', 'dark' if reminder_light and not light_theme else 'light')"
            t-att-data-track-id="track.id"
            t-att-title="'Reminder On' if track.is_reminder_on else 'Set a Reminder'"
            t-att-data-reminder-on="bool(track.is_reminder_on)"></i>
+        <span t-if="not reminder_light" class="o_wetrack_js_reminder_text">
+            <t t-if="not track.is_reminder_on">
+                Set Reminder
+            </t><t t-else="">
+                Reminder On
+            </t>
+        </span>
     </div>
 </template>