[IMP] hr_attendance: review and simplify scss
Part of the overall v16 SCSS optimization/restyle, task-2704984. task-2852148 Part-of: odoo/odoo#91364
This commit is contained in:
stefanorigano (SRI)
@@ -1,229 +1,34 @@
|
||||
|
||||
.o_kanban_view #oe_hr_attendance_status {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
#oe_hr_attendance_status {
|
||||
color: $o-brand-secondary;
|
||||
&.oe_hr_attendance_status_green {
|
||||
color: theme-color('success');
|
||||
.o_hr_attendance_kiosk_mode, .o_hr_attendance_clock {
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 100%;
|
||||
}
|
||||
&.oe_hr_attendance_status_orange {
|
||||
color: theme-color('warning');
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_kiosk_backdrop {
|
||||
@include o-position-absolute(0,0,0,0);
|
||||
background-color: fade-out(black, 0.7);
|
||||
}
|
||||
|
||||
.o_hr_attendance_clock {
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
background-color: fade-out(black, 0.7);
|
||||
font: normal 1.2em $font-family-monospace;
|
||||
color: white;
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include o-position-absolute(20px, 20px);
|
||||
width: auto;
|
||||
padding: 3px 10px 3px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_kiosk_mode_container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
justify-content: center;
|
||||
@include o-position-absolute(0, 0); // Fine-tuned by margin classes
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_kiosk_mode {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: fade-out(white, 0.1);
|
||||
&.o_barcode_main {
|
||||
font-family: 'Lato', sans-serif;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 3em;
|
||||
img {
|
||||
width: 115px;
|
||||
height: 60px;
|
||||
}
|
||||
.o_hr_attendance_kiosk_welcome_row img {
|
||||
max-width: inherit;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
h2 {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
overflow: hidden;
|
||||
padding: 0 2em 2em;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 2em 4em;
|
||||
width: auto;
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
border-radius: 0.2em;
|
||||
font-size: 1.2em;
|
||||
animation: fadeInDownSmall .3s;
|
||||
}
|
||||
min-width: map-get($grid-breakpoints, 'md') * .6;
|
||||
|
||||
.o_hr_attendance_kiosk_welcome_row {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 80px;
|
||||
.o_hr_attendance_user_badge {
|
||||
@include o-position-absolute(auto, $border-width * -1, 100%, $border-width * -1); // Compensate card's border
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_sign_in_out_icon {
|
||||
cursor: pointer;
|
||||
margin: 0.1em 0 0.1em;
|
||||
padding: 0.15em 0.3em;
|
||||
border-radius: .1em;
|
||||
box-shadow: inset 0 -3px 0 fade-out(black, 0.7);
|
||||
|
||||
&.btn-secondary:hover {
|
||||
color: $o-brand-primary;
|
||||
}
|
||||
.o_hr_attendance_back_button_md {
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%); // Once migrate to BS5, can be replaced by 'translate-middle' class.
|
||||
}
|
||||
|
||||
.o_hr_attendance_back_button {
|
||||
.visible-xs{
|
||||
background: gray('200');
|
||||
margin: 0 -2em;
|
||||
.fa {
|
||||
@include o-position-absolute(0.75em);
|
||||
margin-left: -1.5em
|
||||
}
|
||||
}
|
||||
|
||||
.d-none.d-md-inline-block.btn-secondary {
|
||||
transform: translate(-50%, -50%);
|
||||
@include o-position-absolute(0, $left:0);
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 50%;
|
||||
padding-left: 14px;
|
||||
line-height: 1.5em;
|
||||
text-align: left;
|
||||
color: $body-color;
|
||||
font-size: 1.6em;
|
||||
z-index: 1;
|
||||
box-shadow: inset 0 0 0 1px fade-out(black, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary{
|
||||
box-shadow: inset 0 0 0 1px fade-out(black, 0.9);
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
.o_hr_attendance_user_badge {
|
||||
background: linear-gradient(to right bottom, #77717e, #c9a8a9);
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: white;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 1em -2em 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 0;
|
||||
height: 90px;
|
||||
border-radius: .2em .2em 0 0;
|
||||
border-top: 1px solid fade-out(white, 0.8);
|
||||
@include o-position-absolute(auto, 0, 100%, 0);
|
||||
transform: translateY(3px);
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transform: translateX(-50%)translateY(35%);
|
||||
@include o-position-absolute($bottom: 0);
|
||||
}
|
||||
}
|
||||
|
||||
+ h1 {
|
||||
margin-top: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_pin_pad [class*="col-"] {
|
||||
padding: 4px;
|
||||
|
||||
.o_hr_attendance_PINbox {
|
||||
font-size: 2em;
|
||||
border: none;
|
||||
padding: 0 $input-btn-padding-x-lg;
|
||||
background: fade-out(white, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.o_hr_attendance_random_message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.message_demo_barcodes {
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img.o_hr_attendance_kiosk_company_image {
|
||||
overflow:hidden; // prevent margins colapsing with h1
|
||||
margin: 1rem 0 2rem;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
> button {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.o_hr_attendance_PINbox_button {
|
||||
aspect-ratio: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,152 +1,201 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<template xml:space="preserve">
|
||||
<t t-name="PresenceIndicator">
|
||||
<div id="oe_hr_attendance_status" class="fa fa-circle" role="img" aria-label="Available" title="Available">
|
||||
<div id="oe_hr_attendance_status" class="fa fa-circle me-1 text-400 " role="img" aria-label="Available" title="Available">
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceCardLayout">
|
||||
<div class="o_hr_attendance_kiosk_mode_container o_home_menu_background d-flex flex-column align-items-center justify-content-center h-100 text-center">
|
||||
<span class="o_hr_attendance_kiosk_backdrop position-absolute top-0 start-0 end-0 bottom-0 bg-black-25"/>
|
||||
<div class="o_hr_attendance_clock bg-black-50 p-3 py-md-2 m-0 mt-md-5 mr-md-5 h2 text-white text-monospace"/>
|
||||
<div t-attf-class="o_hr_attendance_kiosk_mode flex-grow-1 flex-md-grow-0 card pb-3 px-0 px-lg-5 {{kioskModeClasses ? kioskModeClasses : '' }}">
|
||||
<div class="card-body d-flex flex-column p-0 p-md-4">
|
||||
<t t-out="bodyContent"></t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceUserBadge">
|
||||
<div class="o_hr_attendance_user_badge o_home_menu_background d-flex align-items-end justify-content-center flex-grow-1 pt-5 pt-md-4 bg-odoo">
|
||||
<img class="img rounded-circle mb-n5" t-attf-src="/web/image?model=hr.employee.public&field=avatar_128&id=#{userId}" t-att-title="userName" height="80" t-att-alt="userName"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceCheckInOutButtons">
|
||||
<button t-attf-class="o_hr_attendance_sign_in_out_icon btn btn-{{ checked_in ? 'warning' : 'secondary border' }} px-5 py-3 mt-4 mb-2">
|
||||
<i t-attf-class="fa fa-4x fa-sign-{{ checked_in ? 'out' : 'in' }}"/>
|
||||
</button>
|
||||
|
||||
<h4 class="text-muted mb-0">Click to <b t-if="checked_in">check out</b><b t-if="!checked_in">check in</b></h4>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceKioskMode">
|
||||
<div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
|
||||
<span class="o_hr_attendance_kiosk_backdrop"/>
|
||||
<div class="o_hr_attendance_clock text-center"/>
|
||||
<div class="o_hr_attendance_kiosk_mode o_barcode_main">
|
||||
<h2><small>Welcome to</small> <t t-esc="widget.company_name"/></h2>
|
||||
<img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image"/>
|
||||
<div class="row o_hr_attendance_kiosk_welcome_row">
|
||||
<div class="col-sm-5 mt16">
|
||||
<t t-call="HrAttendanceCardLayout">
|
||||
<t t-set="kioskModeClasses">o_barcode_main pt-5</t>
|
||||
<t t-set="bodyContent">
|
||||
<h2 class="mb-2"><small>Welcome to</small> <t t-esc="widget.company_name"/></h2>
|
||||
<img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image align-self-center img img-fluid mb-3" width="200"/>
|
||||
<div class="o_hr_attendance_kiosk_welcome_row row align-items-stretch pb-5">
|
||||
<div class="col-md-5 position-relative mt-5 mb-5 mb-md-0">
|
||||
<img class="img img-fluid d-block mx-auto" src="/barcodes/static/img/barcode.png"/>
|
||||
<h5 class="mt8 mb0 text-muted">Scan your badge</h5>
|
||||
<h6 class="position-absolute top-100 start-0 end-0 mt-2 text-muted">Scan your badge</h6>
|
||||
</div>
|
||||
<div class="col-sm-2 mt32">
|
||||
<div class="col-md-2 align-self-center mt-5">
|
||||
<h4 class="mt0 mb8"><i>or</i></h4>
|
||||
</div>
|
||||
<div class="col-sm-5 mt16">
|
||||
<button class="o_hr_attendance_button_employees btn btn-primary mb16">
|
||||
<div class="mb16 mt16">Identify Manually</div>
|
||||
<div class="col-md-5 mt-5">
|
||||
<button class="o_hr_attendance_button_employees btn btn-primary py-5 py-md-2 h-100">
|
||||
Identify Manually
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceMyMainMenu">
|
||||
<div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
|
||||
<span class="o_hr_attendance_kiosk_backdrop"/>
|
||||
<div class="o_hr_attendance_clock text-center"/>
|
||||
<div class="o_hr_attendance_kiosk_mode">
|
||||
<t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
|
||||
<t t-call="HrAttendanceCardLayout">
|
||||
<t t-set="bodyContent">
|
||||
<t t-if="widget.employee">
|
||||
<div class="o_hr_attendance_user_badge o_home_menu_background">
|
||||
<img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&field=avatar_128&id=#{widget.employee.id}" t-att-title="widget.employee.name" t-att-alt="widget.employee.name"/>
|
||||
<t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
|
||||
|
||||
<t t-call="HrAttendanceUserBadge">
|
||||
<t t-set="userId" t-value="widget.employee.id"/>
|
||||
<t t-set="userName" t-value="widget.employee.name"/>
|
||||
</t>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<h1 class="mt-5" t-esc="widget.employee.name"/>
|
||||
<h3><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
|
||||
<h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.hours_today"/></h4>
|
||||
</div>
|
||||
<h1 class="mb8"><t t-esc="widget.employee.name"/></h1>
|
||||
<h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
|
||||
<h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.hours_today"/></h4>
|
||||
<a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-out btn-warning" t-if="checked_in" aria-label="Sign out" title="Sign out"/>
|
||||
<a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-in btn-secondary" t-if="!checked_in" aria-label="Sign in" title="Sign in"/>
|
||||
<h3 class="mt0 mb0 text-muted">Click to <b t-if="checked_in">check out</b><b t-if="!checked_in">check in</b></h3>
|
||||
|
||||
<t t-call="HrAttendanceCheckInOutButtons"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
Warning : Your user should be linked to an employee to use attendance. Please contact your administrator.
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" t-else="">
|
||||
<b>Warning</b> : Your user should be linked to an employee to use attendance.<br/> Please contact your administrator.
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceKioskConfirm">
|
||||
<div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
|
||||
<span class="o_hr_attendance_kiosk_backdrop"/>
|
||||
<div class="o_hr_attendance_clock text-center"/>
|
||||
<div class="o_hr_attendance_kiosk_mode">
|
||||
<t t-call="HrAttendanceCardLayout">
|
||||
<t t-set="bodyContent">
|
||||
<t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
|
||||
<div class="o_hr_attendance_back_button">
|
||||
<span class="btn btn-secondary btn-lg d-block d-md-none"><i class="fa fa-chevron-left mr8"/> Go back</span>
|
||||
<span class="btn btn-secondary d-none d-md-inline-block"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
|
||||
</div>
|
||||
<t t-if="widget.employee_id">
|
||||
<div class="o_hr_attendance_user_badge o_home_menu_background">
|
||||
<img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&field=avatar_128&id=#{widget.employee_id}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
|
||||
</div>
|
||||
<h1 class="mb8"><t t-esc="widget.employee_name"/></h1>
|
||||
|
||||
<button class="o_hr_attendance_back_button btn btn-block btn-secondary btn-lg d-block d-md-none py-5">
|
||||
<i class="fa fa-chevron-left me-2"/> Go back
|
||||
</button>
|
||||
|
||||
<t t-if="widget.employee_id" t-call="HrAttendanceUserBadge">
|
||||
<t t-set="userId" t-value="widget.employee_id"/>
|
||||
<t t-set="userName" t-value="widget.employee_name"/>
|
||||
</t>
|
||||
|
||||
<button class="o_hr_attendance_back_button o_hr_attendance_back_button_md btn btn-secondary d-none d-md-inline-flex align-items-center position-absolute top-0 start-0 rounded-circle">
|
||||
<i class="fa fa-2x fa-fw fa-chevron-left me-1" role="img" aria-label="Go back" title="Go back"/>
|
||||
</button>
|
||||
|
||||
<div t-if="widget.employee_id" class="flex-grow-1">
|
||||
<h1 class="mt-5 mb8"><t t-esc="widget.employee_name"/></h1>
|
||||
<h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t><t t-else="">Want to check out?</t></h3>
|
||||
<h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.employee_hours_today"/></h4>
|
||||
<t t-if="!widget.use_pin">
|
||||
<a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-out btn-warning" t-if="checked_in" aria-label="Sign out" title="Sign out"/>
|
||||
<a class="fa fa-7x o_hr_attendance_sign_in_out_icon fa-sign-in btn-secondary" t-if="!checked_in" aria-label="Sign in" title="Sign in"/>
|
||||
<h3 class="mt0 mb0 text-muted">Click to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
|
||||
</t>
|
||||
|
||||
<t t-if="!widget.use_pin" t-call="HrAttendanceCheckInOutButtons"/>
|
||||
|
||||
<t t-else="">
|
||||
<h3 class="mt0 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
|
||||
<h3 class="mt-4 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">check out</b><b t-else="">check in</b></h3>
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2 o_hr_attendance_pin_pad">
|
||||
<div class="row" >
|
||||
<div class="col-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
|
||||
<div class="row no-gutters" >
|
||||
<div class="col-12 mb8 mt8">
|
||||
<input class="o_hr_attendance_PINbox border-0 bg-white fs-1 text-center" type="password" disabled="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row no-gutters">
|
||||
<t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', ['C', 'btn-warning'], '0', ['ok', 'btn-primary']]" t-as="btn_name">
|
||||
<div class="col-4 mb4">
|
||||
<a t-attf-class="btn {{btn_name[1]? btn_name[1] : 'btn-secondary'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }}"><t t-esc="btn_name[0]"/></a>
|
||||
<div class="col-4 p-1">
|
||||
<a href="#" t-attf-class="o_hr_attendance_PINbox_button btn {{btn_name[1]? btn_name[1] : 'btn-secondary border'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }} d-flex align-items-center justify-content-center">
|
||||
<t t-esc="btn_name[0]"/>
|
||||
</a>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
<div t-else="" class="alert alert-danger" role="alert">
|
||||
<b>Error: could not find corresponding employee.</b><br/>Please return to the main menu.
|
||||
</div>
|
||||
<div t-else="" class="alert alert-danger mx-3" role="alert">
|
||||
<h4 class="alert-heading">Error: could not find corresponding employee.</h4>
|
||||
<p>Please return to the main menu.</p>
|
||||
</div>
|
||||
<a role="button" class="oe_attendance_sign_in_out" aria-label="Sign out" title="Sign out"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-name="HrAttendanceGreetingMessage">
|
||||
<div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
|
||||
<span class="o_hr_attendance_kiosk_backdrop"/>
|
||||
<div class="o_hr_attendance_clock text-center"/>
|
||||
<div class="o_hr_attendance_kiosk_mode">
|
||||
<t t-call="HrAttendanceCardLayout">
|
||||
<t t-set="bodyContent">
|
||||
<t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
|
||||
|
||||
<t t-if="widget.attendance">
|
||||
<div class="o_hr_attendance_user_badge o_home_menu_background">
|
||||
<img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee.public&field=avatar_128&id=#{widget.attendance.employee_id[0]}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
|
||||
</div>
|
||||
<t t-if="widget.attendance.check_out">
|
||||
<h1 class="mb0">Goodbye <t t-esc="widget.employee_name"/>!</h1>
|
||||
<t t-call="HrAttendanceUserBadge">
|
||||
<t t-set="userId" t-value="widget.attendance.employee_id[0]"/>
|
||||
<t t-set="userName" t-value="widget.employee_name"/>
|
||||
</t>
|
||||
|
||||
<div t-if="widget.attendance.check_out" class="flex-grow-1">
|
||||
<h1 class="mt-5">Goodbye <t t-esc="widget.employee_name"/>!</h1>
|
||||
<h2 class="o_hr_attendance_message_message mt4 mb24"/>
|
||||
<div class="alert alert-info h2 mt0" role="status">
|
||||
<div class="alert alert-info fs-2 mx-3" role="status">
|
||||
Checked out at <b><t t-esc="widget.attendance.check_out_time"/></b>
|
||||
<br/><b><t t-esc="widget.hours_today"/></b>
|
||||
</div>
|
||||
<div t-att-class="'alert ' + (widget.today_overtime_float >= 0 ? 'alert-success' : 'alert-danger') + ' h3 mt0'" role="status">
|
||||
<div t-att-class="'alert ' + (widget.today_overtime_float >= 0 ? 'alert-success' : 'alert-danger') + ' h3 mx-3'" role="status">
|
||||
Extra hours today:
|
||||
<span t-esc="widget.today_overtime"/>
|
||||
</div>
|
||||
<t t-if="widget.total_overtime_float > 0">
|
||||
Total extra hours: <span t-esc="widget.total_overtime"/>
|
||||
</t>
|
||||
<h3 class="o_hr_attendance_random_message mb24"/>
|
||||
<h3 class="o_hr_attendance_random_message font-italic mb24"/>
|
||||
<div class="o_hr_attendance_warning_message mt24 alert alert-warning" style="display:none" role="alert"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<h1 class="mb0">Welcome <t t-esc="widget.employee_name"/>!</h1>
|
||||
</div>
|
||||
<div t-else="" class="flex-grow-1">
|
||||
<h1 class="mt-5 mb0">Welcome <t t-esc="widget.employee_name"/>!</h1>
|
||||
<h2 class="o_hr_attendance_message_message mt4 mb24"/>
|
||||
<div class="alert alert-info h2 mt0" role="status">
|
||||
<div class="alert alert-info fs-2 mx-3" role="status">
|
||||
Checked in at <b><t t-esc="widget.attendance.check_in_time"/></b>
|
||||
</div>
|
||||
<h3 class="o_hr_attendance_random_message mb24"/>
|
||||
<div class="o_hr_attendance_warning_message mt24 alert alert-warning" style="display:none" role="alert"/>
|
||||
</t>
|
||||
<button class="o_hr_attendance_button_dismiss btn btn-primary btn-lg">
|
||||
<span class="text-capitalize" t-if="widget.attendance.check_out">Goodbye</span>
|
||||
<span class="text-capitalize" t-else="">OK</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<button class="o_hr_attendance_button_dismiss align-self-center btn btn-primary btn-lg px-5 py-3">
|
||||
<span class="fs-2" t-if="widget.attendance.check_out">Goodbye</span>
|
||||
<span class="fs-2" t-else="">OK</span>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="alert alert-warning" role="alert">Invalid request, please return to the main menu.</div>
|
||||
<button class="o_hr_attendance_button_dismiss btn btn-secondary btn-lg">Go back</button>
|
||||
<div class="flex-grow-1">
|
||||
<div class="alert alert-warning mt-5 mx-3" role="alert">
|
||||
<h4 class="alert-heading">Invalid request</h4>
|
||||
<p>Please return to the main menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<button class="o_hr_attendance_button_dismiss btn btn-primary btn-lg fs-2 px-5 py-3">
|
||||
<i class="fa fa-chevron-left me-2"/>
|
||||
<span class="fs-2">Go back</span>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
@@ -67,8 +67,8 @@
|
||||
class="oe_stat_button"
|
||||
invisible="context.get('from_my_profile', False)"
|
||||
type="action" attrs="{'invisible': ['|', ('attendance_state', '=', False), '&', ('hr_presence_state', '=', 'present'), ('attendance_state', '=', 'checked_out')]}">
|
||||
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_green" attrs="{'invisible': [('attendance_state', '=', 'checked_out')]}" aria-label="Available" title="Available"/>
|
||||
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon oe_hr_attendance_status_red" attrs="{'invisible': [('attendance_state', '=', 'checked_in')]}" aria-label="Not available" title="Not available"/>
|
||||
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon me-1 text-success" attrs="{'invisible': [('attendance_state', '=', 'checked_out')]}" aria-label="Available" title="Available"/>
|
||||
<div role="img" id="oe_hr_attendance_status" class="fa fa-fw fa-circle o_button_icon me-1 text-danger" attrs="{'invisible': [('attendance_state', '=', 'checked_in')]}" aria-label="Not available" title="Not available"/>
|
||||
<div class="o_stat_info" attrs="{'invisible': ['|', ('last_check_in', '=', False), ('last_check_out', '!=', False)]}">
|
||||
<span class="o_stat_text">Attended Since</span>
|
||||
<span class="o_stat_value"><field name="last_check_in" widget="relative_time"/></span>
|
||||
@@ -144,10 +144,10 @@
|
||||
<div class="oe_kanban_details">
|
||||
<div id="textbox">
|
||||
<div class="float-right" t-if="record.attendance_state.raw_value == 'checked_in'">
|
||||
<span id="oe_hr_attendance_status" class="fa fa-circle oe_hr_attendance_status_green" role="img" aria-label="Available" title="Available"></span>
|
||||
<span id="oe_hr_attendance_status" class="fa fa-circle text-success me-1" role="img" aria-label="Available" title="Available"></span>
|
||||
</div>
|
||||
<div class="float-right" t-if="record.attendance_state.raw_value == 'checked_out'">
|
||||
<span id="oe_hr_attendance_status" class="fa fa-circle oe_hr_attendance_status_orange"
|
||||
<span id="oe_hr_attendance_status" class="fa fa-circle text-warning me-1"
|
||||
role="img" aria-label="Not available" title="Not available">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user