[FIX] web: datetime picker gap not being set between picker titles

Currently the datetime picker computes a gap property in css for the rendered
titles, however since the display is not set as flex, the gap is not applied.
This commit adds the flex display so that the gap is applied.

task-3570053

Part-of: odoo/odoo#139736
This commit is contained in:
Leonardo Pavan Rocha
2023-11-04 00:38:21 +00:00
parent 9a17a7aa07
commit a4ef58e6d5
2 changed files with 16 additions and 15 deletions
@@ -6,7 +6,6 @@
--DateTimePicker__Day-template-rows: 6;
// Header
.o_datetime_picker_header .o_header_part {
text-transform: none;
}
@@ -136,33 +136,35 @@
<t t-name="web.DateTimePicker">
<div
class="o_datetime_picker d-flex flex-column gap-1 user-select-none"
class="o_datetime_picker d-flex flex-column gap-2 p-2 p-lg-3 user-select-none"
t-attf-style="--DateTimePicker__Day-template-columns: {{ props.showWeekNumbers ?? !props.range ? 8 : 7 }}"
>
<nav class="o_datetime_picker_header d-flex align-items-center justify-content-between">
<nav class="o_datetime_picker_header btn-group">
<button class="o_previous btn btn-light flex-grow-0"
t-att-class="isLastPrecisionLevel ? 'order-1 btn-sm px-1' : ''" t-on-click="previous">
<i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
</button>
<button
class="o_zoom_out o_datetime_button btn btn-light btn-sm px-1 text-truncate"
t-att-class="isLastPrecisionLevel ? 'pe-none' : ''"
class="o_zoom_out o_datetime_button btn btn-light d-flex align-items-center px-0 text-truncate"
t-att-class="isLastPrecisionLevel ? 'pe-none text-start' : 'justify-content-around'"
t-att-title="!isLastPrecisionLevel and activePrecisionLevel.mainTitle"
t-on-click="zoomOut"
>
<t t-foreach="titles" t-as="title" t-key="title">
<strong
t-attf-class="o_header_part fs-6 {{
props.range ? 'flex-basis-50' : 'flex-basis-100'
t-attf-class="o_header_part fs-5 {{
props.range ? 'flex-basis-50' : 'flex-basis-100',
isLastPrecisionLevel ? 'fs-6' : 'fs-5'
}}"
t-esc="title"
/>
</t>
</button>
<div class="btn-group btn-group-sm">
<button class="o_previous btn btn-light btn-sm flex-grow-0 px-1" t-on-click="previous">
<i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
</button>
<button class="o_next btn btn-light flex-grow-0 px-1" t-on-click="next">
<i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
</button>
</div>
<button class="o_next btn btn-light flex-grow-0"
t-att-class="isLastPrecisionLevel ? 'order-2 btn-sm px-1' : ''"
t-on-click="next">
<i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
</button>
</nav>
<t t-if="state.precision === 'days'">
<t t-call="web.DateTimePicker.Days" />