iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-27 07:22:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

добавил изменение цвета toggle

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-08-16 14:07:10 +02:00
parent 3a03ae323d
commit 3aa38fb256
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/widgets/Input.svelte
View File

@@ -10,7 +10,7 @@
</div>
<div class="flex justify-end w-1/3">
{#if widget.type == "number"}
<input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.01" type="number" />
<input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
{/if}
{#if widget.type == "text"}
<input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />

4
src/widgets/Toggle.svelte
View File

@@ -33,8 +33,8 @@
<label for={widget.topic} class="items-center cursor-pointer">
<div class="relative">
<input bind:checked={toggleState} on:change={() => (changeValue(), wsPush(widget.ws, widget.topic, widget.status))} id={widget.topic} type="checkbox" class="sr-only" />
<div class="block bg-gray-600 w-10 h-6 rounded-full" />
<div class="dot {widget.sent ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1 w-4 h-4 rounded-full transition" />
<div class="block {toggleState ? 'bg-blue-600' : 'bg-gray-600'} w-10 h-6 rounded-full shadow-lg" />
<div class="dot {widget.sent ? 'bg-red-300' : 'bg-gray-100'} absolute left-1 top-1 w-4 h-4 rounded-full transition shadow-lg" />
</div>
</label>
</div>