:boom: Introduce new UI based on svelte, and rewrite a lot of the node app and the NeoRuntime

1 files changed, 45 insertions, 0 deletions

diff --git a/src_frontend/ComponentLib/FloatingSelect.svelte b/src_frontend/ComponentLib/FloatingSelect.svelte
new file mode 100644
index 0000000..0d71ca7
--- /dev/null
+++ b/src_frontend/ComponentLib/FloatingSelect.svelte
@@ -0,0 +1,45 @@
+<script>
+    import FloatingButton from "./Button/FloatingButton.svelte";
+    export let value;
+
+    export let faIcon = false;
+    export let backgroundColor = "white";
+    export let color = "black";
+    export let activeBackgroundColor = "gray";
+    export let activeColor = "white";
+    export let active = false;
+    export let label = null;
+</script>
+
+<style>
+    select {
+        text-decoration: none;   
+        -webkit-appearance: none;
+           -moz-appearance: none;
+                appearance: none; 
+        background-color: transparent;
+        border: none;
+        margin: auto;
+        text-align: center;
+    }
+    select:focus {
+        outline: none;
+    }
+    .active {
+        background-color: var(--active-bg-color);
+        color: var(--active-color); 
+    }
+</style>
+<FloatingButton fullWidth=true
+                {faIcon}
+                {label}
+                {backgroundColor}
+                {color}
+                {activeBackgroundColor}
+                {activeColor}
+                {active} >
+    <select on:change
+            bind:value={value}>
+            <slot></slot>
+    </select> 
+</FloatingButton>
\ No newline at end of file