Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 10:35:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

scaffolded html for creating tag

Browse source
This commit is contained in:
Christopher Bisset 2022-07-24 19:01:18 +10:00
parent 8b8718ebd8
commit 9ff56dee63
1 changed files with 35 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
View file

@ -1,5 +1,38 @@
<script>
import { fade } from 'svelte/transition';
let editingTag = false;
</script>
<div class="btn btn-xs border-dotted border-2 btn-primary opacity-60 normal-case">+ tag</div>
<div
on:click|stopPropagation={() => {
editingTag = true;
}}
class="btn btn-xs border-dotted border-2 btn-primary opacity-60 normal-case"
>
{#if !editingTag}
<span>+ tag</span>
{:else}
<!-- svelte-ignore a11y-autofocus -->
<form on:submit|preventDefault={() => {console.log("hi");}}>
<input autofocus class="bg-primary w-16" />
<button in:fade class="ml-1">
<!-- checkmark symbol -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg></button
>
<!-- Delete cancel symbol -->
<button
type="button"
in:fade
on:click|stopPropagation={() => {
editingTag = false;
}}
class="ml-1"
><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg></button
>
</form>
{/if}
</div>