From 23504d3d858a120e8aec730822326333ece71444 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 10 Mar 2023 14:26:34 +0000
Subject: [PATCH] [IMP] web: searchbar, mini-calendar & CommandPalette design

Ensure square-ish table cell in mini-calendar.

Better breadcrumbs actions alignment in ControlPanel.

task-2818586

Part-of: odoo/odoo#116641
---
 .../static/src/components/lunch_dashboard.xml |  2 +-
 .../src/core/commands/command_palette.xml     |  2 +-
 .../static/src/scss/bootstrap_overridden.scss |  4 +-
 .../static/src/scss/primary_variables.scss    | 11 ++--
 addons/web/static/src/search/layout.xml       |  2 +-
 .../src/search/search_panel/search_panel.xml  |  2 +-
 .../views/calendar/calendar_controller.scss   | 51 +++++++++++--------
 .../form_status_indicator.xml                 | 11 ++--
 8 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/addons/lunch/static/src/components/lunch_dashboard.xml b/addons/lunch/static/src/components/lunch_dashboard.xml
index 59a8c02552b..92e1bd16822 100644
--- a/addons/lunch/static/src/components/lunch_dashboard.xml
+++ b/addons/lunch/static/src/components/lunch_dashboard.xml
@@ -72,7 +72,7 @@
     <t t-name="lunch.LunchDashboardOrder" owl="1">
         <LunchAlerts alerts="state.infos.alerts"/>
 
-        <div class="o_lunch_banner container-fluid p-4 border-bottom bg-view">
+        <div class="o_lunch_banner container-fluid p-4 bg-view">
             <div class="row h-100">
                 <div class="col-12 col-md-4">
                     <div class="row h-100 align-content-center">
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 4b9f69e0833..8838bd23dbf 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -46,7 +46,7 @@
           </t>
         </div>
 
-        <div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top bg-100 text-muted">
+        <div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top rounded-bottom bg-100 text-muted">
           <t t-component="state.FooterComponent" switchNamespace="(namespace) => this.debounceSearch(namespace.concat(this.state.searchValue))"/>
         </div>
       </div>
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 1af2f030e9c..83a06050a3c 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -98,8 +98,8 @@ $border-radius-sm: $o-border-radius-sm !default;
 $border-radius-lg: $o-border-radius-lg !default;
 $border-color: $o-gray-300 !default;
 
-$component-active-color: $o-brand-primary !default;
-$component-active-bg: $gray-200 !default;
+$component-active-color: $o-component-active-color !default;
+$component-active-bg: $o-component-active-bg !default;
 
 $caret-width: 4px !default;
 
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index d52f09310fc..f42537ce803 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -104,7 +104,10 @@ $o-main-favorite-color: #f3cc00 !default;
 $o-main-code-color: #d2317b !default;
 
 // Components colors
-// TODO: move variables in components
+$o-component-active-color:  $o-gray-900 !default;
+$o-component-active-bg: mix($o-action, $o-gray-100, 20%) !default;
+$o-component-active-border: $o-action !default;
+
 $o-view-background-color: white !default;
 $o-shadow-color: #303030 !default;
 
@@ -247,9 +250,9 @@ $o-btns-bs-override: map-merge((
         hover-border: $o-gray-400,
         hover-color: $o-gray-900,
 
-        active-background: mix($o-action, $o-gray-100, 20%),
-        active-border:  $o-action,
-        active-color: $o-gray-900,
+        active-background: $o-component-active-bg,
+        active-border:  $o-component-active-border,
+        active-color: $o-component-active-color,
     ),
     "light": (
         background: $o-white,
diff --git a/addons/web/static/src/search/layout.xml b/addons/web/static/src/search/layout.xml
index 703cc31fa4e..0fb06748c83 100644
--- a/addons/web/static/src/search/layout.xml
+++ b/addons/web/static/src/search/layout.xml
@@ -7,7 +7,7 @@
         </t>
         <t t-component="components.ControlPanel" slots="controlPanelSlots" t-if="display.controlPanel" display="display.controlPanel"/>
         <t t-component="components.Banner" t-if="display.banner"/>
-        <div t-ref="content" class="o_content" t-attf-class="{{props.className}}" t-att-class="{ o_component_with_search_panel: display.searchPanel }">
+        <div t-ref="content" class="o_content" t-attf-class="{{props.className}}" t-att-class="{ 'o_component_with_search_panel bg-200': display.searchPanel }">
             <t t-component="components.SearchPanel" t-if="display.searchPanel"/>
             <t t-slot="default" contentRef="contentRef" />
         </div>
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index efb17b4a4f7..d4719fcbc3e 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -11,7 +11,7 @@
 </t>
 
 <t t-name="web.SearchPanelContent" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
         <div t-if="!sections or sections.length === 0" class="o_search_panel_empty_state me-3">
             <p class="mt-3 small text-muted">No quick filter available.</p>
             <p class="small text-muted">Update the filters in the search bar to display more records.</p>
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index be2d006784e..9ad08edb9ce 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -1,5 +1,5 @@
 // Variables
-$o-cw-color-today-accent: #fc3d39;
+$o-cw-color-today-accent: #fe3b30;
 $o-cw-filter-avatar-size: 20px;
 
 // Animations
@@ -66,32 +66,39 @@ $o-cw-filter-avatar-size: 20px;
 
             a,
             span {
-                padding: 5px 0;
+                display: flex;
+                width: 100%;
+                align-items: center;
+                justify-content: center;
+                aspect-ratio: 4/3;
                 background: none;
-                text-align: center;
-                vertical-align: middle;
-                font-size: 1.2rem;
-                color: map-get($grays, "900");
-                font-weight: 400;
+                color: $headings-color;
+                line-height: 1;
             }
 
-            &.ui-datepicker-current-day a {
-                background: $info;
-                color: color-contrast($info);
-                font-weight: bold;
+            &.ui-datepicker-today, &.ui-datepicker-current-day {
+                &, a {
+                    position: relative;
+                    color: var(--ui-datepicker-badge-color, #{$o-component-active-color});
+                }
+
+                &:before {
+                    @include o-position-absolute(0, $left: 50%);
+                    display: block;
+                    height: 100%;
+                    aspect-ratio: 1;
+                    border-radius: 100%;
+                    border: var(--ui-datepicker-badge-border, 1px solid #{$o-component-active-border});
+                    background: var(--ui-datepicker-badge-background, #{$o-component-active-bg});
+                    transform: translateX(-50%);
+                    content: "";
+                }
             }
 
-            &.ui-datepicker-today a {
-                margin: auto;
-                border-radius: 100%;
-                padding: 0.1em;
-                width: 25px;
-                background: mix($o-cw-color-today-accent, white, 80%);
-                color: white;
-            }
-
-            &.ui-datepicker-current-day.ui-datepicker-today a {
-                background: $o-cw-color-today-accent;
+            &.ui-datepicker-today {
+                --ui-datepicker-badge-border: 1px solid #{$o-cw-color-today-accent};
+                --ui-datepicker-badge-background: #{$o-cw-color-today-accent};
+                --ui-datepicker-badge-color: #{color-contrast($o-cw-color-today-accent)};
             }
         }
 
diff --git a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
index aeebcfb3f8d..15c225dd4b1 100644
--- a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
+++ b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FormStatusIndicator" owl="1">
-        <div class="o_form_status_indicator d-md-flex ms-md-1" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isNew }">
+        <div class="o_form_status_indicator d-md-flex align-items-center" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isNew }">
             <div class="o_form_status_indicator_buttons d-flex" t-att-class="{ invisible: !(props.model.root.isNew or displayButtons) }">
                 <button
                     type="button"
-                    class="o_form_button_save btn btn-light py-0"
-                    t-att-disabled="props.isDisabled"
+                    class="o_form_button_save btn btn-light px-1 lh-sm"
+                    t-att-disabled="props.isDisabled || !props.model.root.isNew and indicatorMode === 'invalid'"
                     data-hotkey="s"
                     t-on-click.stop="save"
                     data-tooltip="Save manually"
@@ -16,7 +16,7 @@
                 </button>
                 <button
                     type="button"
-                    class="o_form_button_cancel btn btn-light py-0"
+                    class="o_form_button_cancel btn btn-light px-1 lh-sm"
                     t-att-disabled="props.isDisabled"
                     data-hotkey="j"
                     t-on-click.stop="discard"
@@ -28,9 +28,8 @@
             <span
                 t-if="!props.model.root.isNew and indicatorMode === 'invalid'"
                 class="text-danger small ms-2"
-                data-tooltip="Correct issues to save, or discard changes">
+                data-tooltip="Unable to save. Correct the issue or discard changes">
                 <i class="fa fa-warning" />
-                Unable to save
             </span>
         </div>
     </t>