pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] hr: fix visuals for mobile on form & kanban views

Browse Source 
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>
This commit is contained in:
Dossogne Bertrand
2023-01-09 16:39:04 +01:00
parent 2e29170852
commit 060a383aa3
2 changed files with 113 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr/static/src/scss/hr.scss
+24 -4
View File
@@ -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;
}
}
}
addons/hr/views/hr_employee_views.xml
+89 -87
View File
@@ -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>