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 

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