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/ComponentLib/Button/Button.svelte | 80 ++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src_frontend/ComponentLib/Button/Button.svelte

(limited to 'src_frontend/ComponentLib/Button/Button.svelte')

diff --git a/src_frontend/ComponentLib/Button/Button.svelte b/src_frontend/ComponentLib/Button/Button.svelte
new file mode 100644
index 0000000..3943ecf
--- /dev/null
+++ b/src_frontend/ComponentLib/Button/Button.svelte
@@ -0,0 +1,80 @@
+<script>
+    export let faIcon = false;
+    export let fullWidth = false;
+    export let backgroundColor = "var(--theme-primary)";
+    export let color = "var(--theme-on-primary)";
+
+    export let loadingPromise = null;
+    $: listen(loadingPromise);
+    function listen(promise) {
+        if (promise != null) {
+            loading = true;
+            promise.then(res => {
+                loading = false;
+                success = true;
+            }).catch(err => {
+                loading = false;
+                success = false;
+            });
+        } else {
+            loading = false;
+        }
+    }
+    let loading;
+    let success;
+</script>
+
+<style>
+    button {
+        background-color: var(--bg-color);
+        color: var(--color);
+        border: none;
+        text-decoration: none;
+        padding: 5px 15px;
+        font-size: 15px;
+
+        transition: background-color, color 0.1s ease;
+        border-radius: 15px;
+    }
+    button:hover {
+        filter: brightness(0.95);
+    }
+    button:active {
+        filter: brightness(0.90);
+    }
+    .fullWidth {
+        width: 100%;
+    }
+    .iconButton {
+        display: flex;
+    }
+    .iconButton .text {
+        margin: auto;
+    }
+    .active {
+        background-color: var(--active-bg-color);
+        color: var(--active-color); 
+    }
+</style>
+
+<button
+    on:click
+    class:fullWidth={fullWidth} 
+    class:iconButton={faIcon != false}
+    style="--bg-color: {backgroundColor};
+           --color: {color};">
+
+    {#if faIcon}
+        <div class="icon">
+            <i class={faIcon}></i>
+        </div>
+    {/if}
+
+    {#if loading}
+    <i class="fas fa-spinner fa-pulse"></i>
+    {:else}
+    <div class="text">
+        <slot></slot>
+    </div>
+    {/if}
+</button>
\ No newline at end of file
-- 
cgit v1.2.3

