kjuulh/todo
1
0
Fork 0
Code Issues 1 Pull Requests 7 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
Signed by: kjuulh
GPG Key ID: 0F95C140730F2F23
3 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"@microsoft/signalr": "^6.0.0",
"@tippyjs/react": "^4.2.6",
"next": "12.0.3",
"next-pwa": "^5.4.0",
"react": "17.0.2",

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>
);
};

19
src/client/yarn.lock
View File

@ -1102,6 +1102,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@popperjs/core@^2.9.0":
version "2.10.2"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
"@rollup/plugin-babel@^5.2.0":
version "5.3.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
@ -1152,6 +1157,13 @@
ejs "^2.6.1"
magic-string "^0.25.0"
"@tippyjs/react@^4.2.6":
version "4.2.6"
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
dependencies:
tippy.js "^6.3.1"
"@trysound/sax@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@ -5257,6 +5269,13 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tippy.js@^6.3.1:
version "6.3.7"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
dependencies:
"@popperjs/core" "^2.9.0"
tmp@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"