From f25f3daf7f412d671c906e1611cd4546ab282ead Mon Sep 17 00:00:00 2001 From: David Meincke Date: Tue, 22 Mar 2022 22:14:38 +0100 Subject: [PATCH] added dark mode and margin changes --- codeeditor-app/app.html | 2 +- codeeditor-app/app.less | 22 ++++++++++++- .../elements/code-editor/code-editor.ts | 4 ++- .../code-editor/injects/editor-init.txt | 10 +++--- .../notification-bubble.less | 31 +++++++++++++++++++ outputframe-app/app.less | 12 +++++-- .../elements/render-canvas/render-canvas.less | 8 +++++ .../elements/render-canvas/render-canvas.ts | 18 ++++++++--- 8 files changed, 92 insertions(+), 15 deletions(-) diff --git a/codeeditor-app/app.html b/codeeditor-app/app.html index 615f549..7fee2d9 100644 --- a/codeeditor-app/app.html +++ b/codeeditor-app/app.html @@ -6,6 +6,6 @@ -
methods: rect, box, center, width, height
+
methods: rect, box, center, width, height, rand
\ No newline at end of file diff --git a/codeeditor-app/app.less b/codeeditor-app/app.less index 7374e60..48ca5aa 100644 --- a/codeeditor-app/app.less +++ b/codeeditor-app/app.less @@ -60,7 +60,27 @@ body { } .section.bottom { + padding: 10px; border-top: 1px solid #c2c2c2; - font-size: 16px; + font-size: 14px; text-align: right; +} + +@media (prefers-color-scheme: dark) { + body { + background: #1e1e1e; + } + + .section { + color: white; + background: #2e2e2e; + } + + .section.top { + border-color: #292929; + } + + .section.bottom { + border-color: #292929; + } } \ No newline at end of file diff --git a/codeeditor-app/elements/code-editor/code-editor.ts b/codeeditor-app/elements/code-editor/code-editor.ts index e872862..6da86e9 100644 --- a/codeeditor-app/elements/code-editor/code-editor.ts +++ b/codeeditor-app/elements/code-editor/code-editor.ts @@ -13,6 +13,7 @@ export class CodeEditor extends BaseElement { this.initWorkers(); + const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); var editor = monaco.editor.create(this, { value: this.input, @@ -22,7 +23,8 @@ export class CodeEditor extends BaseElement { minimap: { enabled: false }, - autoIndent: "full" + autoIndent: "full", + theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-white' }); monaco.languages.registerCompletionItemProvider("javascript", { diff --git a/codeeditor-app/elements/code-editor/injects/editor-init.txt b/codeeditor-app/elements/code-editor/injects/editor-init.txt index c1a6dca..2fd0dfe 100644 --- a/codeeditor-app/elements/code-editor/injects/editor-init.txt +++ b/codeeditor-app/elements/code-editor/injects/editor-init.txt @@ -1,20 +1,20 @@ -var myDiv = document.createElement("div"); +const myDiv = document.createElement("div"); myDiv.innerText = "hello moto"; document.body.appendChild(myDiv); -var i = 0; +let i = 0; while (i < 10) { console.log("hello " + i); i++; } -var obj = { hello: true, moto: "enabled" }; +const obj = { hello: true, moto: "enabled" }; console.log(obj); rect(10, 10, 100, 100); -rect(rand(10, 30), rand(10, 30), 100, 100); -rect(30, 30, 100, 100); \ No newline at end of file +rect(rand(20, 70), rand(20, 70), 100, 100); +rect(80, 80, 100, 100); \ No newline at end of file diff --git a/codeeditor-app/elements/notification-bubbles/notification-bubble.less b/codeeditor-app/elements/notification-bubbles/notification-bubble.less index 8579645..72c818a 100644 --- a/codeeditor-app/elements/notification-bubbles/notification-bubble.less +++ b/codeeditor-app/elements/notification-bubbles/notification-bubble.less @@ -35,4 +35,35 @@ notification-bubble.syntax-error { background-color: #d15353; font-size: 22px; padding: 30px; +} + +@media (prefers-color-scheme: dark) { + notification-bubble { + color: white; + } + + notification-bubble.log { + background-color: #242424; + border-color: #202020; + } + + notification-bubble.info { + background-color: #77772e; + border-color: #66662f; + } + + notification-bubble.warn { + background-color: #928800; + border-color: #857c00; + } + + notification-bubble.error { + background-color: #920000; + border-color: #7c0000; + } + + notification-bubble.syntax-error { + background-color: #470000; + background-color: #2b0000; + } } \ No newline at end of file diff --git a/outputframe-app/app.less b/outputframe-app/app.less index 56693a1..cd37aad 100644 --- a/outputframe-app/app.less +++ b/outputframe-app/app.less @@ -11,6 +11,14 @@ html, body { body { font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; - - background-color: #e3e3e3; + margin: 10px; + background-color: #f0f0f0; +} + + +@media (prefers-color-scheme: dark) { + body { + background-color: #272727; + color: white; + } } \ No newline at end of file diff --git a/outputframe-app/elements/render-canvas/render-canvas.less b/outputframe-app/elements/render-canvas/render-canvas.less index 82ea2c5..5a2f517 100644 --- a/outputframe-app/elements/render-canvas/render-canvas.less +++ b/outputframe-app/elements/render-canvas/render-canvas.less @@ -17,4 +17,12 @@ render-canvas canvas { transform: translate(-50%, -50%); border: 1px solid #c2c2c2; background-color: white; +} + + +@media (prefers-color-scheme: dark) { + render-canvas canvas { + background-color: #2c2c2c; + border-color: #3a3a3a; + } } \ No newline at end of file diff --git a/outputframe-app/elements/render-canvas/render-canvas.ts b/outputframe-app/elements/render-canvas/render-canvas.ts index f066787..d41a646 100644 --- a/outputframe-app/elements/render-canvas/render-canvas.ts +++ b/outputframe-app/elements/render-canvas/render-canvas.ts @@ -10,11 +10,14 @@ export class RenderCanvas extends BaseElement { width: 400, heigt: 400 } + + public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); onInit(): void { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); this.appendChild(this.canvas); + this.canvas.style.display = "none"; window.addEventListener("resize", () => { this.handleCanvasResize(); @@ -25,8 +28,8 @@ export class RenderCanvas extends BaseElement { private handleCanvasResize() { if (this.parentElement && this.canvas) { - this.width = this.parentElement.clientWidth; - this.height = this.parentElement.clientHeight; + this.width = this.parentElement.clientWidth - 20; + this.height = this.parentElement.clientHeight - 20; var smallest = Math.min(this.width, this.height); @@ -38,9 +41,10 @@ export class RenderCanvas extends BaseElement { } drawPoly(points: { x: number, y: number }[]) { - if (this.ctx) { + if (this.ctx && this.canvas) { + this.canvas.style.display = "block"; this.ctx.fillStyle = "rgba(0,0,0,0)"; - this.ctx.strokeStyle = "rgba(0,0,0,1)"; + this.ctx.strokeStyle = this.getColor(); this.ctx.beginPath(); for (var i = 0; i < points.length; i++) { @@ -60,12 +64,16 @@ export class RenderCanvas extends BaseElement { } } + getColor() { + return this.prefersDarkScheme.matches ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)'; + } + drawRect(x: number, y: number, width: number, height: number) { this.drawPoly([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]); } unitsToPx(unitNumber: number) { - var newPPU = (this.width / this.units.width); + var newPPU = Math.min(this.width, this.height) / this.units.width; return unitNumber * newPPU; }