added theme and gradients and stuff

2022-03-24 23:00:10 +01:00
parent 5fb596daae
commit cda1b5c972
17 changed files with 225 additions and 51 deletions
@@ -0,0 +1,24 @@
+@import url('../../../shared/theme.less');
+
+resize-handle {
+    background: transparent;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    z-index: 9;
+    cursor: ew-resize;
+    transition: 1s ease-in;
+}
+
+resize-handle:hover {
+    background: @primary-interaction-highlight-white;
+    transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    resize-handle:hover {
+        background: @primary-interaction-highlight-dark;
+    }
+}
@@ -0,0 +1,65 @@
+import { BaseElement } from "../../../shared/_base";
+import { CodeEditor } from "../code-editor/code-editor";
+import './resize-handle.less';
+
+export class ResizeHandle extends BaseElement {
+
+    public isDowned = false;
+
+    onInit(): void {
+        this.setDragEvents();
+    }
+
+    setDragEvents() {
+        this.addEventListener("mousedown", (evt: MouseEvent) => {
+            this.isDowned = true;
+            this.getIframe().style.display = "none";
+        });
+
+        window.addEventListener("mousemove", (evt: MouseEvent) => {
+            if (this.isDowned) {
+                this.setPosition(evt.pageX);
+            }
+        });
+
+        window.addEventListener("mouseup", (evt: MouseEvent) => {
+            if (this.isDowned) {
+                this.getIframe().style.display = "block";
+                this.isDowned = false;
+            }
+        });
+
+        this.addEventListener("touchstart", (evt: TouchEvent) => {
+            this.isDowned = true;
+            this.getIframe().style.display = "none";
+        });
+
+        window.addEventListener("touchmove", (evt: TouchEvent) => {
+            if (this.isDowned) {
+                this.setPosition(evt.touches[0].pageX);
+            }
+        });
+
+        window.addEventListener("touchend", (evt: TouchEvent) => {
+            if (this.isDowned) {
+                this.getIframe().style.display = "block";
+                this.isDowned = false;
+            }
+        });
+    }
+
+    setPosition(x: number) {
+        var t = this.getTarget();
+
+        t.style.minWidth = x + "px";
+        t.style.maxWidth = x + "px";
+    }
+
+    getTarget() {
+        return <CodeEditor>this.find("code-editor");
+    }
+
+    getIframe() {
+        return <HTMLIFrameElement>this.find("iframe");
+    }
+}