Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

floating checkmark, closes #4 #22

Merged
merged 6 commits into from
Sep 11, 2024
Merged

floating checkmark, closes #4 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17df1df
floating checkmark, closes #4
Exr0n Sep 10, 2024
3395b96
invisible hover box to make a bigger touch target
Exr0n Sep 11, 2024
9206771
show the checkmark even without hover if task is open
Exr0n Sep 11, 2024
837f5c1
pointer events none so you can actually complete tasks
Exr0n Sep 11, 2024
1605e75
make clicking on the button actually do a thing
Jemoka Sep 11, 2024
8c1c7d9
Merge branch 'feat/floating_checkmark_twooooooooooooo' of github.com:…
Jemoka Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/components/task.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.task {
position: relative;
}

.task-cm > .cm-mountpoint {
padding: 0;
}
Expand Down Expand Up @@ -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);
}
Expand Down
28 changes: 17 additions & 11 deletions src/components/task.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -107,6 +107,22 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
}}
onClose={() => setDeferOpen(false)}
ref={deferRef} />

<div className={`task-action cursor-pointer floating-task-action ${hasFocus ? "opacity-1" : "opacity-0" } group-hover:opacity-100 transition-opacity` }
style={{cursor: "pointer !important", zIndex: 100000}}
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="h-full w-[25px] absolute translate-x-[-25px] opacity-0 pointer-events-none"> </div>


<div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>
<Editor
strike={task.completed}
Expand All @@ -120,16 +136,6 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
/>

<animated.div className={"task-actions"} style={{...springs}}>
<div className="task-action" 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(0.5px)"}} />
</div>
<div className={"task-action pr-5" + (scheduleOpen ? " accent": "")}
onClick={() => setScheduleOpen(true)}
data-tooltip-id={hasFocus? "rootp" : "notp"}
Expand Down