added final navigation bar (#9)

Reviewed-on: DMXStage/dmxconnect#9
2024-06-24 07:02:39 +00:00
parent d9a01d440b
commit d6dc8405dd
19 changed files with 253 additions and 102 deletions
--- a/frontend/src/components/Toggle.svelte
+++ b/frontend/src/components/Toggle.svelte
@@ -0,0 +1,121 @@
+<!-- Create a toggle button -->
+
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../stores.js';
+    import Tooltip from './Tooltip.svelte';
+    import { _ } from 'svelte-i18n'
+
+    export let icon = "" // The icon wanted 
+    export let width = "10em" // The button width
+    export let height = "5em" // The button height
+    export let tooltip = "Default tooltip" // The description shown in the tooltip
+    export let checked
+
+    let tooltipMessage = tooltip
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+
+    $: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
+       
+    // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick(event) {
+        event.preventDefault();
+        event.target.blur();
+        dispatch('click', event);
+    }
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+    // Unsubscribe for all variables used from the store
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+    })
+</script>
+
+<div style="{cssVarStyles}">
+    <Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
+    <label class="customToggle"
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style="width:{width}; height:{height}; border-radius:{width}; background-color:{fourthColor};">
+        <input type="checkbox" {checked}>
+        <span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
+            <i class='bx {icon}' style="font-size:{height};"/>
+        </span>
+    </label>
+
+</div>
+
+<style>
+    div{
+        display:inline-block;
+    }
+
+    .customToggle {
+            cursor: pointer;
+            overflow: hidden;
+            padding: 0.1em;
+    }
+
+    .customToggle:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+
+    .customToggle input[type="checkbox"] {
+        opacity: 0;
+        position: absolute; /* Position absolue pour garder l'élément dans le flux */
+        cursor: pointer;
+    }
+
+    .customToggle input[type="checkbox"]:checked + .checkmark {
+        background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
+        float: right;
+        animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+    }
+
+    @keyframes checkmark-slide-in {
+        0% {
+            transform: translateX(-50px) scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: translateX(0) scale(1);
+            opacity: 1;
+        }
+        70% {
+            transform: translateX(-5px) scale(1);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(0) scale(1);
+            opacity: 1;
+        }
+    }
+
+    .checkmark {
+        text-align:center;
+        float: left;
+        background-color: var(--thumb-background);
+        color: var(--thumb-color);
+        transition: opacity 0.3s, transform 0.3s;
+    }
+</style>