From 060a383aa3a4cd7961774e1932e5918e725d2bd0 Mon Sep 17 00:00:00 2001
From: Dossogne Bertrand <bedo@odoo.com>
Date: Wed, 4 Jan 2023 15:57:21 +0000
Subject: [PATCH] [FIX] hr: fix visuals for mobile on form & kanban views

Before this commit, two visual errors were present on mobile:
- In the employee form view, the name and professions were
overlapping with the profile picture;
- In the employee kanban view, the presence logo and the
activity logo were misaligned

This commit also fixes some indentation errors.

closes odoo/odoo#109145

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>
---
 addons/hr/static/src/scss/hr.scss     |  28 +++-
 addons/hr/views/hr_employee_views.xml | 176 +++++++++++++-------------
 2 files changed, 113 insertions(+), 91 deletions(-)

diff --git a/addons/hr/static/src/scss/hr.scss b/addons/hr/static/src/scss/hr.scss
index 1670c1913b4..eb4c249ec3d 100644
--- a/addons/hr/static/src/scss/hr.scss
+++ b/addons/hr/static/src/scss/hr.scss
@@ -4,10 +4,18 @@
 }
 
 .o_employee_form {
+    .o_employee_chat_btn {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 5px;
+        @include media-breakpoint-down(md) {
+            margin-left: 0!important;
+        }
+    }
     .o_employee_avatar {
-        position: absolute;
-        top: 60px;
-        right: 10px;
+        position: relative;
+        width: fit-content;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -28,7 +36,19 @@
         }
     }
     .oe_title {
-        max-width: 75%;
+        flex: 1;
+    }
+}
+
+.o_hr_employee_kanban {
+    .o_employee_availability {
+        margin: 0 1px;
+    }
+    .o_kanban_record_bottom {
+        margin: 0 var(--KanbanRecord-padding-h);
+        .fa.fa-comments {
+            margin-bottom: 5px;
+        }
     }
 }
 
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index 163735a084f..b0edd6a03eb 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -37,7 +37,7 @@
                         <filter name="group_category_ids" string="Tags" domain="[]" context="{'group_by': 'category_ids'}"/>
                     </group>
                 </search>
-             </field>
+            </field>
         </record>
 
         <record id="view_employee_form" model="ir.ui.view">
@@ -62,31 +62,33 @@
                         </div>
                         <widget name="web_ribbon" title="Archived" bg_color="bg-danger" attrs="{'invisible': [('active', '=', True)]}"/>
                         <field name="avatar_128" invisible="1"/>
-                        <div class="o_employee_avatar">
-                            <field name="image_1920" widget='image' class="oe_avatar m-0" options='{"zoom": true, "preview_image":"avatar_128"}'/>
-                            <div id="hr_presence_status" class="d-flex align-items-end fs-6 o_employee_availability">
-                                <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                                <small role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_present')]}" aria-label="Present" title="Present"/>
-                                <!-- Employee is not present and it is normal according to his work schedule -->
-                                <small role="img" class="fa fa-fw fa-circle-o text-muted o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_absent')]}" aria-label="Absent" title="Absent" name="presence_absent"/>
-                                <!-- Employee is connected but according to his work schedule, he should not work for now  -->
-                                <small role="img" class="fa fa-fw fa-circle-o text-success o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_absent_active')]}" aria-label="Present but not active" title="Present but not active" name="presence_absent_active"/>
-                                <!-- Employee is not here but according to his work schedule, he should be connected -->
-                                <small role="img" class="fa fa-fw fa-circle text-warning o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_to_define')]}" aria-label="To define" title="To define" name="presence_to_define"/>
+                        <div class="row justify-content-between position-relative w-100 m-0 mb-2">
+                            <div class="oe_title mw-75 ps-0 pe-2">
+                                <h1 class="d-flex flex-row align-items-center">
+                                    <div attrs="{'invisible':[('user_id', '=', False)]}" class="me-2">
+                                        <widget name="hr_employee_chat" invisible="not context.get('chat_icon')"/>
+                                    </div>
+                                    <field name="name" placeholder="Employee's Name"
+                                        required="True" style="font-size: min(4vw, 2.6rem);"/>
+                                </h1>
+                                <h2>
+                                    <field name="job_title" placeholder="Job Position" />
+                                </h2>
+                                <field name="category_ids" widget="many2many_tags" options="{'color_field': 'color', 'no_create_edit': True}" placeholder="Tags"  groups="hr.group_hr_user"/>
+                            </div>
+                            <div class="o_employee_avatar m-0 p-0">
+                                <field name="image_1920" widget='image' class="oe_avatar m-0" options='{"zoom": true, "preview_image":"avatar_128"}'/>
+                                <div id="hr_presence_status" class="d-flex align-items-end fs-6 o_employee_availability">
+                                    <!-- Employee is present/connected and it is normal according to his work schedule  -->
+                                    <small role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_present')]}" aria-label="Present" title="Present"/>
+                                    <!-- Employee is not present and it is normal according to his work schedule -->
+                                    <small role="img" class="fa fa-fw fa-circle-o text-muted o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_absent')]}" aria-label="Absent" title="Absent" name="presence_absent"/>
+                                    <!-- Employee is connected but according to his work schedule, he should not work for now  -->
+                                    <small role="img" class="fa fa-fw fa-circle-o text-success o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_absent_active')]}" aria-label="Present but not active" title="Present but not active" name="presence_absent_active"/>
+                                    <!-- Employee is not here but according to his work schedule, he should be connected -->
+                                    <small role="img" class="fa fa-fw fa-circle text-warning o_button_icon hr_presence align-middle" attrs="{'invisible': [('hr_icon_display', '!=', 'presence_to_define')]}" aria-label="To define" title="To define" name="presence_to_define"/>
+                                </div>
                             </div>
-                        </div>
-                        <div class="oe_title">
-                            <h1 class="d-flex flex-row">
-                                <span class="me-2">
-                                    <widget name="hr_employee_chat" invisible="not context.get('chat_icon')"/>
-                                </span>
-                                <field name="name" placeholder="Employee's Name"
-                                    required="True" style="font-size: min(4vw, 2.6rem);"/>
-                            </h1>
-                            <h2>
-                                <field name="job_title" placeholder="Job Position" />
-                            </h2>
-                            <field name="category_ids" widget="many2many_tags" options="{'color_field': 'color', 'no_create_edit': True}" placeholder="Tags"  groups="hr.group_hr_user"/>
                         </div>
                         <group>
                             <group>
@@ -202,7 +204,6 @@
                                 </group>
                             </page>
                         </notebook>
-
                     </sheet>
                     <div class="oe_chatter">
                         <field name="message_follower_ids" groups="base.group_user" options="{'post_refresh': 'recipients'}"/>
@@ -267,38 +268,39 @@
         </record>
 
         <record id="hr_kanban_view_employees" model="ir.ui.view">
-           <field name="name">hr.employee.kanban</field>
-           <field name="model">hr.employee</field>
-           <field name="priority">10</field>
-           <field name="arch" type="xml">
-               <kanban class="o_hr_employee_kanban" js_class="hr_employee_kanban" sample="1">
-                   <field name="id"/>
-                   <field name="hr_presence_state"/>
-                   <field name="user_id"/>
-                   <field name="user_partner_id"/>
-                   <field name="hr_icon_display"/>
-                   <field name="show_hr_icon_display"/>
-                   <field name="image_128" />
-                   <templates>
-                       <t t-name="kanban-box">
-                       <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
+            <field name="name">hr.employee.kanban</field>
+            <field name="model">hr.employee</field>
+            <field name="priority">10</field>
+            <field name="arch" type="xml">
+                <kanban class="o_hr_employee_kanban" js_class="hr_employee_kanban" sample="1">
+                    <field name="id"/>
+                    <field name="hr_presence_state"/>
+                    <field name="user_id"/>
+                    <field name="user_partner_id"/>
+                    <field name="hr_icon_display"/>
+                    <field name="show_hr_icon_display"/>
+                    <field name="image_128" />
+                    <templates>
+                        <t t-name="kanban-box">
+                        <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
                             <field name="image_1024" class="o_kanban_image_fill_left d-block" preview_image="image_128"
                                 widget="background_image" options="{'zoom': true, 'zoom_delay': 1000}"/>
 
                             <div class="oe_kanban_details">
-                               <div class="o_kanban_record_top">
-                                   <div class="o_kanban_record_headings">
-                                       <strong class="o_kanban_record_title">
-                                           <t t-if="record.show_hr_icon_display.raw_value">
-                                                <div class="float-end"
+                                <div class="o_kanban_record_top">
+                                    <div class="o_kanban_record_headings">
+                                        <strong class="o_kanban_record_title">
+                                            <t t-if="record.show_hr_icon_display.raw_value">
+                                                <div class="float-end o_employee_availability"
                                                      t-if="record.hr_icon_display.raw_value == 'presence_present'"
                                                      name="presence_present">
                                                     <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                                                    <span class="fa fa-circle text-success" role="img" aria-label="Present"
+                                                    <span class="fa fa-circle text-success"
+                                                          role="img" aria-label="Present"
                                                           title="Present" name="presence_present">
                                                     </span>
                                                 </div>
-                                                <div class="float-end"
+                                                <div class="float-end o_employee_availability"
                                                      t-if="record.hr_icon_display.raw_value == 'presence_absent'"
                                                      name="presence_absent">
                                                     <!-- Employee is not present and it is normal according to his work schedule -->
@@ -306,7 +308,7 @@
                                                           title="Absent" name="presence_absent">
                                                     </span>
                                                 </div>
-                                                <div class="float-end"
+                                                <div class="float-end o_employee_availability"
                                                      t-if="record.hr_icon_display.raw_value == 'presence_absent_active'"
                                                         name="presence_absent_active">
                                                     <!-- Employee is connected but according to his work schedule,
@@ -317,7 +319,7 @@
                                                           name="presence_absent_active">
                                                     </span>
                                                 </div>
-                                                <div class="float-end"
+                                                <div class="float-end o_employee_availability"
                                                      t-if="record.hr_icon_display.raw_value == 'presence_to_define'"
                                                         name="presence_to_define">
                                                     <!-- Employee is not here but according to his work schedule, he should be connected -->
@@ -328,32 +330,32 @@
                                                 </div>
                                             </t>
                                             <field name="name" placeholder="Employee's Name"/>
-                                       </strong>
-                                       <span t-if="record.job_title.raw_value" class="o_kanban_record_subtitle"><field name="job_title"/></span>
-                                   </div>
-                               </div>
-                               <field name="category_ids" widget="many2many_tags" options="{'color_field': 'color'}" groups="hr.group_hr_user"/>
-                               <ul>
-                                   <li id="last_login"/>
-                                   <li t-if="record.work_email.raw_value" class="o_text_overflow"><field name="work_email" /></li>
-                                   <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
-                               </ul>
-                           </div>
-                           <div class="oe_kanban_content o_hr_employee_kanban_bottom position-absolute bottom-0 start-0 end-0 me-2 pe-none">
-                               <div class="o_kanban_record_bottom">
-                                   <div class="oe_kanban_bottom_left"/>
-                                   <div class="oe_kanban_bottom_right float-end pe-auto">
+                                        </strong>
+                                        <span t-if="record.job_title.raw_value" class="o_kanban_record_subtitle"><field name="job_title"/></span>
+                                    </div>
+                                </div>
+                                <field name="category_ids" widget="many2many_tags" options="{'color_field': 'color'}" groups="hr.group_hr_user"/>
+                                <ul>
+                                    <li id="last_login"/>
+                                    <li t-if="record.work_email.raw_value" class="o_text_overflow"><field name="work_email" /></li>
+                                    <li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
+                                </ul>
+                            </div>
+                            <div class="oe_kanban_content o_hr_employee_kanban_bottom position-absolute bottom-0 start-0 end-0">
+                                <div class="o_kanban_record_bottom">
+                                    <div class="oe_kanban_bottom_left"/>
+                                    <div class="oe_kanban_bottom_right float-end pe-auto">
                                         <widget name="hr_employee_chat"/>
-                                        <div class="hr_activity_container mb-1 me-n1">
+                                        <div class="hr_activity_container mb-1 ms-2 me-n1">
                                             <field name="activity_ids" widget="kanban_activity"/>
                                         </div>
-                                   </div>
-                               </div>
-                           </div>
-                       </div>
-                       </t>
-                   </templates>
-               </kanban>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </t>
+                    </templates>
+                </kanban>
             </field>
         </record>
 
@@ -385,13 +387,13 @@
             <field name="view_id" eval="False"/>
             <field name="search_view_id" ref="view_employee_filter"/>
             <field name="help" type="html">
-             <p class="o_view_nocontent_smiling_face">
-               Add a new employee
-             </p><p>
-               With just a quick glance on the Odoo employee screen, you
-               can easily find all the information you need for each person;
-               contact data, job position, availability, etc.
-             </p>
+                <p class="o_view_nocontent_smiling_face">
+                    Add a new employee
+                </p><p>
+                    With just a quick glance on the Odoo employee screen, you
+                    can easily find all the information you need for each person;
+                    contact data, job position, availability, etc.
+                </p>
             </field>
         </record>
 
@@ -455,13 +457,13 @@
                 "expand": 1}
             </field>
             <field name="help" type="html">
-              <p class="o_view_nocontent_smiling_face">
-                Add a new employee
-              </p><p>
-                With just a quick glance on the Odoo employee screen, you
-                can easily find all the information you need for each person;
-                contact data, job position, availability, etc.
-              </p>
+                <p class="o_view_nocontent_smiling_face">
+                    Add a new employee
+                </p><p>
+                    With just a quick glance on the Odoo employee screen, you
+                    can easily find all the information you need for each person;
+                    contact data, job position, availability, etc.
+                </p>
             </field>
         </record>