[FIX] hr_org_chart: BS4, restore most of the hr_org_chart feature

With BS4, the popover and the chart design were broken. This is now
restored but could still use a bit of redesigning.

2 files changed, 31 insertions, 22 deletions

diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index b708eb48753..10491082574 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -130,10 +130,14 @@
         overflow: visible;
         margin-top: 0;
 
-        &, .media-left, .media-body {
+        &, .o_media_left, .media-body {
             position: relative;
         }
 
+        .o_media_left {
+            padding-right: 10px;
+        }
+
         .media-body {
             vertical-align: middle;
 
@@ -161,7 +165,8 @@
             }
         }
 
-        .media-object {
+        .o_media_object {
+            display: block;
             width: $o-hr-org-chart-entry-pic-size*0.8;
             height: $o-hr-org-chart-entry-pic-size*0.8;
             margin: $o-hr-org-chart-entry-pic-size*0.1;
@@ -189,7 +194,7 @@
         }
 
         &.o_org_chart_entry_manager, &.o_org_chart_entry_sub {
-            .media-left {
+            .o_media_left {
                 padding-right: 0;
             }
             .media-body > a {
@@ -197,18 +202,18 @@
                 max-width: calc(100% - 40px);
                 display: block;
 
-                .media-heading {
+                .o_media_heading {
                     color: lighten(gray('600'), 5%);
                     font-size: 13px;
                 }
             }
 
             &:hover {
-                .media-object {
+                .o_media_object {
                     box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6);
                 }
                 .media-body > a {
-                    .media-heading {
+                    .o_media_heading {
                         color: $o-brand-primary;
                     }
                     strong {
@@ -227,7 +232,7 @@
                 color: $text-muted;
             }
 
-            .media-object {
+            .o_media_object {
                 width: $o-hr-org-chart-entry-pic-size;
                 height: $o-hr-org-chart-entry-pic-size;
                 margin: 0;
@@ -246,7 +251,7 @@
 .o_org_chart_popup.popover {
     max-width: 400px;
 
-    .popover-title {
+    .popover-header {
         height: 47px;
         line-height: 33px;
         padding-right: 50px;
diff --git a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
index f1cbc96a4eb..e4e7f9fa231 100644
--- a/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
+++ b/addons/hr_org_chart/static/src/xml/hr_org_chart.xml
@@ -5,17 +5,17 @@
     <div t-attf-class="o_org_chart_entry o_org_chart_entry_#{employee_type} media">
         <t t-set="is_self" t-value="employee_type == 'self'"/>
 
-        <div>
+        <div class="o_media_left">
             <!-- NOTE: Since by the default on not squared images odoo add white borders,
                 use bg-images to get a clean and centred images -->
             <a t-if="! is_self"
-                class="rounded-circle o_employee_redirect"
+                class="o_media_object rounded-circle o_employee_redirect"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"
                 t-att-alt="employee.name"
                 t-att-data-employee-id="employee.id"
                 t-att-href="employee.link"/>
             <div t-if="is_self"
-                class="rounded-circle"
+                class="o_media_object rounded-circle"
                 t-att-style="'background-image:url(\'/web/image/hr.employee/' + employee.id + '/image/\')'"/>
         </div>
 
@@ -35,12 +35,12 @@
 
             <t t-if="!is_self">
                 <a t-att-href="employee.link" class="o_employee_redirect" t-att-data-employee-id="employee.id">
-                    <h5><b><t t-esc="employee.name"/></b></h5>
+                    <h5 class="o_media_heading"><b><t t-esc="employee.name"/></b></h5>
                     <strong><t t-esc="employee.job_name"/></strong>
                 </a>
             </t>
             <t t-if="is_self">
-                <h5><b><t t-esc="employee.name"/></b></h5>
+                <h5 class="o_media_heading"><b><t t-esc="employee.name"/></b></h5>
                 <strong><t t-esc="employee.job_name"/></strong>
             </t>
         </div>
@@ -59,11 +59,13 @@
     <div t-if='managers.length &gt; 0' class="o_org_chart_group_up">
         <t t-if='managers_more'>
             <div class="o_org_chart_entry o_org_chart_more media">
-                <a class="text-center o_employee_redirect"
-                        t-att-href="managers[0].link"
-                        t-att-data-employee-id="managers[0].id">
-                    <i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
-                </a>
+                <div class="o_media_left">
+                    <a class="text-center o_employee_redirect"
+                            t-att-href="managers[0].link"
+                            t-att-data-employee-id="managers[0].id">
+                        <i t-attf-class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
+                    </a>
+                </div>
             </div>
         </t>
 
@@ -100,16 +102,18 @@
 
         <t t-if="(children.length + managers.length) &gt; 7">
             <div class="o_org_chart_entry o_org_chart_more media">
-                <a href="#"
-                    t-att-data-employee-id="self.id"
-                    class="o_org_chart_show_more text-center o_employee_sub_redirect">&#8230;</a>
+                <div class="o_media_left">
+                    <a href="#"
+                        t-att-data-employee-id="self.id"
+                        class="o_org_chart_show_more text-center o_employee_sub_redirect">&#8230;</a>
+                </div>
             </div>
         </t>
     </div>
 </t>
 
 <t t-name="hr_orgchart_emp_popover">
-    <div class="popover o_org_chart_popup" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
+    <div class="popover o_org_chart_popup" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>
 </t>
 
 <t t-name="hr_orgchart_emp_popover_content">