From 1fc33a63beb20d134081c93852e62f5fe0ff67d4 Mon Sep 17 00:00:00 2001
From: "Michael Mattiello (mcm)" <mcm@odoo.com>
Date: Fri, 31 Jul 2020 14:33:10 +0000
Subject: [PATCH] [REF] web: rework calendar's style

This commit reworks the mini calendar's style to make it look like
the months in year mode.
It also reworks the style of the calendar's popover in modes day,
week and month to reduce the differences with the year popover.

Task: 2193921
---
 .../js/views/calendar/calendar_renderer.js    |  2 +-
 addons/web/static/src/scss/web_calendar.scss  | 34 +++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index 2df67e8892f..06a7ab7d84a 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -584,7 +584,7 @@ return AbstractRenderer.extend({
                 });
             },
             'showOtherMonths': true,
-            'dayNamesMin' : this.state.fc_options.dayNamesShort,
+            'dayNamesMin' : this.state.fc_options.dayNamesShort.map(x => x[0]),
             'monthNames': this.state.fc_options.monthNamesShort,
             'firstDay': this.state.fc_options.firstDay,
         });
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index b3ab7d7bf6f..8df6206cef1 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -476,18 +476,23 @@ $o-cw-filter-avatar-size: 20px;
         th {
             padding: .7em .2em;
             width: 14%;
+
+            > span {
+                color: #666666;
+            }
         }
 
         td {
             padding: 0;
 
             a, span {
-                padding: .2em .2em .1em;
-                float: right;
-                width: 22px;
+                padding: 5px 0;
                 background: none;
                 text-align: center;
-                color: gray('700');
+                vertical-align: middle;
+                font-size: 1.2rem;
+                color: gray('900');
+                font-weight: 400;
             }
 
             &.ui-datepicker-current-day a {
@@ -497,11 +502,11 @@ $o-cw-filter-avatar-size: 20px;
             }
 
             &.ui-datepicker-today a {
+                margin: auto;
                 border-radius: 100%;
-                padding-top: 0.3em;
+                padding: .1em;
                 width: 25px;
                 background: mix($o-cw-color-today-accent, white, 80%);
-                font-weight: bold;
                 color: white;
             }
 
@@ -517,6 +522,12 @@ $o-cw-filter-avatar-size: 20px;
         .ui-datepicker-header {
             border-radius: 0;
 
+            .ui-datepicker-title {
+                color: gray('600');
+                font-size: 1.2rem;
+                font-weight: normal;
+            }
+
             .ui-icon {
                 background-image: none;
                 text-indent: 0;
@@ -640,6 +651,10 @@ $o-cw-filter-avatar-size: 20px;
         line-height: 1;
     }
 
+    .card-footer {
+        background: none;
+    }
+
     .o_cw_popover_close {
         cursor: pointer;
     }
@@ -656,12 +671,12 @@ $o-cw-filter-avatar-size: 20px;
 
     .list-group-item {
         padding: 0.5rem 1rem;
+        border: none;
     }
 
     .o_cw_popover_fields_secondary {
         max-height: 170px; // Fallback for old browsers
         max-height: 25vh;
-        overflow-y: auto;
 
         &::-webkit-scrollbar {
             background: gray('200');
@@ -691,6 +706,11 @@ $o-cw-filter-avatar-size: 20px;
     $color: nth($o-colors-complete, $i);
 
     .o_calendar_view .fc-view {
+        .fc-bgevent.o_calendar_color_#{$i - 1} {
+            border-color: $color;
+            background-color: $color;
+            opacity: 0.2;
+        }
         .fc-event.o_calendar_color_#{$i - 1} {
             border-color: $color;
             color: darken($color, 35%);