It's a todo list.
style dialog
+31
-29
+31
-29
src/lib/TaskItem.svelte
+31
-29
src/lib/TaskItem.svelte
···
41
41
}
42
42
</script>
43
43
44
-
<dialog bind:this={timerDialog} id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8 rounded-xl">
45
-
<form method="dialog" class="w-fit" onsubmit={handleTimeSubmit}>
46
-
<button type="button" onclick={() => timerDialog?.close()}>Close</button>
47
-
<div class="flex gap-8 items-center text-lg">
48
-
<button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
49
-
Set
50
-
</button>
51
-
<button type="button" onclick={() => selectedTab = "add"} class={[selectedTab === "add" && "border border-red-500"]}>
52
-
Add
53
-
</button>
54
-
</div>
44
+
<dialog bind:this={timerDialog} id={`timer_${task.id}`} class="fixed border inset-0 m-auto w-1/2 p-8 rounded-xl">
45
+
<form method="dialog" onsubmit={handleTimeSubmit}>
46
+
<button type="button" onclick={() => timerDialog?.close()} class="absolute right-12">×</button>
47
+
<div class="flex flex-col items-center gap-4">
48
+
<div class="flex items-center text-sm border rounded-full bg-gray-300">
49
+
<button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border-black bg-white", "border border-gray-300 px-3 py-1 rounded-l-full bg-gray-300"]}>
50
+
Set
51
+
</button>
52
+
<button type="button" onclick={() => selectedTab = "add"} class={[selectedTab === "add" && "border-black bg-white", "border border-gray-300 px-3 py-1 rounded-r-full bg-gray-300"]}>
53
+
Add
54
+
</button>
55
+
</div>
55
56
56
-
<div class="flex w-fit items-center justify-center">
57
-
<input type="number" min="0" bind:value={hourInput} class="w-12" />
58
-
<p class="mr-4">:</p>
59
-
<input type="number" min="0" max="59" bind:value={minuteInput} class="w-12" />
60
-
<p class="mr-4">:</p>
61
-
<input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" />
62
-
</div>
57
+
<div class="flex w-fit items-center justify-center">
58
+
<input type="number" min="0" max="99" bind:value={hourInput} class="text-right" />
59
+
<p class="mr-4">:</p>
60
+
<input type="number" min="0" max="59" bind:value={minuteInput} class="text-right" />
61
+
<p class="mr-4">:</p>
62
+
<input type="number" min="0" max="59" bind:value={secondsInput} class="text-right" />
63
+
</div>
63
64
64
-
<p>
65
-
{formatSecondsToDuration(task.duration)} ➜
66
-
{#if selectedTab === "set"}
67
-
{formatSecondsToDuration(inputDuration)}
68
-
{:else if selectedTab === "add"}
69
-
{formatSecondsToDuration(task.duration + inputDuration)}
70
-
{/if}
71
-
</p>
72
-
<button type="submit">
73
-
Confirm
74
-
</button>
65
+
<p>
66
+
<span class="text-gray-600">{formatSecondsToDuration(task.duration)}</span> ➜
67
+
{#if selectedTab === "set"}
68
+
{formatSecondsToDuration(inputDuration)}
69
+
{:else if selectedTab === "add"}
70
+
{formatSecondsToDuration(task.duration + inputDuration)}
71
+
{/if}
72
+
</p>
73
+
<button type="submit" class="bg-green-400 px-4 py-1 text-lg rounded-lg">
74
+
Confirm
75
+
</button>
76
+
</div>
75
77
</form>
76
78
</dialog>
77
79