From f0fbdb91e2e5f18e63492ae67eaf04ade4cacad4 Mon Sep 17 00:00:00 2001
From: "Dardenne Florent (dafl)" <dafl@odoo.com>
Date: Thu, 1 Sep 2022 17:29:52 +0000
Subject: [PATCH] [FIX] web: kanban: fix kanban card drag&drop highlight

Since odoo/odoo@209a97c, the drag&drop of a kanban card in a columnn
is highlighted.

This feature was tested visually on a build that was not up to date
 with master.
Resulting in a visual conflict with [classes.push("bg-100");](https://github.com/odoo/odoo/commit/7cfe50749f89a2e2fdd5bfdcc943210f891e38c9#diff-4de8437424d1b687477e865e387b017fc5a6a86e9c50c9ea198da79d3a7a1a4cR266)
which overrides the highlight background-color.

This commit resolves this conflict to have the drag&drop highlight
 background.

closes odoo/odoo#99441

Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>
---
 .../web/static/src/views/kanban/kanban_controller.scss |  7 +++++--
 addons/web/static/src/views/kanban/kanban_renderer.js  | 10 ++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 964ee431a55..515e1473511 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -19,6 +19,9 @@
     --KanbanRecord__image--fill-width: #{$o-kanban-image-fill-width};
 
     --KanbanRecord__dropdown-gap: #{$border-width};
+
+    --KanbanColumn__highlight-background: #{rgba($o-info, .05)};
+    --KanbanColumn__highlight-border: #{$o-info};
     // ----------------------------------------------------------------------------
 
     .dropdown,
@@ -486,8 +489,8 @@
             }
         }
         &.o_kanban_hover {
-            background-color: #00a09d0d;
-            box-shadow: -1px 0px 0px 0px #00a09d inset, 1px 0px 0px 0px #00a09d inset;
+            background-color: var(--KanbanColumn__highlight-background);
+            box-shadow: -1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset, 1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset;
         }
     }
 
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index 9afe5a36df2..03a051f7ff6 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -63,8 +63,14 @@ export class KanbanRenderer extends Component {
                     }
                     element.classList.add("o_dragged", "shadow");
                 },
-                onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
-                onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
+                onGroupEnter: (group) => {
+                    group.classList.add("o_kanban_hover");
+                    group.classList.remove("bg-100");
+                },
+                onGroupLeave: (group) => {
+                    group.classList.remove("o_kanban_hover");
+                    group.classList.add("bg-100");
+                },
                 onStop: (group, element) => {
                     group && group.classList && group.classList.remove("o_kanban_hover");
                     element.classList.remove("o_dragged", "shadow");