From 879e4e3412beb1e5a9cc2b084c5bb39867f9dde9 Mon Sep 17 00:00:00 2001
From: "Xavier Bol (xbo)" <xbo@odoo.com>
Date: Thu, 5 Oct 2023 13:02:49 +0200
Subject: [PATCH] [IMP] hr_org_chart: add opacity when one of siblings is
 unfolded

Before this commit, when the user unfolds a node to display its child
nodes, if that node unfolded has some child nodes then it could be
difficult for the user to clearly see the hierarchy.

This commit adds an opacity to 50% for the sibling nodes when the user
unfold a node in the same row.

task-3376776
---
 .../static/src/views/hierarchy/hierarchy_card.js   |  8 ++++++++
 .../static/src/views/hierarchy/hierarchy_card.xml  |  2 +-
 .../src/views/hierarchy/hierarchy_renderer.scss    | 14 ++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
index ae4d4296991..0c38b13f24d 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -34,6 +34,14 @@ export class HierarchyCard extends Component {
         this.templates = useViewCompiler(this.constructor.Compiler, templates);
     }
 
+    get classNames() {
+        const classNames = [this.props.classNames];
+        if (this.props.node.nodes.length) {
+            classNames.push("o_hierarchy_node_unfolded");
+        }
+        return classNames.join(" ");
+    }
+
     getRenderingContext(data) {
         const record = getFormattedRecord(data.record);
         return {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index 4e30411c9b1..258e479558f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -2,7 +2,7 @@
 <templates>
 
     <t t-name="hr_org_chart.HierarchyCard">
-        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames" t-att-data-node-id="props.node.id">
+        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="classNames" t-att-data-node-id="props.node.id">
             <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
                 <button t-if="props.node.parentResId !== false and !props.node.parentNode"
                         name="hierarchy_search_parent_node"
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
index 4dbda080b22..a5eb58f281f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
@@ -4,10 +4,16 @@ $o-chart-line-color: #ababb1;
     .o_hierarchy_container {
         gap: 25px;
 
-        .o_hierarchy_row.o_hierarchy_hover {
-            background-color: $hierarchy_element_hover-background;
-            box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
-                1px 1px 0px 0px $hierarchy_element_hover-border inset;
+        .o_hierarchy_row {
+            &.o_hierarchy_hover {
+                background-color: $hierarchy_element_hover-background;
+                box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
+                    1px 1px 0px 0px $hierarchy_element_hover-border inset;
+            }
+
+            &:has(.o_hierarchy_node_unfolded) .o_hierarchy_node_container:not(.o_hierarchy_node_unfolded) {
+                opacity: 50%;
+            }
         }
 
         .o_hierarchy_separator {