Make context menu
Some checks failed
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is failing

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

View File

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

View File

@ -1,6 +1,7 @@
import { Todo } from "@src/core/entities/todo"; import { Todo } from "@src/core/entities/todo";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { TodoCheckmark } from "@src/components/todos/todoCheckmark"; import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
import Tippy from "@tippyjs/react";
interface TodoItemProps { interface TodoItemProps {
todo: Todo; todo: Todo;
@ -10,6 +11,7 @@ interface TodoItemProps {
export const TodoItem: FC<TodoItemProps> = (props) => { export const TodoItem: FC<TodoItemProps> = (props) => {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
const [menuIsOpen, setMenuIsOpen] = useState(false);
return ( return (
<div <div
@ -31,18 +33,38 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
</div> </div>
</div> </div>
</div> </div>
<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`} 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%)" }} style={{ transform: "translate(0px, -50%)" }}
onClick={() => setMenuIsOpen(true)}
> >
{isHovering && ( {isHovering && (
<div className="flex flex-col justify-between h-full "> <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 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>
</Tippy>
</div> </div>
); );
}; };

View File

@ -1102,6 +1102,11 @@
"@nodelib/fs.scandir" "2.1.5" "@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0" 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": "@rollup/plugin-babel@^5.2.0":
version "5.3.0" version "5.3.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
@ -1152,6 +1157,13 @@
ejs "^2.6.1" ejs "^2.6.1"
magic-string "^0.25.0" 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": "@trysound/sax@0.2.0":
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" 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" resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= 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: tmp@^0.2.1:
version "0.2.1" version "0.2.1"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"