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

Make context 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 18:49:03 +01:00
parent 3818068b4d
commit b316ce9ca6
3 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import { Todo } from "@src/core/entities/todo";
import { FC, useState } from "react";
import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
import Tippy from "@tippyjs/react";
interface TodoItemProps {
todo: Todo;
@@ -10,6 +11,7 @@ interface TodoItemProps {
export const TodoItem: FC<TodoItemProps> = (props) => {
const [isHovering, setIsHovering] = useState(false);
const [menuIsOpen, setMenuIsOpen] = useState(false);
return (
<div
@@ -31,18 +33,38 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
</div>
</div>
</div>
<div
className={`absolute left-full top-1/2 w-4 h-4 box-content ml-2 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" />
<Tippy
placement="left"
visible={menuIsOpen}
onClickOutside={() => {
setMenuIsOpen(false);
}}
interactive={true}
interactiveBorder={20}
content={
<div
className="p-4 bg-gray-700 border border-accent-500 rounded-xl flex flex-col gap-4"
tabIndex={0}
>
<button className="hover:bg-accent-500">Delete</button>
<button>Edit</button>
</div>
)}
</div>
}
>
<div
className={`absolute left-full top-1/2 w-4 h-4 box-content ml-2 p-2 rounded-md hover:bg-gray-300 active:bg-gray-400 transition group`}
style={{ transform: "translate(0px, -50%)" }}
onClick={() => setMenuIsOpen(true)}
>
{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>
</Tippy>
</div>
);
};