trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: fix color-scheme for charts and flow diagram

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-05-06 16:25:29 +02:00
parent c864f4e312
commit 20c1f15dc0
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/elements/charts/Chart.ts
View file

@ -5,6 +5,7 @@ import { DoughnutController, LineController, BarController } from "chart.js";
import { ArcElement, BarElement } from "chart.js";
import { TimeScale, LinearScale } from "chart.js";
import "chartjs-adapter-moment";
import { FONT_COLOUR_DARK_MODE, FONT_COLOUR_LIGHT_MODE } from "../../pages/flows/FlowDiagram";
Chart.register(Legend, Tooltip);
Chart.register(LineController, BarController, DoughnutController);
@ -21,6 +22,8 @@ export abstract class AKChart<T> extends LitElement {
@property()
centerText?: string;
fontColour = FONT_COLOUR_LIGHT_MODE;
static get styles(): CSSResult[] {
return [css`
.container {
@ -40,6 +43,17 @@ export abstract class AKChart<T> extends LitElement {
this.chart.resize();
}
});
const matcher = window.matchMedia("(prefers-color-scheme: light)");
const handler = (ev?: MediaQueryListEvent) => {
if (ev?.matches || matcher.matches) {
this.fontColour = FONT_COLOUR_LIGHT_MODE;
} else {
this.fontColour = FONT_COLOUR_DARK_MODE;
}
this.chart?.update();
};
matcher.addEventListener("change", handler);
handler();
}
getChartType(): string {
@ -59,6 +73,7 @@ export abstract class AKChart<T> extends LitElement {
const fontSize = (height / 114).toFixed(2);
chart.ctx.font = fontSize + "em RedHatText, Overpass, overpass, helvetica, arial, sans-serif";
chart.ctx.textBaseline = "middle";
chart.ctx.fillStyle = this.fontColour;
const textX = Math.round((width - chart.ctx.measureText(this.centerText).width) / 2);
const textY = height / 2;

10
web/src/pages/flows/FlowDiagram.ts
View file

@ -44,15 +44,19 @@ export class FlowDiagram extends LitElement {
if (!this._flowSlug) return;
this.flowSlug = this._flowSlug;
});
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (ev) => {
if (ev.matches) {
const matcher = window.matchMedia("(prefers-color-scheme: light)");
const handler = (ev?: MediaQueryListEvent) => {
if (ev?.matches || matcher.matches) {
this.fontColour = FONT_COLOUR_LIGHT_MODE;
this.fill = FILL_LIGHT_MODE;
} else {
this.fontColour = FONT_COLOUR_DARK_MODE;
this.fill = FILL_DARK_MODE;
}
});
this.requestUpdate();
};
matcher.addEventListener("change", handler);
handler();
}
render(): TemplateResult {