added html and css editors

2022-03-26 20:44:52 +01:00
parent cda1b5c972
commit 6ed4b80c64
23 changed files with 548 additions and 144 deletions
@@ -0,0 +1,26 @@
+@import url('../../../shared/theme.less');
+
+div > code-editor-container.active:last-child {
+    min-height: auto !important;
+    max-height: none !important;
+    min-width: auto !important;
+    max-width: none !important;
+}
+
+.code-editor-header {
+    padding: 10px 18px;
+    background: lighten(@editor-bg-white, 1%);
+    color: @primary-text-color-white;
+    font-size: 13px;
+    border-style: solid none;
+    border-color: @primary-bg-color-white;
+    border-width: 1px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .code-editor-header {
+        background: lighten(@editor-bg-dark, 1%);
+        color: @primary-text-color-dark;
+        border-color: @primary-bg-color-dark;
+    }
+}
@@ -0,0 +1,34 @@
+import { BaseElement } from "../../../shared/_base";
+import { CodeEditor } from "../code-editor/code-editor";
+import { ResizeHandle } from "../resize-handle/resize-handle";
+import './code-editor-container.less';
+
+export class CodeEditorContainer extends BaseElement {
+    onInit(): void {
+        var language = this.getAttribute("language");
+        this.classList.add("flex-vert");
+        if (language) {
+            this.setHeader(language);
+            this.createCodeEditor(language, this.getAttribute("dir")?.toLowerCase().indexOf("v") === 0 ? 'vertical' : 'horizontal');
+        }
+    }
+
+    setHeader(title: string) {
+        var div = document.createElement("div");
+        div.classList.add("code-editor-header");
+        div.classList.add("flex-shrink");
+        div.innerText = title;
+
+        this.appendChild(div);
+    }
+
+    createCodeEditor(language: string, expandDir: 'vertical' | 'horizontal') {
+        var codeEditor = <CodeEditor>document.createElement("code-editor");
+        codeEditor.setAttribute("language", language);
+        var resizeHandle = <ResizeHandle>document.createElement("resize-handle");
+        resizeHandle.setAttribute("dir", expandDir);
+
+        this.appendChild(codeEditor);
+        this.appendChild(resizeHandle);
+    }
+}