added slider button for topbar
This commit is contained in:
smfahim25
parent
3a07457404
commit
4fd46b789c
2 changed files with 186 additions and 157 deletions
10
src/App.css
10
src/App.css
|
|
@ -6,16 +6,6 @@
|
|||
.tooltip {
|
||||
--tooltip-spacing: 30px;
|
||||
}
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.example::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.example {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:size-4 svg {
|
||||
width: 1.3rem !important;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { useContext, useRef, useState } from "react";
|
||||
import TextCustomization from "../EachComponent/Customization/TextCustomization";
|
||||
import LockObject from "../EachComponent/Customization/LockObject";
|
||||
import { ScrollArea, ScrollBar } from "../ui/scroll-area";
|
||||
import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { useContext } from "react";
|
||||
import { ObjectShortcut } from "../ObjectShortcut";
|
||||
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ImagePlus } from "lucide-react";
|
||||
import { ImagePlus, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { RxBorderWidth } from "react-icons/rx";
|
||||
import { LuFlipVertical } from "react-icons/lu";
|
||||
import { SlTarget } from "react-icons/sl";
|
||||
|
|
@ -22,16 +21,56 @@ export function TopBar() {
|
|||
const activeObjectType = activeObject?.type;
|
||||
const hasClipPath = !!activeObject?.clipPath;
|
||||
const customClipPath = activeObject?.isClipPath;
|
||||
const scrollContainerRef = useRef(null);
|
||||
const [showScrollButtons, setShowScrollButtons] = useState(false);
|
||||
|
||||
const scroll = (direction) => {
|
||||
const container = scrollContainerRef.current;
|
||||
if (container) {
|
||||
const scrollAmount = 200; // Adjust this value to change scroll distance
|
||||
container.scrollBy({
|
||||
left: direction * scrollAmount,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ScrollArea
|
||||
className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
|
||||
<div
|
||||
className={`!absolute top-2 -translate-x-1/2 z-40 ${
|
||||
selectedPanel !== ""
|
||||
? "md:w-[475px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
|
||||
? "md:w-[465px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
|
||||
: "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
|
||||
} `}
|
||||
}`}
|
||||
onMouseEnter={() => setShowScrollButtons(true)}
|
||||
onMouseLeave={() => setShowScrollButtons(false)}
|
||||
>
|
||||
<div className="bg-white shadow-sm mx-auto px-4 py-2 flex justify-center items-center gap-2">
|
||||
<div className="relative h-full hidden xl:block">
|
||||
{showScrollButtons && (
|
||||
<>
|
||||
<Button
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
|
||||
onClick={() => scroll(-1)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-accent"
|
||||
onClick={() => scroll(1)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="w-full h-full overflow-x-auto scrollbar-hide"
|
||||
>
|
||||
<div className="bg-white shadow-sm mx-auto px-4 xl:px-10 py-2 flex justify-start items-center gap-2 min-w-max h-full">
|
||||
<div>
|
||||
<TextCustomization />
|
||||
</div>
|
||||
|
|
@ -69,7 +108,6 @@ export function TopBar() {
|
|||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
|
||||
<path
|
||||
d="M15 15 Q16 12, 19 11"
|
||||
|
|
@ -77,7 +115,6 @@ export function TopBar() {
|
|||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<line
|
||||
x1="3"
|
||||
y1="17"
|
||||
|
|
@ -97,6 +134,7 @@ export function TopBar() {
|
|||
</svg>
|
||||
</Button>
|
||||
</a>
|
||||
<Tooltip id="canvas" content="Canvas Settings" place="bottom" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -108,12 +146,13 @@ export function TopBar() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={"rounded-full"}
|
||||
className="rounded-full"
|
||||
onClick={() => setSelectedPanel("color")}
|
||||
style={{ backgroundColor: textColor?.fill || "black" }}
|
||||
></Button>
|
||||
</a>
|
||||
)}
|
||||
<Tooltip id="color-gr" content="Color" place="bottom" />
|
||||
|
||||
{!customClipPath && (
|
||||
<a data-tooltip-id="stroke">
|
||||
|
|
@ -127,6 +166,7 @@ export function TopBar() {
|
|||
</Button>
|
||||
</a>
|
||||
)}
|
||||
<Tooltip id="stroke" content="Stroke" place="bottom" />
|
||||
{(activeObject || activeObject.type === "group") && (
|
||||
<a data-tooltip-id="group-obj">
|
||||
<Button
|
||||
|
|
@ -139,6 +179,7 @@ export function TopBar() {
|
|||
</Button>
|
||||
</a>
|
||||
)}
|
||||
<Tooltip id="group-obj" content="Group Object" place="bottom" />
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-gray-200" />
|
||||
|
|
@ -153,7 +194,7 @@ export function TopBar() {
|
|||
<LuFlipVertical />
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<Tooltip id="flip" content="Object flip" place="bottom" />
|
||||
{activeObject?.type !== "group" && (
|
||||
<a data-tooltip-id="position">
|
||||
<Button
|
||||
|
|
@ -165,6 +206,11 @@ export function TopBar() {
|
|||
</Button>
|
||||
</a>
|
||||
)}
|
||||
<Tooltip
|
||||
id="position"
|
||||
content="Object position"
|
||||
place="bottom"
|
||||
/>
|
||||
<a data-tooltip-id="shadow">
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -174,28 +220,21 @@ export function TopBar() {
|
|||
<RiShadowLine />
|
||||
</Button>
|
||||
</a>
|
||||
<Tooltip id="shadow" content="Shadow color" place="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<OpacityCustomization />
|
||||
<div className="h-4 w-px bg-border mx-2" />
|
||||
|
||||
<div>
|
||||
<ObjectShortcut value={"default"} />
|
||||
<ObjectShortcut value="default" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<LockObject />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
|
||||
<Tooltip id="color-gr" content="Color" place="bottom" />
|
||||
<Tooltip id="stroke" content="Stroke" place="bottom" />
|
||||
<Tooltip id="position" content="Object position" place="bottom" />
|
||||
<Tooltip id="shadow" content="Shadow color" place="bottom" />
|
||||
<Tooltip id="flip" content="Object flip" place="bottom" />
|
||||
<Tooltip id="group-obj" content="Group Object" place="bottom" />
|
||||
<Tooltip id="canvas" content="Canvas Settings" place="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue