From f9222c4976a78c2f02264db897bc9826bbda0944 Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Fri, 20 Oct 2023 09:15:44 +0200 Subject: [PATCH] [IMP] calendar,hr_holidays, web: global revamp of the calendar view What's new: - The overall style is softer, the borders lighter - The event's colors are less bright - In month view: The AllDay events and multiple day events are block colors while the events with start/end times on a single day have a colored circle. - A header hosts the date title and navigation buttons (which were in the sidebar) - The sidebar is narrower and collapses We've fixed the height issues giving us double scrollbars in some views. The sidebar, when long, was pushing the content beyond the frame giving us extra scrollbars. This has been fixed with a CSS grid and `overflow-y` on the proper elements. task-3389317 Part-of: odoo/odoo#138670 --- addons/calendar/static/src/scss/calendar.scss | 149 ++-- .../attendee_calendar_common_renderer.xml | 24 +- .../calendar_form/calendar_quick_create.xml | 2 +- .../src/views/widgets/calendar_week_days.xml | 2 +- .../static/src/dashboard/time_off_card.scss | 5 +- .../src/views/calendar/calendar_renderer.scss | 6 +- .../calendar/year/calendar_year_renderer.scss | 14 - .../calendar_common_renderer.js | 19 +- .../calendar_common_renderer.xml | 6 +- .../views/calendar/calendar_controller.scss | 30 +- .../views/calendar/calendar_controller.xml | 57 +- .../calendar/calendar_controller_mobile.scss | 4 +- .../src/views/calendar/calendar_model.js | 1 + .../src/views/calendar/calendar_renderer.scss | 667 ++++++++---------- .../src/views/calendar/calendar_renderer.xml | 2 +- .../calendar/calendar_renderer_mobile.scss | 26 +- .../calendar_year/calendar_year_renderer.js | 3 +- .../calendar_year/calendar_year_renderer.xml | 2 +- .../filter_panel/calendar_filter_panel.scss | 11 +- .../calendar_mobile_filter_panel.xml | 6 +- .../view_components/view_scale_selector.xml | 2 +- .../static/tests/views/calendar/helpers.js | 2 +- 22 files changed, 490 insertions(+), 550 deletions(-) delete mode 100644 addons/hr_holidays/static/src/views/calendar/year/calendar_year_renderer.scss diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index 7db9d79cffe..9599e31aee3 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -1,13 +1,11 @@ .o_cw_popover .o_cw_popover_fields_secondary { max-height: 75vh; + & > li > div { min-width: 0; } } -.o_cw_body { - max-width: 328px; -} .o_cw_body .o_field_copy { max-width: calc(100% - 6rem); @@ -18,95 +16,94 @@ padding-top: 0px !important; } -.o_field_many2manyattendee .o_field_tags { +.o_field_many2manyattendeeexpandable .o_field_tags { flex-direction: column; + span.badge { width: fit-content; } - .o_field_many2many_selection { - flex: 1 0 auto; - } } -.o_cw_popover_link { - &.o_attendee_status_needsAction { - background-color: rgba($o-view-background-color, 0.9) !important; - } +@for $-i from 1 through length($o-colors-complete) { + $-color: nth($o-colors-complete, $-i); + $-color-subtle: mix($o-white, $-color, 85%); - &.o_attendee_status_declined { - text-decoration: line-through; - background-color: rgba($o-view-background-color, 0.9) !important; - } -} + .o_calendar_renderer .fc-event.o_calendar_color_#{$-i - 1} { + &:not(.o_event_dot) { + --o-overlay-opacity: .5; -.o_calendar_renderer { - .fc-event { - &.o_attendee_status_needsAction, - &.o_attendee_status_tentative, - &.o_attendee_status_declined, - &.o_attendee_status_alone { - border-width: 2px !important; - } - - &.o_attendee_status_alone, - &.o_attendee_status_needsAction { - background-color: rgba($o-view-background-color, 0.9) !important; - color: $o-black !important; - .fc-bg { - background-color: rgba($o-view-background-color, 0.9) !important; - } - } - - &.o_attendee_status_declined { - text-decoration: line-through; - background-color: rgba($o-view-background-color, 0.9) !important; - color: $o-black !important; - .fc-bg { - background-color: rgba($o-view-background-color, 0.9) !important; - } - } - } -} - -@for $i from 1 through length($o-colors-complete) { - $color: nth($o-colors-complete, $i); - - .o_cw_popover_link.o_calendar_color_#{$i - 1} { - &.o_attendee_status_tentative { - color: color-contrast($color); - background: repeating-linear-gradient( - 45deg, - $color, - $color 10px, - rgba($color, 0.7) 10px, - rgba($color, 0.7) 20px - ) !important; - } - } - - .o_calendar_renderer { - .fc-event.o_calendar_color_#{$i - 1} { - &.o_attendee_status_needsAction, - &.o_attendee_status_tentative, - &.o_attendee_status_declined, - &.o_attendee_status_alone { - &.o_cw_custom_highlight { - background-color: $color; - } + &.o_attendee_status_active { + --o-bg-opacity: 1; } - &.o_attendee_status_tentative { - color: color-contrast($color) !important; + &.o_attendee_status_tentative, &.o_event_hatched { + --o-bg-opacity: .5; + .fc-bg { background: repeating-linear-gradient( 45deg, - $color, - $color 10px, - rgba(white, 0.4) 10px, - rgba(white, 0.4) 20px + rgba($-color, .3), + rgba($-color, .3) 10px, + rgba($-color, .6) 10px, + rgba($-color, .6) 20px ) !important; } } + + &.o_attendee_status_alone, + &.o_attendee_status_needsAction { + --o-bg-opacity: .5; + } + + &.o_attendee_status_declined { + --o-bg-opacity: 0; + } + } + + &.o_event_dot { + --o-overlay-opacity: .25; + + display: flex; + align-items: center; + gap: map-get($spacers, 1 ); + border: none; + background-color: rgba($-color-subtle, var(--o-bg-opacity)); + + &:before { + content:'\f111'; // fa-circle + display: inline-block; + z-index: 2; + font-family: Fontawesome; + color: $-color; + } + + &.o_attendee_status_needsAction, &.o_event_hatched { + &:before { + content: "\f1db"; // fa-circle-thin + } + } + + &.o_attendee_status_tentative:before { + content: "\f059"; // fa-question-circle + } + + &.o_attendee_status_declined:before { + content: "\f05e"; // fa-ban + } + + &.o_attendee_status_alone { + content: "\f06a"; // fa-exclamation-circle + } + + &:hover { + --o-bg-opacity: 1; + } + } + + &.o_attendee_status_declined, &.o_event_striked { + .fc-content { + text-decoration: line-through; + } } } } diff --git a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml index 1314126479e..951c4b1d493 100644 --- a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml +++ b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml @@ -1,19 +1,21 @@ -
-
- - - - -
- - +
+ +
+ + + + +
- + + + , + - , -
- +
diff --git a/addons/calendar/static/src/views/calendar_form/calendar_quick_create.xml b/addons/calendar/static/src/views/calendar_form/calendar_quick_create.xml index 71bdadf8567..2b35bcb968e 100644 --- a/addons/calendar/static/src/views/calendar_form/calendar_quick_create.xml +++ b/addons/calendar/static/src/views/calendar_form/calendar_quick_create.xml @@ -2,7 +2,7 @@ - + diff --git a/addons/calendar/static/src/views/widgets/calendar_week_days.xml b/addons/calendar/static/src/views/widgets/calendar_week_days.xml index debb1413999..c2dc1ab9348 100644 --- a/addons/calendar/static/src/views/widgets/calendar_week_days.xml +++ b/addons/calendar/static/src/views/widgets/calendar_week_days.xml @@ -3,7 +3,7 @@
-
+
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.scss index babbb4a23bb..fe446e1600b 100644 --- a/addons/hr_holidays/static/src/dashboard/time_off_card.scss +++ b/addons/hr_holidays/static/src/dashboard/time_off_card.scss @@ -4,10 +4,7 @@ justify-content: start; flex: 1; text-align: center; - - &:not(:last-child) { - border-right: 2px solid $border-color; - } + border-right: 1px solid $border-color; &>* { width: fit-content; diff --git a/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss b/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss index 688dca438d9..cc753adc4c6 100644 --- a/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss +++ b/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss @@ -1,7 +1,9 @@ .o_timeoff_calendar { - .o_calendar_renderer { - height: unset; + background-color: $o-view-background-color; + flex-grow: 1; + flex-basis: fit-content; + .o_calendar_renderer { @for $size from 1 through length($o-colors) { .o_calendar_widget { .hr_mandatory_day_top_#{$size - 1}:not(.fc-disabled-day) { diff --git a/addons/hr_holidays/static/src/views/calendar/year/calendar_year_renderer.scss b/addons/hr_holidays/static/src/views/calendar/year/calendar_year_renderer.scss deleted file mode 100644 index a258bf9c5cf..00000000000 --- a/addons/hr_holidays/static/src/views/calendar/year/calendar_year_renderer.scss +++ /dev/null @@ -1,14 +0,0 @@ -.o_timeoff_calendar { - .o_calendar_widget { - .fc-dayGridYear-view { - .fc-week-number { - color: #adb5bd; - font-size: 0.85rem; - cursor: default; - vertical-align: middle; - - line-height: unset; - } - } - } -} diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js index 77ef7f1c906..75f3c860fa1 100644 --- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js +++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js @@ -67,7 +67,7 @@ export class CalendarCommonRenderer extends Component { get options() { return { allDaySlot: this.props.model.hasAllDaySlot, - allDayText: _t("All day"), + allDayText: _t(""), columnHeaderFormat: this.env.isSmall ? SHORT_SCALE_TO_HEADER_FORMAT[this.props.model.scale] : SCALE_TO_HEADER_FORMAT[this.props.model.scale], @@ -217,7 +217,6 @@ export class CalendarCommonRenderer extends Component { onEventRender(info) { const { el, event } = info; el.dataset.eventId = event.id; - el.classList.add("o_event", "py-0"); const record = this.props.model.records[event.id]; if (record) { @@ -252,12 +251,18 @@ export class CalendarCommonRenderer extends Component { if (DateTime.now() >= record.end) { el.classList.add("o_past_event"); } - } - if (!el.querySelector(".fc-bg")) { - const bg = document.createElement("div"); - bg.classList.add("fc-bg"); - el.appendChild(bg); + if (!record.isAllDay && !record.isTimeHidden && record.isMonth) { + el.classList.add("o_event_dot"); + } else if (record.isAllDay) { + el.classList.add("o_event_allday"); + } + + if (!el.classList.contains("fc-bg")) { + const bg = document.createElement("div"); + bg.classList.add("fc-bg"); + el.appendChild(bg); + } } } async onSelect(info) { diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml index de9d2b3674f..98a8f8b0e9e 100644 --- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml +++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml @@ -6,12 +6,12 @@ -
+
- + -
+
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss index 5f750192d3e..83f1d5b78ac 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: #fe3b30; +$o-cw-color-today-accent: #714B67; $o-cw-filter-avatar-size: 20px; // Animations @@ -13,23 +13,31 @@ $o-cw-filter-avatar-size: 20px; } .o_calendar_container { - height: 100%; - display: flex; + grid-template-columns: auto minmax(auto, 210px); + + @include media-breakpoint-up(xl){ + grid-template: auto 1fr / 1fr auto; + grid-template-areas: + "head head" + "cal side"; + } + + .o_calendar_header { + grid-area: head; + } } .o_calendar_sidebar_container { - flex: 0 0 auto; position: relative; - @include o-webclient-padding($top: $o-horizontal-padding/2); + grid-area: side; background-color: $o-view-background-color; - border-right: 1px solid $border-color; - overflow-y: auto; - width: 240px; - @include media-breakpoint-up(xl){ - width: 280px; - } .o_calendar_sidebar { + @include o-webclient-padding($top: $o-horizontal-padding/2); + @include media-breakpoint-up(xl){ + width: 210px; + } + .o_datetime_picker { --DateTimePicker__Cell-size-md: 1.8rem; @include media-breakpoint-up(xl){ diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml index 771f3e41d30..67fef021182 100644 --- a/addons/web/static/src/views/calendar/calendar_controller.xml +++ b/addons/web/static/src/views/calendar/calendar_controller.xml @@ -13,44 +13,45 @@ - - - -
- -
-
+
+
+
-
- - - -
+ class="o_calendar_button_prev btn btn-secondary d-none d-md-block" + title="Previous" + aria-label="Previous" + t-on-click.stop="() => this.setDate('previous')" + > +
+ + + +
October 2023 Week 40
+
+ + +
-
diff --git a/addons/web/static/src/views/calendar/calendar_controller_mobile.scss b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss index 7c767ba35e4..86e52025a27 100644 --- a/addons/web/static/src/views/calendar/calendar_controller_mobile.scss +++ b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss @@ -10,8 +10,6 @@ } .o_calendar_container { - flex-direction: column; - .o_other_calendar_panel { padding: 8px 16px; @@ -38,7 +36,7 @@ } .o_calendar_sidebar_container { - flex-grow: 1; + height: 100%; > .o_calendar_sidebar { width: auto; diff --git a/addons/web/static/src/views/calendar/calendar_model.js b/addons/web/static/src/views/calendar/calendar_model.js index de66f0bb86c..18ff420209d 100644 --- a/addons/web/static/src/views/calendar/calendar_model.js +++ b/addons/web/static/src/views/calendar/calendar_model.js @@ -549,6 +549,7 @@ export class CalendarModel extends Model { isHatched: rawRecord["is_hatched"] || false, isStriked: rawRecord["is_striked"] || false, isTimeHidden: isTimeHidden || !showTime, + isMonth: this.meta.scale === "month", rawRecord, }; } diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss index 0fd2ad7f5bf..7759b2b87f1 100644 --- a/addons/web/static/src/views/calendar/calendar_renderer.scss +++ b/addons/web/static/src/views/calendar/calendar_renderer.scss @@ -1,94 +1,86 @@ .o_calendar_renderer { --o-circle-padding: calc(#{map-get($spacers, 1 )} / 2); - flex: 1 1 auto; - min-width: 0; - height: 100%; - background-color: map-get($grays, "100"); - background: linear-gradient(-45deg, map-get($grays, "100"), $o-view-background-color); + --o-cw-border-color: #{lighten($border-color, 5%)}; + + background-color: $o-view-background-color; + grid-area: cal; + + @include media-breakpoint-down(lg) { + border-top: 1px solid var(--o-cw-border-color); + } .fc-event { - margin: 0 1px; - border-style: solid; - border-width: 0 0 0 3px; - box-sizing: border-box; - overflow: hidden; - background: none; - font-size: 11px; - line-height: 1; + // `web/lib/fullcalendar/core/main.css` gives events with links and draggable events a hand mouse pointer, + // but doesn't take into account that events have popovers. + cursor: pointer; + color: $body-color; + background-color: $o-view-background-color; + transition: right .3s, left .3s; - &:not([href]):not([tabindex]) { + &:hover { color: $body-color; + + &:not(.o_event_dot) .fc-bg { + --o-bg-opacity: .35; + } } - &.fc-dragging.fc-day-grid-event.dayGridMonth .fc-content { - @include text-truncate(); - margin: 4px 4px 3px; + &.fc-mirror, &.fc-dragging { + --o-bg-opacity: .25; + border-color: rgba($o-action, .5); + + .fc-bg { + background-color: rgba($o-action, var(--o-bg-opacity)); + } + } + + &.fc-mirror { + background-color: rgba($o-action, var(--o-bg-opacity)); + } + + &.o_past_event::after{ + content: ''; + @include o-position-absolute(0, 0, 0, 0); + display: block; + z-index: 3; + background-color: rgba($o-view-background-color, var(--o-overlay-opacity)); } .fc-bg { - background-color: mix( - map-get($theme-colors, "primary"), - white - ); // Used for placeholder events only (on creation) - width: 101%; - height: 101%; // Compensate border - opacity: 0.7; - transition: opacity 0.2s; + transition: $transition-base; } .fc-content { - white-space: normal; - margin: 0.25rem; - font-size: 1.1em; - font-weight: 500; - } - - // Try to show one full lien for short event - &.fc-short .fc-content { - margin-top: 1px; - } - - &.o_cw_custom_highlight { - z-index: 10 !important; - - .fc-bg { - opacity: 0.95; - } + margin: 0 map-get($spacers, 1); } } .o_calendar_widget { - height: 100%; - > .fc-view-container { height: 100%; } - // === Adapt calendar table borders === - // ===================================== + .fc-row .fc-widget-header { + padding-top: map-get($spacers, 2); + } - td { - border-color: $border-color; + // === Adapt calendar table borders and general layout === + // ======================================================== + + th, td { + border-color: var(--o-cw-border-color); } .fc-time-grid .fc-slats .fc-minor td { - border-top-color: map-get($grays, "400"); + border-top-color: var(--o-cw-border-color); } - .fc-widget-content { - border-left-color: transparent; + .fc-body > tr > .fc-widget-content { + border-top: 0; } - .fc-widget-header { - border-color: transparent; - border-bottom-color: $border-color; - padding: 3px 0 5px; - - // The left padding must be equal to that of '.fc-axis.fc-time' - // This realigns the headers with their cells - .fc-week-number { - padding-left: 4px; - } + .fc-widget-content, .fc-widget-header { + border-bottom: 0; } hr.fc-widget-header { @@ -97,12 +89,24 @@ background: map-get($grays, "400"); } - .fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton { - padding: 0.5em; - } + .fc-head-container { + position: sticky; + top: 0; + z-index: $zindex-modal; + border-top: 0; + background-color: $o-view-background-color; - .fc-event-container { - color: white; + .fc-week-number { + text-align: center; + font-size: $o-font-size-base-smaller; + + > span { + display: none; + padding: map-get($spacers,1); + border-radius: $border-radius; + background-color: rgba($gray-200, .5); + } + } } .fc-more-popover { @@ -120,44 +124,112 @@ } .o_calendar_disabled { - background-color: $gray-200; + background-color: rgba($gray-200, .5); } // ====== Specific agenda types ====== // ==================================== + // ====== Day only + .fc-timeGridDay-view { + .fc-day-header { + text-align: left; + border: 0; + + > span { + gap: map-get($spacers, 1); + margin-bottom: map-get($spacers, 1); + } + .o_cw_day_number { + padding: map-get($spacers, 1); + } + } + } + + // ====== Week only + + .fc-timeGridWeek-view { + .fc-day-header { + text-align: center; + + > span{ + flex-direction: column; + } + + .o_cw_day_number { + padding: map-get($spacers, 1) map-get($spacers, 2); + + @include media-breakpoint-up(lg) { + font-size: 1.25rem; + } + } + } + + .fc-time-grid { + .fc-event-container { + margin: 1px; + } + } + } + // ====== Both Day and Week agenda .fc-timeGridDay-view, .fc-timeGridWeek-view { - .fc-axis { - padding-right: $o-horizontal-padding; + .fc-head-container { + border-bottom: 1px solid var(--o-cw-border-color); + } + .fc-day-header { + > span { + display: flex; + align-items: center; + margin-left: map-get($spacers, 1); + } + + &.fc-today { + color: $primary; + .o_cw_day_number { + position:relative; + color: $o-view-background-color; + + &:before { + content: ''; + @include o-position-absolute($top: 50%, $left: 50%); + transform: translate(-50%,-50%); + z-index: -1; + width: 100%; + border-radius: $border-radius-pill; + background: $primary; + aspect-ratio: 1; + color: $o-view-background-color; + } + } + } } - .fc-widget-header.fc-today { - border-radius: 25px; - background: $o-brand-odoo; - color: white; - } - - // Reinfornce default border color - tbody td { - border-top-color: map-get($grays, "400"); - } - - // Remove dotted borders (half-hours) .fc-time-grid .fc-slats .fc-minor td { border-top-style: none; } - // Align labels and timelines - .fc-axis.fc-time { - border-top-color: transparent; + // Remove dotted borders (half-hours) - span { - max-width: 45px; - margin-top: -19px; - position: relative; - display: block; + + // Align labels and timelines + .fc-axis{ + font-size: .6rem; + + @include media-breakpoint-up(md) { + font-size: .75rem; + } + + &.fc-time { + border-top-color: transparent; + + span { + max-width: 7ch; + margin-top: -22px; + position: relative; + display: block; + } } } @@ -170,9 +242,7 @@ // Row containing "all day" events div.fc-day-grid { background-color: $o-view-background-color; - box-shadow: 0 6px 12px -6px rgba(black, 0.16); - border-left-color: rgba($o-brand-odoo, 0.3); - border-right-color: rgba($o-brand-odoo, 0.3); + box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.16); + hr.fc-widget-header { padding: 1px 0 0; @@ -184,41 +254,37 @@ } } - // Create a 'preudo-border' for the first row. The actual border - // it's hidden because of border-collapse settings. + // Create a 'pseudo-border' for the first row. The actual border + // is hidden because of border-collapse settings. .fc-slats tr:first-child td.fc-widget-content:last-child { - box-shadow: inset 0 1px 0 map-get($grays, "400"); + box-shadow: inset 0 1px 0 var(--o-cw-border-color); } .fc-day.fc-widget-content.fc-today:not(.o_calendar_disabled) { - border-left-color: rgba($o-brand-odoo, 0.3); - border-right-color: rgba($o-brand-odoo, 0.3); background: $o-view-background-color; } .fc-event { + --o-bg-opacity: .25; + // Prevent events with similar color to visually overlap each other - box-shadow: 0 0 0 1px white; - - &.fc-event:not(.fc-h-event):not(.o_event_oneliner) { - border-width: 3px 0 0; - - &.fc-not-start { - border-width: 0 0 3px; - - &.fc-not-end { - border-width: 0; - } - } + &:not(.o_event_allday):not(.o_homework_event) { + box-shadow: 0 0 0 1px $o-view-background-color; } - &.o_event_oneliner { - padding-top: 0; - padding-bottom: 0; - .fc-content { + &.o_cw_custom_highlight:not(.fc-dragging), &.o_calendar_popover_open:not(.fc-dragging) { + z-index: $zindex-modal !important; + right: 0px !important; + left: 0px !important; + margin-right: 0 !important; + } + + .fc-content { + margin: map-get($spacers, 1); + + @include media-breakpoint-up(md) { margin-top: 0; - font-size: 11px !important; - line-height: 0.9; + margin-bottom: 0; } } } @@ -229,190 +295,124 @@ } } - // ====== Both Month and Year agenda + // ====== Both Week and Month agenda - .fc-dayGridYear-view, .fc-dayGridMonth-view { + .fc-timeGridWeek-view, .fc-dayGridMonth-view { + .fc-day-header > span{ + text-transform: uppercase; + font-size: $o-font-size-base-smaller; + } + } + + // ====== Both Month and Months in Year agenda + + .fc-dayGridMonth-view { .fc-content-skeleton { --o-cw-circle-padding: calc(#{map-get($spacers, 1 )} / 2); --o-cw-color: var(--body-color); - // Realigns the background color and the number + height: 100%; padding-bottom: 0; - .fc-day-number { - position: relative; - padding: var(--o-circle-padding); - color: var(--o-cw-color); + .fc-week-number { + line-height: $line-height-sm; + font-size: $o-font-size-base-smaller; + opacity: .8; - &:before { - content:""; - z-index: -1; - @include o_position-absolute($top: calc(#{var(--o-circle-padding)} * -1), $left: 50%); - transform: translateX(-50%); - display: none; - aspect-ratio: 1/1; - height: 100%; - border-radius: 100%; - background: var(--o-cw-bg, none); - padding: var(--o-circle-padding); + @include media-breakpoint-down(lg) { + > span { + font-size: .5rem; + } + } + + @include media-breakpoint-up(lg) { + padding: map-get($spacers, 1); } } - .fc-today { - --o-cw-color: #{$white}; - --o-cw-bg: #{$o-cw-color-today-accent}; + .fc-day-top { + text-align: center; - .fc-day-number:before { - display: block; + &.fc-other-month { + opacity: 0.8; + + &:not(.fc-today) .fc-day-number { + color: map-get($grays, "500"); + } + } + + .fc-day-number { + position: relative; + float: none !important; + color: var(--o-cw-color); + + + &:before { + content:""; + z-index: -1; + @include o_position-absolute($top: calc(#{var(--o-circle-padding)} * -1), $left: 50%); + transform: translateX(-50%); + display: none; + aspect-ratio: 1/1; + height: 100%; + border-radius: 100%; + background: var(--o-cw-bg, none); + padding: var(--o-circle-padding); + } + } + + .fc-week-number { + // only in Month view + @include o-position-absolute($top: 0, $left: 0); + @include media-breakpoint-down(lg) { + background-color: $gray-100; + } + } + + &.fc-today { + --o-cw-color: #{$white}; + --o-cw-bg: #{$o-cw-color-today-accent}; + padding-top: map-get($spacers, 1)/2; + + .fc-day-number:before { + display: block; + } } } } - } - // ====== Day only - .fc-timeGridDay-view .fc-event { - padding: 10px; - font-size: 14px; - - // Try to avoid showing no title for short event - &.fc-short { - padding-top: 0; - padding-bottom: 0; + td:first-child { + border-left: none; } - .fc-content { - margin-top: 1px !important; - } - } - - // ====== Week only - .fc-timeGridWeek-view { - // Expand tiny events on hover/select - .fc-event:not(.fc-h-event).o_cw_custom_highlight { - transition: margin 0.1s 0.3s, left 0.1s 0.3s, right 0.1s 0.3s; - margin: 0 !important; - right: 1px !important; - left: 1px !important; - } - } - - // ====== Month only - .fc-dayGridMonth-view { - margin-right: $o-horizontal-padding; - border-right: 1px solid $border-color; - - .fc-event { - border-radius: 25px; - } - - .fc-widget-header { - padding: 3px 0; - } - - .fc-week-number { - background: none; - padding: 0.1rem 0.3rem 0.1rem 0 !important; - line-height: 1; - } - .fc-day-top { - text-align: center; - padding-top: 3px; - padding-bottom: 3px; - .fc-day-number { - float: none !important; - } - } - - .fc-day-number { - margin: 5px; - padding: 0.1rem 0.3rem 0.1rem 0; - color: map-get($grays, "900"); - font-weight: 400; - line-height: 1; - float: none !important; - } - - .fc-day-top.fc-other-month { - opacity: 0.8; - - .fc-day-number { - color: map-get($grays, "500"); - } - } - - td:last-child { - border-right-color: transparent; - } - - .fc-bg .fc-today { - border-color: map-get($grays, "300"); - } .fc-bg .fc-today:not(.o_calendar_disabled) { - background: $o-view-background-color; + background: none; } .fc-more-cell { > div, .fc-more { - height: 100%; - display: flex; - align-items: center; - justify-content: center; + text-align: center; } } .fc-event { - margin: 0 3px 2px; + + @include media-breakpoint-up(lg) { + margin: 0 3px 2px; + } .fc-content { display: flex; justify-content: start; flex-direction: row; - margin: 4px 4px 3px; - } - - .fc-time:not(:empty) { - /*rtl:ignore*/ - padding-right: 0.5em; - } - - .o_event_title { - @include text-truncate(); - } - - &.fc-not-start { - border-right-width: 3px; - - .fc-content { - padding-left: 6px; - } - } - - &.fc-not-end { - margin-right: 0; - - .fc-content { - padding-right: 6px; - } + max-height: 1.2em; } } } + // ====== Year only .fc-dayGridYear-view { - border: none; - height: 100%; - padding-right: $o-horizontal-padding; - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - overflow-y: auto; - - @include media-breakpoint-down(md) { - padding-right: 5px; - padding-left: 5px; - } - > table { height: 100%; } @@ -431,27 +431,25 @@ } &:not(.fc-readonly-year-view) { - .fc-day-top:hover > .fc-day-number { - --o-cw-color: #{map-get($grays, "900")}; - --o-cw-bg: #{rgba(#87c0d1, 0.5)}; + .fc-day-top { + &.fc-today { + padding-top: 0; + } - position: relative; - font-weight: bold; - text-align: center; + &:hover > .fc-day-number { + --o-cw-color: #{$o-white}; + --o-cw-bg: #{mix($o-white, $o-action, 50%)}; - &:before { - display: block; + &:before { + display: block; + } } } } > .fc-month-container { - width: 25%; - min-width: 25rem; - box-sizing: border-box; - @include media-breakpoint-down(md) { - width: 50%; + width: 100%; } > .fc-month { @@ -463,34 +461,50 @@ } > .fc-toolbar.fc-header-toolbar { - padding-top: 10px; margin-bottom: 4px; cursor: default; + justify-content: start; h2 { - font-size: 1.2rem; - color: map-get($grays, "600"); + font-size: $font-size-base; } } .fc-widget-header { - padding: 2px 0; + position: static; cursor: default; } .fc-dayGridMonth-view { - margin-right: none; border-right: none; .fc-has-event { background-color: #b4dff5; } + + .fc-week-number { + cursor: default; + opacity: .5; + } + + .fc-day-header { + font-size: $o-font-size-base-smaller; + } } .fc-week.fc-row { display: flex; align-items: center; min-height: 2rem; + + .fc-week-number { + padding: 0; + + > span { + padding: 0; + vertical-align: middle; + } + } } .fc-disabled-day { @@ -499,21 +513,7 @@ .fc-day-top { text-align: center; - padding: 0.4vh; cursor: pointer; - - > .fc-day-number { - display: block; - float: unset; - line-height: unset; - margin: auto; - padding: 0.1rem 0; - font-size: calc(11px + 0.2vh); - } - - &.fc-today > .fc-day-number { - font-weight: bold; - } } } } @@ -550,84 +550,24 @@ } } -.o_calendar_renderer .fc-view { - .fc-bgevent { - opacity: 0.5; - } - .fc-event { - opacity: 1; - - &.o_event_highlight { - opacity: 1; - .fc-content { - font-weight: bold; - } - } - - &.o_cw_custom_highlight { - z-index: 10 !important; - opacity: 1; - right: 1px !important; - left: 1px !important; - margin-right: 0 !important; - } - } -} - -.o_cw_popover { - .card-header { - padding-left: 2px; - } -} - // =============== Generate color classes =============== @for $i from 1 through length($o-colors-complete) { $color: nth($o-colors-complete, $i); + $color-subtle: mix($o-white, $color, 55%); .o_calendar_renderer .fc-view { .o_calendar_color_#{$i - 1} { - border-color: $color; - &.fc-bgevent { - background-color: $color; + &.fc-bgevent, &:not(.o_event_dot) .fc-bg { + background-color: $color-subtle; } - &.fc-event { - color: darken($color, 45%); - background: scale-color($color, $lightness: 50%); - .fc-bg { - background: scale-color($color, $lightness: 50%); + &.fc-event:not(.o_event_dot):not(.fc-dragging) { + color: color-contrast($color-subtle); + border-color: tint-color($color, 50%); + + &.o_cw_custom_highlight, &.o_calendar_popover_open { + box-shadow: 0px 8px 2px -7px rgba(0, 0, 0, 0.5); + z-index: 2; // for the shadow to go over the events below } - - &.o_cw_custom_highlight { - box-shadow: 0 12px 12px -5px rgba($color, 0.3); - color: color-contrast($color); - } - } - - &.o_event_hatched { - background: repeating-linear-gradient( - 45deg, - $color, - $color 10px, - rgba($color, 0.4) 10px, - rgba($color, 0.4) 20px - ) !important; - - .fc-bg { - background: repeating-linear-gradient( - 45deg, - $color, - $color 10px, - rgba($color, 0.5) 10px, - rgba($color, 0.5) 20px - ); - } - } - - &.o_event_striked { - background: linear-gradient( - transparent 0 45%, - $color 45% 55%, - transparent 55% 100%); } } } @@ -650,6 +590,7 @@ } .card-header { + padding-left: 2px; border-color: mix($card-border-color, mix($o-white, $color)); } } diff --git a/addons/web/static/src/views/calendar/calendar_renderer.xml b/addons/web/static/src/views/calendar/calendar_renderer.xml index c7620075c23..5595df7d72d 100644 --- a/addons/web/static/src/views/calendar/calendar_renderer.xml +++ b/addons/web/static/src/views/calendar/calendar_renderer.xml @@ -2,7 +2,7 @@ -
+
tr > .fc-widget-content { + border: 0 + } + + .fc-head-container.fc-widget-header { + border-left: 0; + border-right: 0; } } diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js index 46fb79f3aae..8bb1886898e 100644 --- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js +++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js @@ -56,7 +56,7 @@ export class CalendarYearRenderer extends Component { selectable: this.props.model.canCreate, showNonCurrentDates: false, timeZone: luxon.Settings.defaultZone.name, - titleFormat: { month: "short", year: "numeric" }, + titleFormat: { month: "long", year: "numeric" }, unselectAuto: false, weekNumberCalculation: "ISO", weekNumbers: false, @@ -145,7 +145,6 @@ export class CalendarYearRenderer extends Component { onEventRender(info) { const { el, event } = info; el.dataset.eventId = event.id; - el.classList.add("o_event"); const record = this.props.model.records[event.id]; if (record) { const color = getColor(record.colorIndex); diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml index 8ddc94a727b..eb953f4fe19 100644 --- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml +++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml @@ -2,7 +2,7 @@ -
+
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss index 4d77c0ce7d4..f207021067f 100644 --- a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss +++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss @@ -10,4 +10,13 @@ max-height: 20rem; // fixed value is required to properly trigger transition overflow: auto; } -} \ No newline at end of file + .o_calendar_filter_item { + &.no_filter_color, &.o_cw_filter_color_false, &:not([class*='o_cw_filter_color']) { + input, input:hover { + border-color: $light; + background-color: transparent !important; + filter: invert(1) grayscale(1); + } + } + } +} diff --git a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml index c0b38ca34d9..6d9bb9b5afd 100644 --- a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml +++ b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml @@ -3,22 +3,20 @@
-
- - ⬤ +
- +
diff --git a/addons/web/static/src/views/view_components/view_scale_selector.xml b/addons/web/static/src/views/view_components/view_scale_selector.xml index 7a33ac6ae37..1f896aa9fb8 100644 --- a/addons/web/static/src/views/view_components/view_scale_selector.xml +++ b/addons/web/static/src/views/view_components/view_scale_selector.xml @@ -2,7 +2,7 @@ - + diff --git a/addons/web/static/tests/views/calendar/helpers.js b/addons/web/static/tests/views/calendar/helpers.js index 91d2b73d4f7..62d7e44c1ca 100644 --- a/addons/web/static/tests/views/calendar/helpers.js +++ b/addons/web/static/tests/views/calendar/helpers.js @@ -298,7 +298,7 @@ export function findDateCell(target, date) { } export function findEvent(target, eventId) { - return target.querySelector(`.o_event[data-event-id="${eventId}"]`); + return target.querySelector(`.fc_event[data-event-id="${eventId}"]`); } function findDateCol(target, date) {