Merge pull request #24 from JakobST1n/rebuild

v1.0.0

1 files changed, 57 insertions, 0 deletions

diff --git a/src_frontend/Components/LEDConfig/MatrixSegment.svelte b/src_frontend/Components/LEDConfig/MatrixSegment.svelte
new file mode 100644
index 0000000..c2c1934
--- /dev/null
+++ b/src_frontend/Components/LEDConfig/MatrixSegment.svelte
@@ -0,0 +1,57 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    export let segmentId;
+    export let inverted;
+
+    function toggleInvert() {
+        inverted = !inverted;
+        dispatch("change");
+    }
+
+    function forwardOnChange() {
+        dispatch("change")
+    }
+</script>
+
+<style>
+    div {
+        display: flex;
+    }
+    input {
+        padding: 10px 0 10px 10px;
+        width: 38px;
+        text-align: center;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 5px 0 0 5px;
+        margin-right: -5px;
+        transition: background-color 0.5s ease;
+    }
+    input:focus {
+        outline: none;
+        background-color: var(--grey-400);
+    }
+    button {
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 0 10px 10px 0;
+        padding: 10 5px;
+        margin-left: 0;
+    }
+    .inverted input, .inverted button{
+        background-color: var(--amber-500);
+    }
+    button:hover {
+        background-color: var(--grey-400);
+    }
+    button:active {
+        background-color: var(--grey-500);
+    }
+</style>
+
+<div class:inverted={inverted}>
+    <input on:change={forwardOnChange} on:blur={forwardOnChange} type="number" step=1 bind:value={segmentId} />
+    <button on:click={toggleInvert}><i class="fas fa-exchange-alt"></i></button>
+</div>
\ No newline at end of file