added theme and gradients and stuff

codeeditor-app/app.html

@@ -4,7 +4,10 @@
     </div>
     <div class="flex-horiz">
         <code-editor style="min-width: 50%; max-width: 50%;"></code-editor>
-        <output-frame></output-frame>
+        <div>
+            <resize-handle></resize-handle>
+            <output-frame></output-frame>
+        </div>
     </div>
     <div class="flex-shrink section bottom">methods: rect, box, center, width, height, rand</div>
 </div>

codeeditor-app/app.less

@@ -1,8 +1,11 @@
+@import url('../shared/theme.less');
+
 html, body {
     margin: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background: @median-bg-white;
 }
 
 .flex-horiz {
@@ -46,41 +49,41 @@ html, body {
 }
 
 body {
-    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+    font-family: @primary-font-family;
 }
 
 .section {
-    background: #e3e3e3; 
-    padding: 20px; 
-    font-size: 22px;
+    background: @primary-bg-color-white; 
+    padding: 10px; 
+    font-size: 18px;
 }
 
 .section.top {
-    border-bottom: 1px solid #c2c2c2;
+    border-bottom: 1px solid @primary-border-color-white;
 }
 
 .section.bottom {
     padding: 10px;
-    border-top: 1px solid #c2c2c2;
-    font-size: 14px;
+    border-top: 1px solid @primary-border-color-white;
+    font-size: 10px;
     text-align: right;
 }
 
 @media (prefers-color-scheme: dark) {
     body {
-        background: #1e1e1e;
+        background: @median-bg-dark;
     }
 
     .section {
-        color: white;
-        background: #2e2e2e; 
+        color: @primary-text-color-dark;
+        background: @primary-bg-color-dark; 
     }
 
     .section.top {
-        border-color: #292929;
+        border-color: @primary-border-color-dark;
     }
     
     .section.bottom {
-        border-color: #292929;
+        border-color: @primary-bg-color-dark;
     }
 }

codeeditor-app/boot.ts

@@ -5,12 +5,14 @@ import { CodeEditor } from './elements/code-editor/code-editor';
 import { OutputFrame } from './elements/output-frame/output-frame';
 import { NotificationBubbles } from './elements/notification-bubbles/notification-bubbles';
 import { NotificationBubble } from './elements/notification-bubbles/notification-bubble';
+import { ResizeHandle } from './elements/resize-handle/resize-handle';
 
 window.customElements.define('app-root', AppRoot);
 window.customElements.define('code-editor', CodeEditor);
 window.customElements.define('output-frame', OutputFrame);
 window.customElements.define('notification-bubbles', NotificationBubbles);
 window.customElements.define('notification-bubble', NotificationBubble);
+window.customElements.define('resize-handle', ResizeHandle);
 
 
 document.body.innerHTML += bootHtml;

codeeditor-app/elements/code-editor/code-editor.less

@@ -1,5 +1,16 @@
-monaco-editor {
+@import url('../../../shared/theme.less');
+
+code-editor {
     width: 100%;
     height: 100%;
     display: block;
+    background: @editor-bg-white;
+    color: @primary-text-color-white;
+}
+
+@media (prefers-color-scheme: dark) {
+    code-editor {
+        background: @editor-bg-dark;
+        color: @primary-text-color-dark;
+    }
 }

codeeditor-app/elements/code-editor/code-editor.ts

@@ -73,7 +73,6 @@ export class CodeEditor extends BaseElement {
         });
 
         this.waitFor(this.outputFrame, () => {
-            console.log("setting script");
             this.outputFrame.setScript(this.input);
         });
 
@@ -100,11 +99,7 @@ export class CodeEditor extends BaseElement {
         };
     }
 
-    onUpdate(): void {
-        console.log("APP ROOT UPDATE");
-    }
-
     get outputFrame(): OutputFrame {
-        return <OutputFrame>this.findSibling("output-frame");
+        return <OutputFrame>this.find("output-frame");
     }
 }

codeeditor-app/elements/code-editor/injects/declarations.d.ts

@@ -4,4 +4,4 @@ declare function rand(from: number, to: number): number;
 declare function center(): number;
 declare function width(): number;
 declare function height(): number;
-declare function randomColor(randomOpacity: boolean = true): string;
+declare function randomColor(): string;

codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.js

@@ -1,5 +1,5 @@
-const boxSize = 40;
-const stepSize = boxSize + boxSize / 4;
+const boxSize = 30;
+const stepSize = boxSize + boxSize / 1.8;
 let x = center() - boxSize / 2;
 let y = center() - boxSize / 2;
 let turns = 0;
@@ -8,7 +8,7 @@ let currentStep = 1;
 let stepsInCurrentDirection = 1;
 
 while (!isOutsizeCanvas()) {
-    box(x, y, boxSize, boxSize);
+    box(x, y, boxSize, boxSize, randomColor());
     moveAccordingToDirection();
     setNextStepAndDirection();
 }

codeeditor-app/elements/notification-bubbles/notification-bubble.less

@@ -1,3 +1,5 @@
+@import url('../../../shared/theme.less');
+
 notification-bubble {
     margin: 10px;
     padding: 10px;
@@ -39,7 +41,7 @@ notification-bubble.syntax-error {
 
 @media (prefers-color-scheme: dark) {
     notification-bubble {
-        color: white;
+        color: @primary-text-color-dark;
     }
 
     notification-bubble.log {

codeeditor-app/elements/output-frame/output-frame.less

@@ -1,8 +1,9 @@
+@import url('../../../shared/theme.less');
+
 output-frame {
     width: 100%;
     height: 100%;
     display: block;
-    background-color: #f0f0f0;
 }
 
 output-frame > iframe {
@@ -13,9 +14,5 @@ output-frame > iframe {
 }
 
 
-
 @media (prefers-color-scheme: dark) {
-    output-frame {
-        background-color: #272727;
-    }
 }

codeeditor-app/elements/resize-handle/resize-handle.less

@@ -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;
+    }
+}

codeeditor-app/elements/resize-handle/resize-handle.ts

@@ -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");
+    }
+}