From 775ff75e403a018cab628b42300aad4e774329e0 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Fri, 20 Oct 2023 09:44:27 +0200
Subject: [PATCH] [IMP] web,hr_holiday: improve calendar filter panel

We replaced the customized checkboxes with the original input element
with `.form-check-input` whilst still using the custom colors for more
consistency accross modules.

Avatars have the .o_avatar class added to them which allows us to resize
them with the CSS variable.
And SCSS has been replaced with utility classes where possible.

This commit has been moved here from
PR https://github.com/odoo/odoo/pull/127532

task-3389317

Part-of: odoo/odoo#138670
---
 .../filter_panel/calendar_filter_panel.scss   | 24 +-----
 .../filter_panel/calendar_filter_panel.xml    | 10 +--
 .../views/calendar/calendar_controller.scss   | 72 ++--------------
 .../src/views/calendar/calendar_renderer.scss | 12 ++-
 .../filter_panel/calendar_filter_panel.scss   |  2 +-
 .../filter_panel/calendar_filter_panel.xml    | 83 ++++++++-----------
 6 files changed, 56 insertions(+), 147 deletions(-)

diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
index faabc002756..b2fe38ddb71 100644
--- a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
@@ -1,10 +1,7 @@
 .o_calendar_filter {
-    span {
-        vertical-align: middle;
-    }
 
-    & img {
-        width:30px;
+    img:not(.o_avatar) {
+        width: 30px;
 
         &.o_calendar_filter_plain {
             content:var(--calendarFilter-icon--plain);
@@ -19,23 +16,6 @@
         }
     }
 
-    .o_timeoff_legend {
-        display: inline-block;
-        width: 24px;
-        height: 30px;
-        margin: 0 3px;
-        padding: 3px 0;
-        text-align: center;
-
-        &_bankholiday {
-            background-color: $gray-200;
-        }
-
-        &_mandatoryday {
-            font-weight: 600;
-        }
-    }
-
     @for $size from 1 through length($o-colors) {
         .hr_mandatory_day_#{$size - 1}:not(.fc-disabled-day) {
             color: nth($o-colors, $size) !important;
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
index 31eb8e34bdc..f3a3bb41d26 100644
--- a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -3,12 +3,12 @@
 
     <t t-name="hr_holidays.CalendarFilterPanel" t-inherit="web.CalendarFilterPanel" t-inherit-mode="primary">
         <xpath expr="//t[@t-foreach='props.model.filterSections']" position="after">
-            <div class="o_calendar_filter">
+            <div class="o_calendar_filter mt-4">
                 <h5>Legend</h5>
                 <div class="d-flex flex-column">
-                    <span><img class="o_calendar_filter_plain" src="/hr/static/src/img/icons/plain.svg"/> Validated</span>
-                    <span><img class="o_calendar_filter_hatched" src="/hr/static/src/img/icons/hatched.svg"/> To Approve</span>
-                    <span><img class="o_calendar_filter_line" src="/hr/static/src/img/icons/line.svg"/> Refused</span>
+                    <span class="align-middle"><img class="o_calendar_filter_plain" src="/hr/static/src/img/icons/plain.svg"/> Validated</span>
+                    <span class="align-middle"><img class="o_calendar_filter_hatched" src="/hr/static/src/img/icons/hatched.svg"/> To Approve</span>
+                    <span class="align-middle"><img class="o_calendar_filter_line" src="/hr/static/src/img/icons/line.svg"/> Refused</span>
                 </div>
 
                 <div class="d-flex flex-column mt-4" t-if="leaveState.mandatoryDays.length">
@@ -40,7 +40,7 @@
 
     <t t-name="hr_holidays.CalendarFilterPanel.filter" t-inherit="web.CalendarFilterPanel.filter" t-inherit-mode="primary">
         <xpath expr="//span[@t-esc='filter.label']" position="replace">
-            <span class="o_cw_filter_title text-truncate flex-grow">
+            <span class="o_cw_filter_title flex-grow-1 text-truncate lh-base">
                 <t t-esc="filter.label"/>
 
                 <t t-if="env.isSmall">
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index 83f1d5b78ac..ef6feefb2c4 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -28,6 +28,9 @@ $o-cw-filter-avatar-size: 20px;
 }
 
 .o_calendar_sidebar_container {
+    --Avatar-size: #{$o-cw-filter-avatar-size};
+
+    flex: 0 0 auto;
     position: relative;
     grid-area: side;
     background-color: $o-view-background-color;
@@ -59,82 +62,17 @@ $o-cw-filter-avatar-size: 20px;
     }
 
     .o_calendar_filter {
-        font-size: 0.9em;
-        padding: 2em 0 1em;
-
-        .o_cw_filter_collapse_icon {
-            transition: all 0.3s ease;
-            @include o-hover-opacity();
-            font-size: 0.7em;
-        }
-
-        .collapsed .o_cw_filter_collapse_icon {
-            transform: rotate(90deg);
-            opacity: 1;
-        }
 
         .o_calendar_filter_items_checkall,
         .o_calendar_filter_item {
-            cursor: pointer;
-            overflow: hidden;
-
-            input {
-                z-index: -1;
-                opacity: 0;
-            }
-
-            .o_cw_filter_input_bg {
-                width: 1.3em;
-                height: 1.3em;
-                border-width: 2px;
-                border-style: solid;
-                border-radius: 1px;
-                overflow: hidden;
-                display: flex;
-
-                &.o_beside_avatar {
-                    width: $o-cw-filter-avatar-size;
-                    height: $o-cw-filter-avatar-size;
-                    border-radius: 2px;
-                    object-fit: cover;
-                    align-items: center;
-                }
-            }
-
-            input:not(:checked) + label .o_cw_filter_input_bg {
-                &:not(.o_cw_filter_avatar) {
-                    background: transparent !important;
-                }
-
-                i.fa {
-                    visibility: hidden;
-                }
-            }
-
-            .o_cw_filter_avatar {
-                width: $o-cw-filter-avatar-size;
-                height: $o-cw-filter-avatar-size;
-                border-radius: 2px;
-
-                &.fa {
-                    padding: 4px 3px;
-                }
-            }
-
-            .o_cw_filter_title {
-                line-height: $o-line-height-base;
-                flex-grow: 1;
-            }
 
             button.o_remove {
-                @include o-position-absolute(0, 0, 0);
-                transform: translateX(100%);
-                transition: transform 0.2s;
+                transform: translate(100%, -50%);
             }
 
             &:hover {
                 button.o_remove {
-                    transform: translateX(0%);
+                    transform: translate(0%, -50%);
                 }
             }
         }
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index 7759b2b87f1..6d5988c6217 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -573,10 +573,16 @@
     }
 
     .o_cw_filter_color_#{$i - 1} {
-        .o_cw_filter_input_bg:not(.no_filter_color) {
+        &.form-check:hover .o_cw_filter_input_bg:not(.no_filter_color) {
+            border-color: shade-color($color, 20%);
+        }
+
+        .o_cw_filter_input_bg {
             border-color: $color;
-            background: $color;
-            color: color-contrast($color);
+
+            &:checked {
+                background-color: $color;
+            }
         }
     }
 
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
index f207021067f..4974617977c 100644
--- a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
@@ -7,7 +7,7 @@
         overflow: hidden !important;
     }
     &.o-section-slide-enter-active {
-        max-height: 20rem; // fixed value is required to properly trigger transition
+        max-height: 100%; // max-height is required to properly trigger transition
         overflow: auto;
     }
     .o_calendar_filter_item {
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
index 8f08362ddec..e9502974551 100644
--- a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -5,63 +5,52 @@
         <t t-foreach="props.model.filterSections" t-as="section" t-key="section.fieldName">
             <t t-if="section.filters.length gt 0">
                 <div
-                    class="o_calendar_filter"
+                    class="o_calendar_filter d-flex flex-column gap-1 mt-4"
                     t-att-class="{'o-calendar-filter-panel--section-collapsed': isSectionCollapsed(section)}"
                     t-att-data-name="section.fieldName"
                 >
                     <t t-if="section.label">
-                        <div class="d-flex">
-                            <div
-                                class="o_calendar_filter_items_checkall me-2"
-                                data-value="section"
-                            >
-                                <t t-set="filterId" t-value="nextFilterId" />
-                                <input
-                                    type="checkbox"
-                                    name="select-all"
-                                    class="position-absolute"
-                                    t-attf-id="o_calendar_filter_{{filterId}}"
-                                    t-att-checked="isAllActive(section)"
-                                    t-on-change="(ev) => this.onAllFilterInputChange(section, ev)"
-                                />
+                        <div
+                            class="o_calendar_filter_items_checkall o-checkbox form-check"
+                            data-value="section"
+                        >
+                            <t t-set="filterId" t-value="nextFilterId"/>
+                            <input
+                                type="checkbox"
+                                name="select-all"
+                                class="form-check-input"
+                                t-attf-id="o_calendar_filter_{{filterId}}"
+                                t-att-checked="isAllActive(section)"
+                                t-on-change="(ev) => this.onAllFilterInputChange(section, ev)"
+                            />
+                             <t t-if="section.canCollapse">
                                 <label
-                                    class="d-flex align-items-center m-0"
-                                    t-attf-for="o_calendar_filter_{{filterId}}"
-                                >
-                                    <span class="o_cw_filter_input_bg o_calendar_filter_all">
-                                        <i class="fa fa-check position-relative" />
-                                    </span>
-                                </label>
-                            </div>
-
-                            <t t-if="section.canCollapse">
-                                <div
-                                    class="justify-content-between align-items-center h5"
+                                    class="d-flex align-items-center"
                                     type="button"
                                     t-on-click.stop.prevent="() => this.toggleSection(section, ev)"
                                 >
-                                    <span class="o_cw_filter_label" t-esc="section.label" />
+                                    <span class="o_cw_filter_label fw-bolder" t-esc="section.label"/>
                                     <i
-                                        class="o_cw_filter_collapse_icon fa"
-                                        t-attf-class="fa-chevron-{{ isSectionCollapsed(section) ? 'left' : 'down' }}"
+                                        class="o_cw_filter_collapse_icon fa ms-1"
+                                        t-attf-class="fa-caret-{{ isSectionCollapsed(section) ? 'left' : 'down' }}"
                                     />
-                                </div>
+                                </label>
                             </t>
                             <t t-else="">
-                                <h5 class="o_cw_filter_label" t-esc="section.label" />
+                                <label class="o_cw_filter_label fw-bolder" t-esc="section.label"/>
                             </t>
                         </div>
                     </t>
                     <Transition visible="!isSectionCollapsed(section)" name="'o-section-slide'" leaveDuration="350" t-slot-scope="transition">
-                        <div class="o_calendar_filter_items" t-att-class="transition.className">
+                        <div class="o_calendar_filter_items d-flex flex-column gap-1" t-att-class="transition.className">
                             <t t-foreach="getSortedFilters(section)" t-as="filter" t-key="filter.value">
-                                <t t-set="filterId" t-value="nextFilterId" />
-                                <t t-call="{{ constructor.subTemplates.filter }}" />
+                                <t t-set="filterId" t-value="nextFilterId"/>
+                                <t t-call="{{ constructor.subTemplates.filter }}"/>
                             </t>
                         </div>
                     </Transition>
                     <t t-if="section.canAddFilter">
-                        <AutoComplete t-props="getAutoCompleteProps(section)" />
+                        <AutoComplete t-props="getAutoCompleteProps(section)"/>
                     </t>
                 </div>
             </t>
@@ -70,56 +59,52 @@
 
     <t t-name="web.CalendarFilterPanel.filter">
         <div
-            class="o_calendar_filter_item w-100 position-relative mb-2"
+            class="o_calendar_filter_item o-checkbox form-check position-relative w-100 overflow-hidden cursor-pointer"
             t-att-class="getFilterColor(filter)"
             t-att-data-value="filter.value"
         >
             <input
                 type="checkbox"
                 name="selection"
-                class="position-absolute"
+                class="o_cw_filter_input_bg form-check-input"
+                t-att-style="filter.colorIndex and typeof filter.colorIndex !== 'number' ? `border-color: ${filter.colorIndex}; background-color: ${filter.colorIndex};` : ''"
                 t-attf-id="o_calendar_filter_item_{{filterId}}"
                 t-att-checked="filter.active"
                 t-on-change="(ev) => this.onFilterInputChange(section, filter, ev)"
             />
             <label
-                class="d-flex align-items-start m-0"
+                class="d-flex align-items-center gap-1"
                 t-attf-for="o_calendar_filter_item_{{filterId}}"
             >
-                <span
-                    class="o_cw_filter_input_bg d-flex flex-shrink-0 justify-content-center position-relative me-1 o_beside_avatar"
-                >
-                    <i class="fa fa-check position-relative" />
-                </span>
                 <t t-if="section.hasAvatar and filter.hasAvatar">
                     <img
-                        class="o_cw_filter_avatar flex-shrink-0 me-1"
+                        class="o_cw_filter_avatar o_avatar rounded"
                         t-attf-src="/web/image/{{ section.avatar.model }}/{{ filter.value }}/{{ section.avatar.field }}"
                         alt="Avatar"
                     />
                 </t>
                 <t t-elif="filter.type === 'all'">
                     <i
-                        class="o_cw_filter_avatar fa fa-users fa-fw flex-shrink-0 me-1"
+                        class="o_cw_filter_avatar o_avatar fa fa-users fa-fw flex-shrink-0 me-1"
                         role="img"
                         aria-label="Avatar"
                         title="Avatar"
                     />
                 </t>
                 <span
-                    class="o_cw_filter_title text-truncate flex-grow"
+                    class="o_cw_filter_title flex-grow-1 text-truncate lh-base"
                     t-esc="filter.label"
                 />
             </label>
             <t t-if="filter.canRemove">
                 <button
-                    class="o_remove btn bg-white text-700 py-0 px-2"
+                    class="o_remove btn position-absolute top-50 end-0 bg-white py-0 px-2 text-700 transition-base"
                     role="img"
                     title="Remove this favorite from the list"
                     aria-label="Remove this favorite from the list"
                     t-on-click="() => this.onFilterRemoveBtnClick(section, filter)"
                 >
-                    <i class="fa fa-times" />
+                    <i class="oi oi-close"/>
                 </button>
             </t>
         </div>