From 94033a6386b56bb52cccd29ebc12ccc387269210 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 11 Oct 2023 10:58:06 +0200
Subject: [PATCH] [IMP] web: improve datetime_picker layout

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

task-3389317

Part-of: odoo/odoo#138670
---
 .../src/core/datetime/datetime_picker.xml     | 24 ++++++++++---------
 .../views/calendar/calendar_controller.scss   |  6 ++++-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/core/datetime/datetime_picker.xml b/addons/web/static/src/core/datetime/datetime_picker.xml
index f2ecf93f4b1..8f9496d7b03 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker.xml
@@ -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" />
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index ef6feefb2c4..14841c94ab5 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -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