From 2b967b59eed3ea79519962bf012391e7bdf08598 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Mon, 25 Mar 2024 08:55:16 +0100
Subject: [PATCH] [MOV] web, calendar: move common scss into web

Prior to this commit, some of the main styles related to event elements
in calendars were set in the Calendar module.
This created layout issues when we installed independent modules without
installing the Calendar module (eg. `planning` or `hr_payroll`).

To fix that, this commit moves the necessary styles into `web`.

task-3617329
Part of task-3575827

Part-of: odoo/odoo#154964
---
 addons/calendar/static/src/scss/calendar.scss | 36 +----------------
 .../src/views/calendar/calendar_renderer.scss | 39 +++++++++++++++++++
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index d721173f5b541..03b54090aef7e 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -26,13 +26,11 @@
 
 .o_calendar_renderer .fc-event {
     &:not(.o_event_dot) {
-        --o-overlay-opacity: .5;
-
         &.o_attendee_status_active {
             --o-bg-opacity: 1;
         }
 
-        &.o_attendee_status_tentative, &.o_event_hatched {
+        &.o_attendee_status_tentative {
             --o-bg-opacity: .5;
         }
 
@@ -47,22 +45,6 @@
     }
 
     &.o_event_dot {
-        --o-overlay-opacity: .25;
-
-        display: flex;
-        align-items: center;
-        gap: map-get($spacers, 1 );
-        border: none;
-        background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
-
-        &:before {
-            z-index: 2;
-            display: inline-block;
-            font-family: Fontawesome;
-            color: var(--o-event-bg, #{$info});
-            content: '\f111'; // fa-circle
-        }
-
         &.o_attendee_status_needsAction, &.o_event_hatched {
             &:before {
                 content: "\f1db"; // fa-circle-thin
@@ -80,10 +62,6 @@
         &.o_attendee_status_alone {
             content: "\f06a"; // fa-exclamation-circle
         }
-
-        &:hover {
-            --o-bg-opacity: 1;
-        }
     }
 
     &.o_attendee_status_declined, &.o_event_striked {
@@ -92,15 +70,3 @@
         }
     }
 }
-
-@for $-i from 1 through length($o-colors-complete) {
-    $-color: nth($o-colors-complete, $-i);
-    $-color-subtle: mix($o-white, $-color, 85%);
-
-    .o_calendar_renderer .fc-event.o_calendar_color_#{$-i - 1} {
-        --o-event-bg: #{$-color};
-        --o-event-bg-rgb: #{to-rgb($-color)};
-        --o-event-bg--subtle: #{$-color-subtle};
-        --o-event-bg--subtle-rgb: #{to-rgb($-color-subtle)};
-    }
-}
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index 60eddd370b4b4..b20bdf2e6b6c0 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -72,6 +72,34 @@
                 }
             }
         }
+
+        &:not(.o_event_dot) {
+            --o-overlay-opacity: .5;
+
+            &.o_event_hatched {
+                --o-bg-opacity: .5;
+            }
+        }
+
+        &.o_event_dot {
+            --o-overlay-opacity: .25;
+
+            display: flex;
+            align-items: center;
+            gap: map-get($spacers, 1);
+            border: none;
+
+            &:before {
+                z-index: 2;
+                display: inline-block;
+                font-family: Fontawesome;
+                content: '\f111'; // fa-circle
+            }
+
+            &:hover {
+                --o-bg-opacity: 1;
+            }
+        }
     }
 
     .o_calendar_widget {
@@ -593,6 +621,9 @@
 
     .o_calendar_renderer .fc-view {
         .o_calendar_color_#{$i - 1} {
+            --o-event-bg: #{$color};
+            --o-event-bg--subtle-rgb: #{to-rgb($color-subtle)};
+
             &.fc-bgevent, &:not(.o_event_dot) .fc-bg {
                 background-color: $color-subtle;
             }
@@ -618,6 +649,14 @@
                 color: color-contrast($color-subtle);
                 border-color: tint-color($color, 50%);
             }
+
+            &.o_event_dot {
+                background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
+
+                &:before {
+                    color: var(--o-event-bg, #{$info});
+                }
+            }
         }
     }