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

[FIX] hr_attendance: review menu layout

Browse Source 
This commit fixes the layout of the hr attendance menu.

Prior to this commit, the layout was a bit cluttered and had a lack of
white space, making it difficult for the user to extract the information
he needed.

To fix these issues, we adapt the design of the menu, mainly by
reorganizing the layout and adding more white space.

With this commit, we were also able to clean the files, reducing the
number of lines needed to achieve a good visual result.

task-3577098

closes odoo/odoo#140454

Signed-off-by: Sofie Gvaladze (sgv) <sgv@odoo.com>
This commit is contained in:
Chrysanthe (chgo)
2023-11-06 15:36:50 +00:00
parent dbabdf624e
commit 09df480c3e
2 changed files with 37 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
+1 -30
View File
@@ -1,32 +1,3 @@
.att_container {
display: flex;
justify-content: normal;
align-items: flex-end;
min-width: 150px;
padding-left: 13px;
}
.o_hour_att {
margin-right: 10px;
}
.hour_label {
display: flex;
flex-direction: column;
.span{
line-height: 1;
}
}
.o_att_menu_container{
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
}
.o_hr_attendance_systray_check_in_btn{
width: 150px;
height: 40px;
font-variant-numeric: tabular-nums;
}
addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
+36 -49
View File
@@ -3,58 +3,45 @@
<t t-name="hr_attendance.attendance_menu" owl="1">
<t t-if="this.state.isDisplayed">
<Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
<div class="d-flex flex-column flex-grow-1">
<Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-2 pb-3`">
<t t-set-slot="toggler">
<i t-attf-class="fa fa-circle text-{{ this.state.checkedIn ? 'success' : 'warning' }}" role="img" aria-label="Attendance"></i>
</t>
<t t-set-slot="default">
<div class="o_att_menu_container m-1">
<button t-on-click="() => this.onClickSignInOut()" t-attf-class="o_hr_attendance_systray_check_in_btn btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }} align-self-center">
<span class="align-middle text-white" t-if="!this.state.checkedIn">Check IN</span>
<i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} align-middle"/>
<span class="align-middle" t-if="this.state.checkedIn">Check OUT</span>
</button>
<t t-if="this.state.checkedIn">
<div class="att_container">
<div class="o_hour_att">
<h2 t-esc="this.lastAttendanceWorkedHours"/>
</div>
<div class="hour_label">
<span>Since</span>
<span><t t-esc="this.lastCheckIn"/></span>
</div>
</div>
<t t-if="!this.isFirstAttendance">
<div class="att_container">
<div class="o_hour_att">
<h2 t-esc="this.hoursPreviouslyToday"/>
</div>
<div class="hour_label">
<span>Previously</span>
<span>Today</span>
</div>
<i class="fa fa-circle" t-attf-class="text-{{ this.state.checkedIn ? 'success' : 'danger' }}" role="img" aria-label="Attendance"/>
</t>
<t t-set-slot="default">
<div class="o_att_menu_container d-flex flex-column gap-4">
<div class="d-flex flex-column gap-3">
<div t-if="this.state.checkedIn" class="d-flex flex-wrap gap-3">
<div t-if="!this.isFirstAttendance" class="att_container flex-grow-1 flex-shrink-0">
<small class="d-block text-muted">Before <t t-esc="this.lastCheckIn"/></small>
<div t-esc="this.hoursPreviouslyToday" class="fs-3 text-info text-end"/>
</div>
<div class="att_container flex-grow-1 flex-shrink-0">
<small class="d-block text-muted">Since <t t-esc="this.lastCheckIn"/></small>
<div t-esc="this.lastAttendanceWorkedHours" t-attf-class="fs-3 text-info {{ !this.isFirstAttendance ? 'text-end' : '' }}"/>
</div>
</div>
<div t-if="!this.isFirstAttendance"
class="att_container d-flex flex-column"
t-att-class="this.state.checkedIn ? 'p-3 bg-100 rounded' : ''">
<div class="d-flex" t-att-class="this.state.checkedIn ? 'align-items-center justify-content-between' : 'flex-column'">
<small class="text-muted">Total today</small>
<h2 t-esc="this.hoursToday" class="mb-0 fs-2"/>
</div>
<button t-on-click="() => this.onClickSignInOut()" class="flex-basis-100 mt-3" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
<span t-if="!this.state.checkedIn">Check in</span>
<span t-else="">Check out</span>
<i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
</button>
</div>
</t>
</t>
<t t-if="!this.isFirstAttendance">
<t t-if="this.state.checkedIn">
<div class="att_container" style="border-top: 2px solid #dee2e6;"/>
</t>
<div class="att_container">
<div class="o_hour_att">
<h2 t-esc="this.hoursToday"/>
</div>
<div class="hour_label">
<span>Hours</span>
<span>Today</span>
</div>
</div>
</t>
</div>
</t>
</div>
</Dropdown>
<button t-if="this.isFirstAttendance" t-on-click="() => this.onClickSignInOut()" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
<span t-if="!this.state.checkedIn">Check in</span>
<span t-else="">Check out</span>
<i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
</button>
</div>
</t>
</Dropdown>
</t>
</t>