Added task header

- Fix issues with clicking links fixes #40 - Allow for text selection fixes #42
mayank1513 · Jul 3, 2024 · b688a3a · b688a3a
1 parent 3a030c9
commit b688a3a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 30 deletions.
diff --git a/src/components/column-list/column-list.module.scss b/src/components/column-list/column-list.module.scss
@@ -53,7 +53,8 @@
   overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 200px);
-  padding: 0;
+  padding: 0 10px;
+  margin: 0 -10px;
 }
 .close {
   display: none;

diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
@@ -38,21 +38,27 @@ export default function Task({ task, index }: { task: TaskType; index: number })
           provided.draggableProps.style.transform += " rotate(5deg)";
         return (
           <label
-            onClick={() => vscode.toast("Double-click to enter editing mode!")}
-            onDoubleClick={() => {
-              setIsEditing(true);
-              resizeTextArea(textareaRef);
-              if (textareaRef.current?.value) {
-                textareaRef.current.value = "hk";
-                textareaRef.current.value = task.description;
-              }
-            }}
-            title="Double click to enter editing mode."
             htmlFor={id}
             ref={provided.innerRef}
-            {...provided.dragHandleProps}
             {...provided.draggableProps}
             className={[styles.task, isEditing ? styles.active : ""].join(" ")}>
+            <header {...provided.dragHandleProps}>
+              <span>∘∘∘</span>
+              <button className={styles.close} onClick={removeTask}>
+                ✖
+              </button>
+              <button
+                onClick={() => {
+                  setIsEditing(true);
+                  if (textareaRef.current?.value) {
+                    textareaRef.current.value = "hk";
+                    textareaRef.current.value = task.description;
+                  }
+                  setTimeout(() => resizeTextArea(textareaRef), 100);
+                }}>
+                🖉
+              </button>
+            </header>
             <textarea
               id={id}
               value={task.description}
@@ -66,9 +72,6 @@ export default function Task({ task, index }: { task: TaskType; index: number })
               placeholder="Enter task description in Markdown format"
               hidden={!isEditing}
             />
-            <span className={styles.close} onClick={removeTask}>
-              ✖
-            </span>
             {!isEditing &&
               (task.description.trim() ? (
                 <ReactMarkdown rehypePlugins={[rehypeRaw]}>{task.description.replace(/\n+/g, "\n\n")}</ReactMarkdown>

diff --git a/src/components/task/task.module.scss b/src/components/task/task.module.scss
@@ -1,12 +1,40 @@
 .task {
-  margin: 5px;
+  margin-bottom: 10px;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid gray;
   box-shadow: 0 0 5px #555;
   display: block;
   position: relative;
   background: var(--bg);
+  header {
+    text-align: center;
+    box-shadow: 0 0 2px currentColor;
+    margin: -5px;
+    margin-bottom: -5px;
+    margin-bottom: 0;
+    border-radius: 5px 5px 0 0;
+    padding-bottom: 2px;
+    position: relative;
+    button {
+      all: unset;
+      position: absolute;
+      right: 24px;
+      top: 0;
+      cursor: pointer;
+      padding: 0 5px;
+      &:hover {
+        color: orange;
+      }
+    }
+
+    .close {
+      right: 2px;
+      &:hover {
+        color: red;
+      }
+    }
+  }
   textarea {
     width: calc(100% - 10px);
     resize: none;
@@ -18,24 +46,10 @@
   ul {
     padding-left: 20px;
   }
-  &:hover .close {
-    display: block;
-  }
 }
 .active {
   box-shadow: 0 0 5px red;
 }
 .placeholder {
   opacity: 0.5;
 }
-.close {
-  position: absolute;
-  right: 5px;
-  top: -5px;
-  display: none;
-  cursor: pointer;
-  z-index: 100;
-  &:hover {
-    color: red;
-  }
-}