diff --git a/frontend/src/components/Settings/DeviceCard.svelte b/frontend/src/components/Settings/DeviceCard.svelte index 85158e0..6a85854 100644 --- a/frontend/src/components/Settings/DeviceCard.svelte +++ b/frontend/src/components/Settings/DeviceCard.svelte @@ -16,6 +16,7 @@ export let signalized = false; export let disconnected = false; export let selected = false; + export let waiting = false; // Emit a delete event when the device is being removed const dispatch = createEventDispatcher(); @@ -37,8 +38,8 @@
-
-
+
+

{#if disconnected} {/if}{title}

{type} {location != '' ? "- " : ""}{location}
{#if disconnected} @@ -77,23 +78,12 @@ text-align: left; cursor: pointer; } - .unselected{ - background-color: var(--third-color); - background: fixed; - margin: 0.2em; - padding-left: 0.3em; - padding-bottom: 0.3em; - border-radius: 0.2em; - display: flex; - justify-content: space-between; - text-align: left; - cursor: pointer; - } .subtitle{ margin-bottom: 0.5em; } .actions { margin-left: 0.2em; + z-index: 2; } p{ margin: 0; @@ -102,4 +92,46 @@ margin: 0; font-weight: 1; } + + .waiting::before{ + content: ''; + position: absolute; + background: linear-gradient(var(--second-color), var(--first-color)); + width: 100%; + height: 60%; + animation: rotate 3s linear infinite; + } + + .waiting::after{ + content: ''; + position: absolute; + background: var(--second-color); + inset: 2px; + border-radius: 0.2em; + } + + .unselected{ + background-color: var(--third-color); + background: fixed; + position: relative; + margin: 0.2em; + padding-left: 0.3em; + padding-bottom: 0.3em; + border-radius: 0.2em; + display: flex; + justify-content: space-between; + text-align: left; + cursor: pointer; + overflow: hidden; + } + + /* Définition de l'animation */ + @keyframes rotate { + from { + transform: rotate(0deg); /* Début de la rotation */ + } + to { + transform: rotate(360deg); /* Fin de la rotation */ + } + } \ No newline at end of file diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte index c629c44..02341a8 100644 --- a/frontend/src/components/Settings/InputsOutputsContent.svelte +++ b/frontend/src/components/Settings/InputsOutputsContent.svelte @@ -133,7 +133,7 @@ {#if savedPeripheralNumber > 0} {#each Object.entries($peripherals) as [serialNumber, peripheral]} {#if peripheral.isSaved} - removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)} + removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)} disconnected={!peripheral.isDetected} title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/> {/if} {/each}