trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: add animation to selection bar

Browse source
This commit is contained in:
trafficlunar 2025-01-24 14:57:00 +00:00
parent 5e01bb4318
commit f3e881fcec
2 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/canvas/SelectionToolbar.tsx
View file

@ -1,4 +1,4 @@
import { useContext } from "react"; import { useContext, useEffect, useState } from "react";
import { CheckIcon, XIcon } from "lucide-react"; import { CheckIcon, XIcon } from "lucide-react";
import { CanvasContext } from "@/context/Canvas"; import { CanvasContext } from "@/context/Canvas";
@ -10,6 +10,8 @@ function SelectionToolbar() {
const { blocks, setBlocks } = useContext(CanvasContext); const { blocks, setBlocks } = useContext(CanvasContext);
const { layerBlocks, setLayerBlocks } = useContext(SelectionContext); const { layerBlocks, setLayerBlocks } = useContext(SelectionContext);
const [isVisible, setIsVisible] = useState(false);
const confirmSelection = () => { const confirmSelection = () => {
const combinedBlocks = [...blocks, ...layerBlocks]; const combinedBlocks = [...blocks, ...layerBlocks];
const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values()); const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
@ -18,20 +20,25 @@ function SelectionToolbar() {
setLayerBlocks([]); setLayerBlocks([]);
}; };
return ( useEffect(() => {
layerBlocks.length != 0 && ( setIsVisible(layerBlocks.length !== 0);
<div className="absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-950 rounded shadow-xl border border-zinc-200 dark:border-zinc-800"> }, [layerBlocks]);
<span className="mr-4 ml-2">Selection</span>
return (
<div
className={`absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-900 rounded-lg shadow-xl border border-zinc-200 dark:border-zinc-800 transition-all duration-300
${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6 pointer-events-none"}
`}
>
{/* todo: place back blocks removed */} {/* todo: place back blocks removed */}
<Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}> <Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}>
<XIcon /> <XIcon />
</Button> </Button>
<span className="mx-2 text-[0.85rem]">Confirm selection?</span>
<Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}> <Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}>
<CheckIcon /> <CheckIcon />
</Button> </Button>
</div> </div>
)
); );
} }

2
src/index.css
View file

@ -33,5 +33,5 @@ body {
} }
.info-child { .info-child {
@apply bg-white dark:bg-zinc-950 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800; @apply bg-white dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
} }