From bdcc98a2ac3ceb8fd1b3fda87f750c5aabf13d6d Mon Sep 17 00:00:00 2001
From: Alex <$(pass /github/email)>
Date: Tue, 8 Oct 2024 07:32:29 +0200
Subject: [PATCH] add: readonly option for inputfields

---
 frontend/src/lib/components/InputField.svelte | 98 +++++++++++++++----
 1 file changed, 81 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/InputField.svelte b/frontend/src/lib/components/InputField.svelte
index 7acf734..08f3b0e 100644
--- a/frontend/src/lib/components/InputField.svelte
+++ b/frontend/src/lib/components/InputField.svelte
@@ -35,6 +35,9 @@
   /** @type {boolean} */
   export let checked = false;
 
+  /** @type {boolean} */
+  export let readonly = false;
+
   /**
    * @param {Event} event - The input event
    */
@@ -119,12 +122,13 @@
 
 <div class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}">
   {#if type === "checkbox"}
-    <label class="checkbox-label">
+    <label class="form-control {readonly ? 'form-control--disabled' : ''}">
       <input
         type="checkbox"
         {name}
         {value}
         {checked}
+        {readonly}
         on:change={() => (checked = !checked)}
       />
       <span class="checkbox-text"> {label} </span>
@@ -154,8 +158,9 @@
         {placeholder}
         {required}
         {value}
+        {readonly}
         {rows}
-        class="input textarea"
+        class="input textarea {readonly ? 'readonly' : ''}"
         style="height:{rows * 1.5}em;"
       />
     {:else if type != "checkbox"}
@@ -163,37 +168,96 @@
         {name}
         {type}
         {placeholder}
+        {readonly}
         {value}
         {required}
         on:input={handleInput}
         on:blur={handleInput}
-        class="input"
+        class="input {readonly ? 'readonly' : ''}"
       />
     {/if}
   </div>
 </div>
 
 <style>
+  :root {
+    --form-control-color: #6bff55;
+    --form-control-disabled: #959495;
+  }
+
+  .form-control {
+    font-size: 1rem;
+    font-weight: bold;
+    line-height: 1.1;
+    display: grid;
+    grid-template-columns: 1.5em auto;
+    gap: 0.75em;
+    align-items: center;
+    opacity: 0.8;
+  }
+
+  .form-control--disabled {
+    color: var(--form-control-disabled);
+    cursor: not-allowed;
+  }
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--form-background);
+    margin: 0;
+    font: inherit;
+    color: currentColor;
+    width: 1.75em;
+    height: 1.75em;
+    border: 0.15em solid currentColor;
+    border-radius: 0.5em;
+    transform: translateY(-0.075em);
+    display: grid;
+    place-content: center;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  input[type="checkbox"]::before {
+    content: "";
+    width: 1em;
+    height: 1em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transform-origin: bottom left;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em var(--form-control-color);
+    background-color: CanvasText;
+  }
+
+  input[type="checkbox"]:checked::before {
+    transform: scale(1);
+  }
+
+  input[type="checkbox"]:hover {
+    outline: max(2px, 0.15em) solid currentColor;
+    outline-offset: max(2px, 0.15em);
+    transform: scale(1.3);
+  }
+
+  input[type="checkbox"]:disabled {
+    --form-control-color: var(--form-control-disabled);
+    color: var(--form-control-disabled);
+    cursor: not-allowed;
+  }
+  .readonly {
+    background-color: #ececec;
+    cursor: not-allowed;
+    opacity: 0.7;
+    color: #4f4f4f;
+  }
+
   .checkbox-container {
     display: inline-flex;
     align-items: center;
     background-color: transparent;
   }
 
-  .checkbox-label {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    justify-content: center;
-  }
-
-  .checkbox-label input[type="checkbox"] {
-    margin-right: 5px;
-    flex-shrink: 0;
-    width: 40px;
-  }
-
   .checkbox-text {
     font-size: 16px;
   }