From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/Components/Editor/TopBar.svelte | 62 ++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src_frontend/Components/Editor/TopBar.svelte

(limited to 'src_frontend/Components/Editor/TopBar.svelte')

diff --git a/src_frontend/Components/Editor/TopBar.svelte b/src_frontend/Components/Editor/TopBar.svelte
new file mode 100644
index 0000000..c74adf0
--- /dev/null
+++ b/src_frontend/Components/Editor/TopBar.svelte
@@ -0,0 +1,62 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+	import { pop } from "svelte-spa-router";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let modeId;
+    export let hasChange = false;
+    export let procIsRunning = false;
+</script>
+
+<style>
+    .topbar {
+        display: flex;
+        background-color: #444242;
+        height: 35px;
+        box-sizing: border-box;
+        padding: 10px;
+        font-size: 12px;
+        color: white;
+    }
+    .topbar .title { margin: auto; }
+    .savestatus {
+        font-size: 10px;
+        color: var(--grey-400);
+    }
+    button {
+        background: #444242;
+        border: none;
+        color: white;
+    }
+    button i {
+        margin-right: 5px;
+    }
+    button:hover {
+        filter: brightness(0.95);
+    }
+    button:active {
+        filter: brightness(0.90);
+    }
+</style>
+
+<div class="topbar">
+    <div><button on:click={() => dispatch("closedebugger")}><i class="fas fa-chevron-left"></i></button></div>
+    <div class="title">
+        <span class="filename"><PrettyVar varText={modeId} /></span>
+        <span class="savestatus">
+            {#if hasChange}
+            (not saved)
+            {/if}
+        </span>
+    </div>
+    <div>
+        {#if procIsRunning}
+        <button on:click={() => dispatch("restart")}><i class="fas fa-sync-alt"></i>Restart</button>
+        <button on:click={() => dispatch("stop")}><i class="fas fa-stop"></i>Stop</button>
+        {:else}
+        <button on:click={() => dispatch("start")}><i class="fas fa-play"></i>Start</button>
+        {/if}
+    </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3