diff --git a/addons/crm/static/tests/forecast_view_tests.js b/addons/crm/static/tests/forecast_view_tests.js
index 8432849f64f..a139d69428d 100644
--- a/addons/crm/static/tests/forecast_view_tests.js
+++ b/addons/crm/static/tests/forecast_view_tests.js
@@ -12,6 +12,7 @@ import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
import { registry } from "@web/core/registry";
import { mock } from "web.test_utils";
import { browser } from "@web/core/browser/browser";
+import { fakeCookieService } from "@web/../tests/helpers/mock_services";
const patchDate = mock.patchDate;
@@ -61,6 +62,7 @@ QUnit.module("Views", (hooks) => {
};
setupViewRegistries();
serviceRegistry.add("menu", menuService);
+ serviceRegistry.add("cookie", fakeCookieService);
target = getFixture();
});
diff --git a/addons/project/static/tests/burndown_chart_tests.js b/addons/project/static/tests/burndown_chart_tests.js
index f95d7f59659..171f27424b1 100644
--- a/addons/project/static/tests/burndown_chart_tests.js
+++ b/addons/project/static/tests/burndown_chart_tests.js
@@ -6,7 +6,7 @@ import { setupControlPanelServiceRegistry, toggleGroupByMenu, toggleMenuItem, to
import { dialogService } from "@web/core/dialog/dialog_service";
import { makeView } from "@web/../tests/views/helpers";
import { registry } from "@web/core/registry";
-import { makeFakeNotificationService } from "@web/../tests/helpers/mock_services";
+import { makeFakeNotificationService, fakeCookieService } from "@web/../tests/helpers/mock_services";
import { getFirstElementForXpath } from './project_test_utils';
const serviceRegistry = registry.category("services");
@@ -75,6 +75,7 @@ QUnit.module("Project", {}, () => {
force: true,
});
serviceRegistry.add("dialog", dialogService);
+ serviceRegistry.add("cookie", fakeCookieService);
});
QUnit.module("BurndownChart");
diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js
index 721d1c77a34..3ebc2a26297 100644
--- a/addons/web/static/src/views/fields/ace/ace_field.js
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -4,17 +4,17 @@
import { loadJS } from "@web/core/assets";
import { _lt } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
+import { useService } from '@web/core/utils/hooks';
import { formatText } from "../formatters";
import { standardFieldProps } from "../standard_field_props";
-import { getCookie } from "web.utils.cookies";
const { Component, onWillStart, onWillUpdateProps, useEffect, useRef } = owl;
-const colorSchemeCookie = getCookie("color_scheme");
export class AceField extends Component {
setup() {
this.aceEditor = null;
this.editorRef = useRef("editor");
+ this.cookies = useService('cookie');
onWillStart(async () => {
await loadJS("/web/static/lib/ace/ace.js");
@@ -48,7 +48,7 @@ export class AceField extends Component {
this.aceEditor.setOptions({
maxLines: Infinity,
showPrintMargin: false,
- theme: (colorSchemeCookie && colorSchemeCookie === "dark" ? 'ace/theme/monokai' : ''),
+ theme: (this.cookies.current.color_scheme === "dark" ? 'ace/theme/monokai' : ''),
});
this.aceEditor.$blockScrolling = true;
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
index 7a93f8bae6e..6af376aeaf7 100644
--- a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
@@ -4,12 +4,14 @@ import { loadJS } from "@web/core/assets";
import { registry } from "@web/core/registry";
import { getColor, hexToRGBA } from "@web/views/graph/colors";
import { standardFieldProps } from "../standard_field_props";
+import { useService } from "@web/core/utils/hooks";
const { Component, onWillStart, useEffect, useRef } = owl;
export class JournalDashboardGraphField extends Component {
setup() {
this.chart = null;
+ this.cookies = useService("cookie");
this.canvasRef = useRef("canvas");
this.data = JSON.parse(this.props.value);
@@ -50,8 +52,11 @@ export class JournalDashboardGraphField extends Component {
const labels = this.data[0].values.map(function (pt) {
return pt.x;
});
- const borderColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.1) : getColor(10);
- const backgroundColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.05) : hexToRGBA(getColor(10), 0.2);
+ const color10 = getColor(10, this.cookies.current.color_scheme);
+ const borderColor = this.data[0].is_sample_data ? hexToRGBA(color10, 0.1) : color10;
+ const backgroundColor = this.data[0].is_sample_data
+ ? hexToRGBA(color10, 0.05)
+ : hexToRGBA(color10, 0.2);
return {
type: "line",
data: {
@@ -93,12 +98,18 @@ export class JournalDashboardGraphField extends Component {
const labels = [];
const backgroundColor = [];
- this.data[0].values.forEach(function (pt) {
+ const color13 = getColor(13, this.cookies.current.color_scheme);
+ const color19 = getColor(19, this.cookies.current.color_scheme);
+ this.data[0].values.forEach((pt) => {
data.push(pt.value);
labels.push(pt.label);
- const color =
- pt.type === "past" ? getColor(13) : pt.type === "future" ? getColor(19) : "#ebebeb";
- backgroundColor.push(color);
+ if (pt.type === "past") {
+ backgroundColor.push(color13);
+ } else if (pt.type === "future") {
+ backgroundColor.push(color19);
+ } else {
+ backgroundColor.push("#ebebeb");
+ }
});
return {
type: "bar",
diff --git a/addons/web/static/src/views/graph/colors.js b/addons/web/static/src/views/graph/colors.js
index 5f05014dc37..c0313a30769 100644
--- a/addons/web/static/src/views/graph/colors.js
+++ b/addons/web/static/src/views/graph/colors.js
@@ -1,7 +1,5 @@
/** @odoo-module **/
-import { getCookie } from "web.utils.cookies";
-
const COLORS_BRIGHT = [
"#1f77b4",
"#ff7f0e",
@@ -48,20 +46,25 @@ const COLORS_DARK = [
"#10efed", // Dashboards Secondary
];
-export const COLORS = getCookie("color_scheme") === "dark" ? COLORS_DARK : COLORS_BRIGHT;
+export function getColors(colorScheme) {
+ return colorScheme === "dark" ? COLORS_DARK : COLORS_BRIGHT;
+}
/**
* @param {number} index
+ * @param {string} colorScheme
* @returns {string}
*/
-export function getColor(index) {
- return COLORS[index % COLORS.length];
+export function getColor(index, colorScheme) {
+ const colors = getColors(colorScheme);
+ return colors[index % colors.length];
}
export const DEFAULT_BG = "#d3d3d3";
-export const BORDER_WHITE =
- getCookie("color_scheme") === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)";
+export function getBorderWhite(colorScheme) {
+ return colorScheme === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)";
+}
const RGB_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
index 56375d367ff..ac544df3ad9 100644
--- a/addons/web/static/src/views/graph/graph_renderer.js
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -1,12 +1,13 @@
/** @odoo-module **/
import { _lt } from "@web/core/l10n/translation";
-import { BORDER_WHITE, DEFAULT_BG, getColor, hexToRGBA } from "./colors";
+import { getBorderWhite, DEFAULT_BG, getColor, hexToRGBA } from "./colors";
import { formatFloat } from "@web/views/fields/formatters";
import { SEP } from "./graph_model";
import { sortBy } from "@web/core/utils/arrays";
import { loadJS } from "@web/core/assets";
import { renderToString } from "@web/core/utils/render";
+import { useService } from "@web/core/utils/hooks";
const { Component, onWillUnmount, useEffect, useRef, onWillStart } = owl;
@@ -47,6 +48,7 @@ export class GraphRenderer extends Component {
this.rootRef = useRef("root");
this.canvasRef = useRef("canvas");
this.containerRef = useRef("container");
+ this.cookies = useService("cookie");
this.chart = null;
this.tooltip = null;
@@ -211,7 +213,7 @@ export class GraphRenderer extends Component {
dataset.stack = domains[dataset.originIndex].description || "";
}
// set dataset color
- dataset.backgroundColor = getColor(index);
+ dataset.backgroundColor = getColor(index, this.cookies.current.color_scheme);
}
return data;
@@ -281,7 +283,10 @@ export class GraphRenderer extends Component {
const hidden = metaData.some((data) => data[index] && data[index].hidden);
const fullText = label;
const text = shortenLabel(fullText);
- const fillStyle = label === NO_DATA ? DEFAULT_BG : getColor(index);
+ const fillStyle =
+ label === NO_DATA
+ ? DEFAULT_BG
+ : getColor(index, this.cookies.current.color_scheme);
return { text, fullText, fillStyle, hidden, index };
});
return labels;
@@ -322,20 +327,22 @@ export class GraphRenderer extends Component {
getLineChartData() {
const { groupBy, domains, stacked, cumulated } = this.model.metaData;
const data = this.model.data;
+ const color0 = getColor(0, this.cookies.current.color_scheme);
+ const color1 = getColor(1, this.cookies.current.color_scheme);
for (let index = 0; index < data.datasets.length; ++index) {
const dataset = data.datasets[index];
if (groupBy.length <= 1 && domains.length > 1) {
if (dataset.originIndex === 0) {
dataset.fill = "origin";
- dataset.backgroundColor = hexToRGBA(getColor(0), LINE_FILL_TRANSPARENCY);
- dataset.borderColor = getColor(0);
+ dataset.backgroundColor = hexToRGBA(color0, LINE_FILL_TRANSPARENCY);
+ dataset.borderColor = color0;
} else if (dataset.originIndex === 1) {
- dataset.borderColor = getColor(1);
+ dataset.borderColor = color1;
} else {
- dataset.borderColor = getColor(index);
+ dataset.borderColor = getColor(index, this.cookies.current.color_scheme);
}
} else {
- dataset.borderColor = getColor(index);
+ dataset.borderColor = getColor(index, this.cookies.current.color_scheme);
}
if (data.labels.length === 1) {
// shift of the real value to right. This is done to
@@ -361,7 +368,7 @@ export class GraphRenderer extends Component {
if (data.datasets.length === 1 && data.datasets[0].originIndex === 0) {
const dataset = data.datasets[0];
dataset.fill = "origin";
- dataset.backgroundColor = hexToRGBA(getColor(0), LINE_FILL_TRANSPARENCY);
+ dataset.backgroundColor = hexToRGBA(color0, LINE_FILL_TRANSPARENCY);
}
// center the points in the chart (without that code they are put
// on the left and the graph seems empty)
@@ -379,10 +386,13 @@ export class GraphRenderer extends Component {
const data = this.model.data;
// style/complete data
// give same color to same groups from different origins
- const colors = data.labels.map((_, index) => getColor(index));
+ const colors = data.labels.map((_, index) =>
+ getColor(index, this.cookies.current.color_scheme)
+ );
+ const borderColor = getBorderWhite(this.cookies.current.color_scheme);
for (const dataset of data.datasets) {
dataset.backgroundColor = colors;
- dataset.borderColor = BORDER_WHITE;
+ dataset.borderColor = borderColor;
}
// make sure there is a zone associated with every origin
const representedOriginIndexes = new Set(
@@ -400,7 +410,7 @@ export class GraphRenderer extends Component {
data: fakeData,
trueLabels: fakeTrueLabels,
backgroundColor: [...colors, DEFAULT_BG],
- borderColor: BORDER_WHITE,
+ borderColor,
});
addNoDataToLegend = true;
}
diff --git a/addons/web/static/tests/helpers/mock_services.js b/addons/web/static/tests/helpers/mock_services.js
index 1fa499ecc6c..4719c32b011 100644
--- a/addons/web/static/tests/helpers/mock_services.js
+++ b/addons/web/static/tests/helpers/mock_services.js
@@ -233,6 +233,14 @@ export const fakeTitleService = {
},
};
+export const fakeColorSchemeService = {
+ start() {
+ return {
+ switchToColorScheme() {},
+ };
+ },
+};
+
export function makeFakeNotificationService(mock) {
return {
start() {
@@ -306,6 +314,7 @@ export function makeFakeHTTPService(getResponse, postResponse) {
}
export const mocks = {
+ color_scheme: () => fakeColorSchemeService,
company: () => fakeCompanyService,
command: () => fakeCommandService,
cookie: () => fakeCookieService,
diff --git a/addons/web/static/tests/views/fields/ace_editor_field_tests.js b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
index d028d922f38..f4c57c6a533 100644
--- a/addons/web/static/tests/views/fields/ace_editor_field_tests.js
+++ b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
@@ -1,8 +1,10 @@
/** @odoo-module **/
+import { registry } from "@web/core/registry";
import { getFixture, triggerEvents } from "@web/../tests/helpers/utils";
import { pagerNext } from "@web/../tests/search/helpers";
import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { fakeCookieService } from "@web/../tests/helpers/mock_services";
let serverData;
let target;
@@ -31,6 +33,7 @@ QUnit.module("Fields", (hooks) => {
};
setupViewRegistries();
+ registry.category("services").add("cookie", fakeCookieService);
});
QUnit.module("AceEditorField");
diff --git a/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
index 264fa5c3ebc..e85e7ea2e5e 100644
--- a/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
+++ b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
@@ -1,5 +1,7 @@
/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { fakeCookieService } from "@web/../tests/helpers/mock_services";
import { click, getFixture, nextTick, triggerEvent } from "@web/../tests/helpers/utils";
import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
@@ -83,6 +85,7 @@ QUnit.module("Fields", (hooks) => {
};
setupViewRegistries();
+ registry.category("services").add("cookie", fakeCookieService);
});
async function reloadKanbanView(target) {
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index ae3b847d5d7..acc55e423d8 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -26,9 +26,10 @@ import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
import { browser } from "@web/core/browser/browser";
import { registry } from "@web/core/registry";
-import { BORDER_WHITE, DEFAULT_BG, COLORS, hexToRGBA } from "@web/views/graph/colors";
+import { getBorderWhite, DEFAULT_BG, getColors, hexToRGBA } from "@web/views/graph/colors";
import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
import { patchWithCleanup } from "../helpers/utils";
+import { fakeCookieService } from "@web/../tests/helpers/mock_services";
const serviceRegistry = registry.category("services");
@@ -312,6 +313,7 @@ QUnit.module("Views", (hooks) => {
patchWithCleanup(browser, { setTimeout: (fn) => fn() });
target = getFixture();
+ registry.category("services").add("cookie", fakeCookieService);
});
QUnit.module("GraphView");
@@ -1148,9 +1150,9 @@ QUnit.module("Views", (hooks) => {
"pointBackgroundColor",
];
const datasets = getChart(graph).data.datasets;
-
+ const colors = getColors();
for (let i = 0; i < datasets.length; i++) {
- const expectedColor = COLORS[i];
+ const expectedColor = colors[i];
expectedDatasets.push({
backgroundColor: hexToRGBA(expectedColor, 0.4),
borderColor: expectedColor,
@@ -1610,7 +1612,7 @@ QUnit.module("Views", (hooks) => {
checkLabels(assert, graph, ["Total"]);
checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label", "stack"], {
backgroundColor: ["#1f77b4"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [8],
label: "",
stack: undefined,
@@ -1635,7 +1637,7 @@ QUnit.module("Views", (hooks) => {
checkLabels(assert, graph, ["false", "true"]);
checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data"], {
backgroundColor: ["#1f77b4", "#ff7f0e"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [5, 3],
});
checkLegend(assert, graph, ["false", "true"]);
@@ -1660,7 +1662,7 @@ QUnit.module("Views", (hooks) => {
checkLabels(assert, graph, ["Undefined", "black", "red"]);
checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data"], {
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [8, 10, 13],
});
checkLegend(assert, graph, ["Undefined", "black", "red"]);
@@ -1701,7 +1703,7 @@ QUnit.module("Views", (hooks) => {
checkLabels(assert, graph, ["false / xphone", "false / xpad", "true / xphone"]);
checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label"], {
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [1, 4, 3],
label: "",
});
@@ -1747,13 +1749,13 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: ["#1f77b4"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [6],
label: "True group",
},
{
backgroundColor: ["#1f77b4"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [17],
label: "False group",
},
@@ -1817,13 +1819,13 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [14, 0, 0],
label: "True group",
},
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [12, 5, 2],
label: "False group",
},
@@ -1927,13 +1929,13 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [1, 1, 0, 0],
label: "February 2021",
},
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [1, 1, 1, 1],
label: "January 2021",
},
@@ -2052,13 +2054,13 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [14, 0, 0],
label: "February 2021",
},
{
backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [0, 12, 5],
label: "January 2021",
},
@@ -2115,7 +2117,7 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: [DEFAULT_BG],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [1],
label: null,
},
@@ -2152,13 +2154,13 @@ QUnit.module("Views", (hooks) => {
[
{
backgroundColor: ["#1f77b4"],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [1],
label: "True group",
},
{
backgroundColor: ["#1f77b4", DEFAULT_BG],
- borderColor: BORDER_WHITE,
+ borderColor: getBorderWhite(),
data: [undefined, 1],
label: "False group",
},
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 9e4616885e0..0f6dd5fe5a6 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -24,7 +24,7 @@ import { errorService } from "../../../src/core/errors/error_service";
import { RPCError } from "@web/core/network/rpc_service";
import { registerCleanup } from "../../helpers/cleanup";
import { WarningDialog } from "@web/core/errors/error_dialogs";
-import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
+import { makeFakeUserService, fakeCookieService } from "@web/../tests/helpers/mock_services";
import * as cpHelpers from "@web/../tests/search/helpers";
const { onMounted } = owl;
@@ -1171,6 +1171,7 @@ QUnit.module("ActionManager", (hooks) => {
QUnit.test("restore previous view state when switching back", async function (assert) {
assert.expect(5);
+ registry.category("services").add("cookie", fakeCookieService);
serverData.actions[3].views.unshift([false, "graph"]);
serverData.views["partner,false,graph"] = "";
const webClient = await createWebClient({ serverData });
@@ -1231,6 +1232,7 @@ QUnit.module("ActionManager", (hooks) => {
QUnit.test("view switcher is properly highlighted in graph view", async function (assert) {
assert.expect(4);
+ registry.category("services").add("cookie", fakeCookieService);
serverData.actions[3].views.splice(1, 1, [false, "graph"]);
serverData.views["partner,false,graph"] = "";
const webClient = await createWebClient({ serverData });