floating checkmark, closes #4

Shabang-Systems · Sep 10, 2024 · 17df1df · 17df1df
1 parent 783af05
commit 17df1df
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/task.css b/src/components/task.css
@@ -1,3 +1,7 @@
+.task {
+    position: relative;
+}
+
 .task-cm > .cm-mountpoint {
     padding: 0;
 }
@@ -33,6 +37,11 @@
     margin-right: 0 !important;
 }
 
+.floating-task-action {
+    position: absolute;
+    transform: translateX(-18px) scale(0.8);
+}
+
 .task-action:hover {
     color: var(--foreground-color);
 }

diff --git a/src/components/task.jsx b/src/components/task.jsx
@@ -82,7 +82,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
     const deffered = (task.start && new Date(task.start) > today);
 
     return (
-        <div className="task" ref={wrapperRef}>
+        <div className="task group" ref={wrapperRef}>
             <DateModal
                 initialDate={task.schedule ? new Date(task.schedule) : null}
                 onDate={(d) => {
@@ -107,6 +107,20 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 }}
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
+
+            <div className="task-action floating-task-action opacity-0 group-hover:opacity-100 transition-opacity" data-tooltip-id={hasFocus? "rootp" : "notp"}  data-tooltip-content={task.completed ? strings.TOOLTIPS.UNCOMPLETE : strings.TOOLTIPS.COMPLETE} data-tooltip-place={"bottom"}
+                    onClick={() => {
+                        // TODO completing tasks is a bit of a thing so
+                        // TODO supporting repeating tasks, etc.
+                        dispatch(edit({id: task.id, completed: !task.completed}));
+                        setHasFocus(false);
+                    }}
+            >
+                <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(-4px)"}} />
+            </div>
+
+
+
             <div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>
                 <Editor
                     strike={task.completed}