kjuulh/todo
1
0
Fork 0
Code Issues 1 Pull Requests 8 Projects Releases Wiki Activity

Create contex menu
Some checks failed
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Kasper Juul Hermansen
2021-11-15 17:57:25 +01:00
parent 9a366ee503
commit 3d3d3af889
6 changed files with 36 additions and 2875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/client/src/components/todos/todoItem.tsx
View File

@@ -1,5 +1,5 @@
import { Todo } from "@src/core/entities/todo";
import { FC } from "react";
import { FC, useState } from "react";
import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
interface TodoItemProps {
@@ -8,18 +8,41 @@ interface TodoItemProps {
displayProject: boolean;
}
export const TodoItem: FC<TodoItemProps> = (props) => (
<div className="py-3 border-b border-gray-300 dark:border-gray-600">
<div className="flex items-center space-x-4">
<TodoCheckmark {...props} />
<div className="flex flex-col md:flex-row flex-grow gap-0.5 md:gap-2 pr-6">
<div className="flex-grow w-full break-all">{props.todo.title}</div>
{props.displayProject && props.todo.project && (
<div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
{props.todo.project}
export const TodoItem: FC<TodoItemProps> = (props) => {
const [isHovering, setIsHovering] = useState(false);
return (
<div
className="py-3 border-b border-gray-300 dark:border-gray-600 relative"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
onFocus={() => setIsHovering(true)}
>
<div className="flex items-center space-x-4">
<TodoCheckmark {...props} />
<div className="flex flex-col md:flex-row flex-grow gap-0.5 md:gap-2 pr-6">
<div className="flex-grow w-full break-all">{props.todo.title}</div>
<div>
{props.displayProject && props.todo.project && (
<div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
{props.todo.project}
</div>
)}
</div>
</div>
</div>
<div
className={`absolute left-full top-1/2 w-4 h-4 box-content p-2 rounded-md hover:bg-gray-300 active:bg-gray-400 transition group`}
style={{ transform: "translate(0px, -50%)" }}
>
{isHovering && (
<div className="flex flex-col justify-between h-full ">
<div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
<div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
<div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
</div>
)}
</div>
</div>
</div>
);
);
};