[IMP] hr_homeworking: improve homeworking button
Their now mobile friendly, and the Add Location button is more aesthetic. task-3389317 Part-of: odoo/odoo#138670
This commit is contained in:
Elisabeth Dickinson
committed by
Leonardo Pavan Rocha
Leonardo Pavan Rocha
parent
775ff75e40
commit
bac931f4ed
@@ -93,8 +93,8 @@ patch(AttendeeCalendarCommonRenderer.prototype, {
|
||||
onDayRender(info){
|
||||
const parsedDate = DateTime.fromJSDate(info.date).toISODate();
|
||||
if (this.props.model.scale === 'week' || this.props.model.scale === 'day'){
|
||||
const button = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .o_month`)
|
||||
const line = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .line`)
|
||||
const button = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] o_worklocation_text`)
|
||||
const line = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .o_worklocation_line`)
|
||||
if (!button || !line)
|
||||
return;
|
||||
info.homework = true;
|
||||
@@ -180,7 +180,7 @@ patch(AttendeeCalendarCommonRenderer.prototype, {
|
||||
}
|
||||
},
|
||||
onDateClick(info){
|
||||
if (info.jsEvent && info.jsEvent.target.closest(".btnWorklocation")) {
|
||||
if (info.jsEvent && info.jsEvent.target.closest(".o_worklocation_btn")) {
|
||||
info.homework = true
|
||||
this.props.createRecord(this.fcEventToRecord(info));
|
||||
} else {
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
.btnWorklocation{
|
||||
display:flex ;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 100;
|
||||
.o_worklocation_btn {
|
||||
margin: 2px;
|
||||
|
||||
.o_worklocation_text, .o_worklocation_line {
|
||||
box-shadow: 0 1px 0 rgba(0,0,0, 0.3)
|
||||
}
|
||||
.o_month{
|
||||
box-shadow: 0.1em 0.1em 0.1em rgb(131, 126, 126);
|
||||
border-radius: 100px;
|
||||
font-size: 0.75em;
|
||||
width: 50%;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.line{
|
||||
box-shadow: 0.1em 0.1em 0.1em rgb(131, 126, 126);
|
||||
border: none;
|
||||
border-color: transparent;
|
||||
height: 0.3px;
|
||||
width:100%;
|
||||
|
||||
.o_worklocation_text {
|
||||
font-size: $o-font-size-base-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
box-shadow: none !important;
|
||||
.o_worklocation_line {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.fc-event.o_homework_event {
|
||||
@@ -31,59 +19,59 @@
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
.o_homework_single {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.fc-content {
|
||||
margin: 0 !important;
|
||||
padding: 3px 6px 3px 6px;
|
||||
border-radius: 100px;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.line{
|
||||
height: 0.3em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.o_homework_multi {
|
||||
display: flex;
|
||||
.fc-content .fa-2x {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
font-size: 1.2em;
|
||||
&.fa-building {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
.o_homework_multi .o_homeworking_content .fa {
|
||||
height: var(--o-homework-icon-size, 20px);
|
||||
aspect-ratio: 1;
|
||||
font-size: var(--o-homework-icon-size, 1.2rem);
|
||||
|
||||
&.fa-building:before {
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through length($o-colors-complete) {
|
||||
$color: nth($o-colors-complete, $i);
|
||||
.o_popover{
|
||||
.wl_color_#{$i - 1} {
|
||||
color: $color;
|
||||
// ----- View specific
|
||||
.fc-timeGridDay-view {
|
||||
.o_worklocation_btn .o_worklocation_line{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
|
||||
.fc-timeGridWeek-view .o_homework_multi {
|
||||
--o-homework-icon-size: 1rem;
|
||||
|
||||
> span {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-dayGridMonth-view .o_homework_multi {
|
||||
--o-homework-icon-size: .75rem;
|
||||
|
||||
> span {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $-i from 1 through length($o-colors-complete) {
|
||||
$-color: nth($o-colors-complete, $-i);
|
||||
$-color-subtle: tint-color($-color, 65%);
|
||||
|
||||
.o_homework_multi {
|
||||
.wl_color_#{$i - 1} {
|
||||
color: $color;
|
||||
background-color: scale-color($color, $lightness: 85%);
|
||||
.wl_color_#{$-i - 1} {
|
||||
color: shade-color($-color, 10%);
|
||||
background-color: $-color-subtle;
|
||||
border-color: $-color-subtle !important;
|
||||
}
|
||||
}
|
||||
.o_homework_single {
|
||||
.wl_color_#{$i - 1} {
|
||||
background-color: scale-color($color, $lightness: 50%);
|
||||
.wl_color_#{$-i - 1} {
|
||||
background-color: $-color-subtle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,30 +3,30 @@
|
||||
<templates>
|
||||
<t t-name="hr.homeworking.CalendarCommonRenderer.worklocation">
|
||||
<t t-if="multiCalendar">
|
||||
<div class="o_homework_multi">
|
||||
<div class="o_homework_multi d-flex align-items-center gap-1">
|
||||
<t t-foreach="records" t-as="record" t-key="record.id">
|
||||
<div class="fc-content">
|
||||
<i class="o_homework_content me-0" t-att-class="`fa ${iconStr} fa-2x wl_color_${record.colorIndex}`" t-att-data-id="record.id"/>
|
||||
<div class="o_homeworking_content">
|
||||
<i class="o_homework_content d-flex align-items-center justify-content-center flex-wrap border border-1 rounded-circle me-0" t-att-class="`fa ${iconStr} wl_color_${record.colorIndex}`" t-att-data-id="record.id"/>
|
||||
</div>
|
||||
</t>
|
||||
<span class="d-flex align-items-center fw-bolder" t-esc="records[0].title"/>
|
||||
<span class="fw-bolder" t-esc="records[0].title"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="o_homework_single">
|
||||
<div class="fc-content text-nowrap" t-att-class="`wl_color_${colorIndex}`">
|
||||
<div class="o_homework_single d-flex align-items-center w-100">
|
||||
<div class="o_homeworking_content overflow-visible opacity-100 rounded-pill m-0 px-2 text-nowrap" t-att-class="`wl_color_${colorIndex}`">
|
||||
<t t-if="icon === 'office'">
|
||||
<div class="fa fa-building me-1"/>
|
||||
<div class="fa fa-building me-lg-1"/>
|
||||
</t>
|
||||
<t t-elif="icon === 'home'">
|
||||
<div class="fa fa-home me-1"/>
|
||||
<div class="fa fa-home me-lg-1"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="fa fa-map-marker me-1"/>
|
||||
<div class="fa fa-map-marker me-lg-1"/>
|
||||
</t>
|
||||
<t class="fw-bolder" t-esc="title"/>
|
||||
<span class="d-none d-lg-inline fw-bold" t-esc="title"/>
|
||||
</div>
|
||||
<span class="line" t-att-class="`wl_color_${colorIndex}`"/>
|
||||
<span class="o_worklocation_line w-100" t-att-class="`wl_color_${colorIndex}`"/>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
@@ -38,12 +38,12 @@
|
||||
</t>
|
||||
|
||||
<t t-name="hr.homeworking.CalendarCommonRenderer.buttonWorklocation">
|
||||
<div class="btnWorklocation w-100">
|
||||
<button class='rounded-pill o_month text-nowrap bg-info-light'>
|
||||
<i class="fa fa-map-marker" aria-hidden="true"></i>
|
||||
Add Location
|
||||
<div class="o_worklocation_btn d-flex align-items-center opacity-0 opacity-100-hover">
|
||||
<button class='o_worklocation_text bg-info bg-opacity-25 border-0 rounded-pill px-lg-2 py-0 text-nowrap'>
|
||||
<i class="fa fa-map-marker me-lg-1" aria-hidden="true"></i>
|
||||
<span class="d-none d-lg-inline fw-bold">Add Location</span>
|
||||
</button>
|
||||
<button class="line bg-info-light"/>
|
||||
<button class="o_worklocation_line d-none d-lg-block w-100 bg-info bg-opacity-25 border-0 p-0"/>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
</templates>
|
||||
|
||||
Reference in New Issue
Block a user