pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web,calendar: calendar and popovers design

Browse Source 
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) <jpp@odoo.com>
This commit is contained in:
Bruno Boi
2022-10-20 17:17:09 +02:00
parent c9bec348db
commit d54bff857a
10 changed files with 172 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/calendar/static/src/scss/calendar.scss
+72
View File
@@ -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;
}
}
}
}
}
addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js
+11 -1
View File
@@ -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",
addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss
-33
View File
@@ -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%);
}
}
}
}
}
addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
+1 -1
View File
@@ -26,7 +26,7 @@
</div>
<div class="o_cw_body">
<t t-call="{{ constructor.subTemplates.body }}" />
<div class="card-footer border-top" t-att-class="{ 'o_footer_shrink': isEventEditable and isEventDeletable }">
<div class="card-footer border-top" t-att-class="{ 'o_footer_shrink': !isEventEditable and !isEventDeletable }">
<t t-call="{{ constructor.subTemplates.footer }}" />
</div>
</div>
addons/web/static/src/views/calendar/calendar_renderer.scss
+48 -96
View File
@@ -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%);
}
}
}
addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
+17
View File
@@ -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")) {
addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
+14
View File
@@ -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;
}
}
}
addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
+6 -5
View File
@@ -21,11 +21,11 @@
<i class="fa fa-close small" />
</span>
</div>
<div class="o_cw_body">
<div class="o_cw_body popover-body">
<t t-call="{{ constructor.subTemplates.body }}" />
</div>
<div t-if="props.model.canCreate" class="mt-2">
<t t-call="{{ constructor.subTemplates.footer }}" />
<div t-if="props.model.canCreate" class="mt-2">
<t t-call="{{ constructor.subTemplates.footer }}" />
</div>
</div>
</t>
@@ -56,7 +56,8 @@
<a
href="#"
t-on-click.prevent="() => this.onRecordClick(record)"
t-attf-class="o_cw_popover_link btn-link d-block"
t-attf-style="{{ getRecordStyle(record) }}"
t-attf-class="o_cw_popover_link btn-link d-block {{ getRecordClass(record) }}"
t-att-data-id="record.id"
t-att-data-title="record.title"
>
addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
+1 -1
View File
@@ -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)) {
addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
+2 -2
View File
@@ -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"
);
});