Added edit mode buttons to info page and added enter press unfocus ev…

…ents
Rerbun · Mar 21, 2024 · 360c497 · 360c497
1 parent 1d3f493
commit 360c497
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/components/TodoList.svelte b/src/components/TodoList.svelte
@@ -39,11 +39,18 @@
     todo.children[swapIndex] = sortedTodo;
     updateTodo(todo);
   };
+
+  const handleContentEditCompleted = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
 </script>
 
 <div class="flex flex-col gap-2">
   <div class="flex items-center gap-2">
-    <StyledButton name="share" on:click={handleEditModeToggle}
+    <StyledButton name="edit" on:click={handleEditModeToggle}
       ><StyledVectorGraphic>
         {#if !editMode}
           <path
@@ -90,6 +97,7 @@
         contenteditable="true"
         class="px-2 py-1 border border-gray-400 rounded dark:border-gray-500 text-xl font-medium"
         bind:textContent={todo.title}
+        on:keydown={handleContentEditCompleted}
       >
         {todo.title}
       </h1>
@@ -125,6 +133,7 @@
             contenteditable="true"
             class="px-2 py-1 border border-gray-400 rounded dark:border-gray-500"
             bind:textContent={child.title}
+            on:keydown={handleContentEditCompleted}
           >
             {child.title}
           </div>

diff --git a/src/routes/info/+page.svelte b/src/routes/info/+page.svelte
@@ -109,6 +109,26 @@
     </StyledButton>
     Go to parent to-do
   </div>
+  <div class="flex items-center gap-1">
+    <StyledButton name="edit">
+      <StyledVectorGraphic>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+        />
+      </StyledVectorGraphic>
+    </StyledButton>
+    Activate edit mode, in this mode you can edit the to-dos or change the order
+  </div>
+  <div class="flex items-center gap-1">
+    <StyledButton name="edit" on:click={handleEditModeToggle}>
+      <StyledVectorGraphic>
+        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+      </StyledVectorGraphic>
+    </StyledButton>
+    Save changes done in edit mode
+  </div>
   <div class="flex items-center gap-1">
     <StyledButton name="share"
       ><StyledVectorGraphic>