From d54bff857aba6350bcbe34fc4ddebb82c9e00887 Mon Sep 17 00:00:00 2001 From: Bruno Boi Date: Thu, 20 Oct 2022 08:45:44 +0000 Subject: [PATCH] [FIX] web,calendar: calendar and popovers design Fix the hatching and striking effects for events by moving some scss rules to the right place: - o_event_hatched - o_event_striked Various fixes for the calendar popovers to display properly, such as: - year scale popovers - proper popover body padding and font-size - style that depends on attendee status - other scales popovers - inverse the condition when the popover footer must shrink closes odoo/odoo#103661 X-original-commit: 917d8e4123517c73d8bd6a4bd83becf1b0ee1090 Signed-off-by: Jorge Pinna Puissant (jpp) --- addons/calendar/static/src/scss/calendar.scss | 72 +++++++++ .../year/attendee_calendar_year_popover.js | 12 +- .../src/views/calendar/calendar_renderer.scss | 33 ---- .../calendar_common_popover.xml | 2 +- .../src/views/calendar/calendar_renderer.scss | 144 ++++++------------ .../calendar_year/calendar_year_popover.js | 17 +++ .../calendar_year/calendar_year_popover.scss | 14 ++ .../calendar_year/calendar_year_popover.xml | 11 +- .../calendar_year/calendar_year_renderer.js | 2 +- .../calendar/calendar_year_popover_tests.js | 4 +- 10 files changed, 172 insertions(+), 139 deletions(-) create mode 100644 addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index ea5ff414863..147bf05240e 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -92,3 +92,75 @@ .o_attendee_border_tentative { border-color: map-get($theme-colors, 'light'); } + +@for $i from 1 through length($o-filter_colors) { + $color: nth($o-filter_colors, $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_attendee_status_needsAction { + 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; + } + } + + .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 { + border-width: 2px 2px 2px !important; + + &.o_cw_custom_highlight { + background-color: $color; + } + } + + &.o_attendee_status_tentative { + color: color-contrast($color) !important; + .fc-bg { + background: repeating-linear-gradient( + 45deg, + $color, + $color 10px, + rgba(white, 0.4) 10px, + rgba(white, 0.4) 20px + ) !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; + } + } + } + } +} diff --git a/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js b/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js index 66f4c9383ca..ea37536000a 100644 --- a/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js +++ b/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js @@ -2,7 +2,17 @@ import { CalendarYearPopover } from "@web/views/calendar/calendar_year/calendar_year_popover"; -export class AttendeeCalendarYearPopover extends CalendarYearPopover {} +export class AttendeeCalendarYearPopover extends CalendarYearPopover { + getRecordClass(record) { + const classes = [super.getRecordClass(record)]; + if (record.isAlone) { + classes.push("o_attendee_status_alone"); + } else { + classes.push(`o_attendee_status_${record.attendeeStatus}`); + } + return classes.join(" "); + } +} AttendeeCalendarYearPopover.subTemplates = { ...CalendarYearPopover.subTemplates, body: "calendar.AttendeeCalendarYearPopover.body", 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 ef5d7a561dc..e12433e3b07 100644 --- a/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss +++ b/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss @@ -13,38 +13,5 @@ .fc-bgevent { border-radius: 25px; } - - @for $i from 1 through length($o-filter_colors) { - $color: nth($o-filter_colors, $i); - - .o_calendar_color_#{$i - 1} { - &.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%); - } - } - } } } diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml index 1359769f544..521422fce03 100644 --- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml +++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml @@ -26,7 +26,7 @@
-
+
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss index fa553601524..80bfdd79f92 100644 --- a/addons/web/static/src/views/calendar/calendar_renderer.scss +++ b/addons/web/static/src/views/calendar/calendar_renderer.scss @@ -1,3 +1,11 @@ +// Generated with http://phrogz.net/css/distinct-colors.html +// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar +$o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814968, #eb7e7f, #2c8397, #475577, #d6145f, + #30c381, #9365b8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85, #007ab3, #6900cc, #ff0048, #c2cc00, + #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea, #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf, + #bf001d, #bf6300, #8cff00, #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff, + #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default; + .o_calendar_renderer { flex: 1 1 auto; min-width: 0; @@ -372,39 +380,6 @@ padding-left: 5px; } - @for $i from 1 through length($o-colors-complete) { - $color: nth($o-colors-complete, $i); - - .o_cw_popover_link.o_calendar_color_#{$i - 1} { - border: solid 2px; - padding-left: 5px; - border-color: $color; - margin-top: 2px; - background: $color; - color: black; - - &.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_attendee_status_needsAction { - 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; - } - } - } - > table { height: 100%; } @@ -535,91 +510,68 @@ } } -// Generated with http://phrogz.net/css/distinct-colors.html -// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar -$o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814968, #eb7e7f, #2c8397, #475577, #d6145f, - #30c381, #9365b8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85, #007ab3, #6900cc, #ff0048, #c2cc00, - #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea, #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf, - #bf001d, #bf6300, #8cff00, #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff, - #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default; - // =============== Generate color classes =============== @for $i from 1 through length($o-filter_colors) { $color: nth($o-filter_colors, $i); .o_calendar_renderer .fc-view { - .fc-bgevent.o_calendar_color_#{$i - 1} { + .o_calendar_color_#{$i - 1} { border-color: $color; - background-color: $color; - opacity: 0.5; - } - .fc-event.o_calendar_color_#{$i - 1} { - border-color: $color; - color: darken($color, 45%); - opacity: 1; - background: scale-color($color, $lightness: 50%); - .fc-bg { + &.fc-bgevent { + background-color: $color; + opacity: 0.5; + } + &.fc-event { + color: darken($color, 45%); + opacity: 1; background: scale-color($color, $lightness: 50%); - } - - &.o_event_highlight { - opacity: 1; - - .fc-content { - font-weight: bold; + .fc-bg { + background: scale-color($color, $lightness: 50%); } - } - &.o_cw_custom_highlight { - box-shadow: 0 12px 12px -5px rgba($color, 0.3); - color: color-contrast($color); - z-index: 10 !important; - opacity: 1; - right: 1px !important; - left: 1px !important; - margin-right: 0 !important; - } - - &.o_attendee_status_needsAction, - &.o_attendee_status_tentative, - &.o_attendee_status_declined, - &.o_attendee_status_alone { - border-width: 2px 2px 2px !important; + &.o_event_highlight { + opacity: 1; + .fc-content { + font-weight: bold; + } + } &.o_cw_custom_highlight { - background-color: $color; + box-shadow: 0 12px 12px -5px rgba($color, 0.3); + color: color-contrast($color); + z-index: 10 !important; + opacity: 1; + right: 1px !important; + left: 1px !important; + margin-right: 0 !important; } } - &.o_attendee_status_tentative { - 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(white, 0.4) 10px, - rgba(white, 0.4) 20px - ) !important; + rgba($color, 0.5) 10px, + rgba($color, 0.5) 20px + ); } } - &.o_attendee_status_alone, - &.o_attendee_status_needsAction { - background-color: rgba($o-view-background-color, 0.9) !important; - color: $o-black; - .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; - .fc-bg { - background-color: rgba($o-view-background-color, 0.9) !important; - } + &.o_event_striked { + background: linear-gradient( + transparent 0 45%, + $color 45% 55%, + transparent 55% 100%); } } } diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js index 82318121f3f..3f2aeea764e 100644 --- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js +++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js @@ -2,6 +2,7 @@ import { Dialog } from "@web/core/dialog/dialog"; import { formatDate } from "@web/core/l10n/dates"; +import { getColor } from "../colors"; const { Component } = owl; @@ -42,6 +43,22 @@ export class CalendarYearPopover extends Component { } return Object.values(recordGroups); } + getRecordClass(record) { + const { colorIndex } = record; + const color = getColor(colorIndex); + if (color && typeof color === "number") { + return `o_calendar_color_${color}`; + } + return ""; + } + getRecordStyle(record) { + const { colorIndex } = record; + const color = getColor(colorIndex); + if (color && typeof color === "string") { + return `background-color: ${color};`; + } + return ""; + } getSortedRecordGroups(recordGroups) { return recordGroups.sort((a, b) => { if (a.start.hasSame(a.end, "days")) { diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss new file mode 100644 index 00000000000..fc9df1c63e9 --- /dev/null +++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss @@ -0,0 +1,14 @@ +.o_cw_popover_link { + border: solid 2px; + padding-left: 5px; + margin-top: 2px; + color: black; + @for $i from 1 through length($o-filter_colors) { + $color: nth($o-filter_colors, $i); + + &.o_calendar_color_#{$i - 1} { + border-color: $color; + background: $color; + } + } +} diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml index 30ac250c92b..996103ca4f4 100644 --- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml +++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml @@ -21,11 +21,11 @@
-
+
-
-
- +
+ +
@@ -56,7 +56,8 @@ 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 24f53de9aaf..0f566cfdc95 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 @@ -104,7 +104,7 @@ export class CalendarYearRenderer extends Component { }; } openPopover(target, date, records) { - this.popover.open(target, this.getPopoverProps(date, records)); + this.popover.open(target, this.getPopoverProps(date, records), "o_cw_popover"); } unselect() { for (const fc of Object.values(this.fcs)) { diff --git a/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js index 4ffb9288104..fbdcc90c666 100644 --- a/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js +++ b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js @@ -90,7 +90,7 @@ QUnit.module("CalendarView - YearPopover", ({ beforeEach }) => { QUnit.test("group records", async (assert) => { await start({}); - assert.containsN(target, ".o_cw_body > div", 4); + assert.containsN(target, ".o_cw_body > div", 5); assert.containsN(target, ".o_cw_body > a", 5); const sectionTitles = target.querySelectorAll(".o_cw_body > div"); @@ -101,7 +101,7 @@ QUnit.module("CalendarView - YearPopover", ({ beforeEach }) => { assert.strictEqual( target.querySelector(".o_cw_body").textContent.trim(), - "July 16, 2021R114:00 R2July 13-17, 2021R4July 15-17, 2021R3July 15-19, 2021R5" + "July 16, 2021R114:00 R2July 13-17, 2021R4July 15-17, 2021R3July 15-19, 2021R5 Create" ); });