diff options
Diffstat (limited to 'apps/web/src/components')
3 files changed, 84 insertions, 8 deletions
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx index 56437508..e2bfdff7 100644 --- a/apps/web/src/components/editor/media-panel/tabbar.tsx +++ b/apps/web/src/components/editor/media-panel/tabbar.tsx @@ -7,13 +7,45 @@ import { TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; +import { useEffect, useRef, useState } from "react"; export function TabBar() { const { activeTab, setActiveTab } = useMediaPanelStore(); + const scrollRef = useRef<HTMLDivElement>(null); + const [showTopFade, setShowTopFade] = useState(false); + const [showBottomFade, setShowBottomFade] = useState(false); + + const checkScrollPosition = () => { + const element = scrollRef.current; + if (!element) return; + + const { scrollTop, scrollHeight, clientHeight } = element; + setShowTopFade(scrollTop > 0); + setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1); + }; + + useEffect(() => { + const element = scrollRef.current; + if (!element) return; + + checkScrollPosition(); + element.addEventListener("scroll", checkScrollPosition); + + const resizeObserver = new ResizeObserver(checkScrollPosition); + resizeObserver.observe(element); + + return () => { + element.removeEventListener("scroll", checkScrollPosition); + resizeObserver.disconnect(); + }; + }, []); return ( - <div className="flex"> - <div className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full py-4"> + <div className="flex relative"> + <div + ref={scrollRef} + className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-y-auto scrollbar-hidden relative w-full py-4" + > {(Object.keys(tabs) as Tab[]).map((tabKey) => { const tab = tabs[tabKey]; return ( @@ -46,6 +78,22 @@ export function TabBar() { ); })} </div> + + <FadeOverlay direction="top" show={showTopFade} /> + <FadeOverlay direction="bottom" show={showBottomFade} /> </div> ); } + +function FadeOverlay({ direction, show }: { direction: "top" | "bottom", show: boolean }) { + return ( + <div + className={cn( + "absolute left-0 right-0 h-6 pointer-events-none z-[101] transition-opacity duration-200", + direction === "top" && show + ? "top-0 bg-gradient-to-b from-panel to-transparent" + : "bottom-0 bg-gradient-to-t from-panel to-transparent" + )} + /> + ); +}
\ No newline at end of file diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx index d2d21f36..be54a9c4 100644 --- a/apps/web/src/components/editor/media-panel/views/settings.tsx +++ b/apps/web/src/components/editor/media-panel/views/settings.tsx @@ -23,9 +23,11 @@ import Image from "next/image"; import { cn } from "@/lib/utils"; import { colors } from "@/data/colors/solid"; import { patternCraftGradients } from "@/data/colors/pattern-craft"; -import { PipetteIcon } from "lucide-react"; +import { PipetteIcon, PlusIcon } from "lucide-react"; import { useMemo, memo, useCallback } from "react"; import { syntaxUIGradients } from "@/data/colors/syntax-ui"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; export function SettingsView() { return <ProjectSettingsTabs />; @@ -39,14 +41,40 @@ function ProjectSettingsTabs() { { value: "project-info", label: "Project info", - content: <ProjectInfoView />, + content: ( + <div className="p-5"> + <ProjectInfoView /> + </div> + ), }, { value: "background", label: "Background", - content: <BackgroundView />, + content: ( + <div className="flex flex-col justify-between h-full"> + <div className="flex-1 p-5"> + <BackgroundView /> + </div> + <div className="flex flex-col sticky -bottom-0 bg-panel/85 backdrop-blur-lg"> + <Separator /> + <Button className="w-fit h-auto p-5 py-4 !bg-transparent shadow-none text-muted-foreground hover:text-foreground/85 text-xs"> + Custom background + <PlusIcon /> + </Button> + </div> + + {/* Another UI, looks so beautiful i don't wanna remove it */} + {/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0"> + <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full"> + <span className="text-sm">Custom</span> + <PlusIcon className="" /> + </Button> + </div> */} + </div> + ), }, ]} + className="flex flex-col justify-between h-full p-0" /> ); } @@ -258,7 +286,7 @@ function BackgroundView() { ); return ( - <div className="flex flex-col gap-4"> + <div className="flex flex-col gap-4 h-full"> <PropertyGroup title="Blur" defaultExpanded={false}> <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div> </PropertyGroup> @@ -278,7 +306,7 @@ function BackgroundView() { </div> </PropertyGroup> - <PropertyGroup title="Pattern Craft" defaultExpanded={false}> + <PropertyGroup title="Pattern craft" defaultExpanded={false}> <div className="grid grid-cols-4 gap-2 w-full"> <BackgroundPreviews backgrounds={patternCraftGradients} diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx index bef4e62c..4acadafb 100644 --- a/apps/web/src/components/editor/panel-base-view.tsx +++ b/apps/web/src/components/editor/panel-base-view.tsx @@ -69,7 +69,7 @@ export function PanelBaseView({ value={tab.value}
className="mt-0 flex-1 flex flex-col min-h-0"
>
- <ViewContent>{tab.content}</ViewContent>
+ <ViewContent className={className}>{tab.content}</ViewContent>
</TabsContent>
))}
</Tabs>
|