give a little indication of what those boxes do

pickledish · Jul 11, 2021 · 90535b5 · 90535b5
1 parent e2bdb44
commit 90535b5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
@@ -16,8 +16,6 @@
     ? "text-black bg-grey-300 border-grey-300 dark:text-white dark:bg-grey-500 dark:border-grey-500"
     : "text-sage-700 bg-white border-desk-300 dark:text-sage-300 dark:bg-grey-700 dark:border-grey-500";
 
-  $: opacity = (checked) ? "100" : "0";
-
   function handle_check_change() {
     if (object_store != null) {
       if (checked) {
@@ -35,9 +33,15 @@
 <label class="flex justify-start items-start">
   <div class="{colors} border-2 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center">
     <input type="checkbox" class="opacity-0 absolute" bind:checked={checked} on:change={handle_check_change}>
-    <div class="pointer-events-none opacity-{opacity}">
+    {#if checked}
+    <div class="pointer-events-none">
       <Icon kind="check" size={16} width={3.0}/>
     </div>
+    {:else if tag_style}
+    <div class="pointer-events-none opacity-15">
+      <Icon kind="circle" size={12} width={3.0}/>
+    </div>
+    {/if}
   </div>
   <div class="select-none">{label}</div>
 </label>

diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -101,6 +101,9 @@
     <line x1="7.75" y1="16.25" x2="5.6" y2="18.4" />
     <line x1="6" y1="12" x2="3" y2="12" />
     <line x1="7.75" y1="7.75" x2="5.6" y2="5.6" />
+  {:else if kind == "circle"}
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <circle cx="12" cy="12" r="9" />
   {:else}
     {console.log(`Unknown icon: ${kind}`)}
   {/if}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,6 +24,10 @@ module.exports = {
       'xl': '1.25rem',
       '2xl': '1.75rem',
     },
+    opacity: {
+      '0': '0',
+      '15': '.15',
+    },
     extend: {
       colors: {
         grey: {