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) {