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

[IMP] web: improve datetime_picker layout

Browse Source 
The `datetime_picker` is smaller to fit into the narrower sidebar
and its header buttons improved.

task-3389317

Part-of: odoo/odoo#138670
This commit is contained in:
Elisabeth Dickinson
2023-10-23 20:07:23 +00:00
committed by Leonardo Pavan Rocha
parent f580147212
commit 94033a6386
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/datetime/datetime_picker.xml
+13 -11
View File
@@ -136,31 +136,33 @@
<t t-name="web.DateTimePicker">
<div
class="o_datetime_picker d-flex flex-column gap-2 p-2 p-lg-3 user-select-none"
class="o_datetime_picker d-flex flex-column gap-1 user-select-none"
t-attf-style="--DateTimePicker__Day-template-columns: {{ props.showWeekNumbers ?? !props.range ? 8 : 7 }}"
>
<nav class="o_datetime_picker_header btn-group">
<button class="o_previous btn btn-light flex-grow-0" t-on-click="previous">
<i class="oi oi-chevron-left" t-att-title="activePrecisionLevel.prevTitle" />
</button>
<nav class="o_datetime_picker_header d-flex align-items-center justify-content-between">
<button
class="o_zoom_out o_datetime_button btn btn-light d-flex align-items-center justify-content-around px-0 text-truncate"
t-att-disabled="isLastPrecisionLevel"
class="o_zoom_out o_datetime_button btn btn-light btn-sm px-1 text-truncate"
t-att-class="isLastPrecisionLevel ? 'pe-none' : ''"
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-5 {{
t-attf-class="o_header_part fs-6 {{
props.range ? 'flex-basis-50' : 'flex-basis-100'
}}"
t-esc="title"
/>
</t>
</button>
<button class="o_next btn btn-light flex-grow-0" t-on-click="next">
<i class="oi oi-chevron-right" t-att-title="activePrecisionLevel.nextTitle" />
</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>
</nav>
<t t-if="state.precision === 'days'">
<t t-call="web.DateTimePicker.Days" />
addons/web/static/src/views/calendar/calendar_controller.scss
+5 -1
View File
@@ -44,7 +44,7 @@ $o-cw-filter-avatar-size: 20px;
.o_datetime_picker {
--DateTimePicker__Cell-size-md: 1.8rem;
@include media-breakpoint-up(xl){
--DateTimePicker__Cell-size-md: 2.2rem;
--DateTimePicker__Cell-size-md: 1.5rem;
}
padding-right: 0 !important;
padding-left: 0 !important;
@@ -53,6 +53,10 @@ $o-cw-filter-avatar-size: 20px;
--background-color: transparent;
border: none !important;
}
.o_cell_md {
font-size: .75rem;
}
}
// sync buttons are only displayed on calendar.event views