gsadmin/artcraft
1
0
Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-10-25 02:29:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

webapp: fixes to mobile sheet component on mobile

Browse Source
This commit is contained in:
bflatastic
2026-06-06 07:50:07 +07:00
parent 3ea33dabd5
commit b162e2bfc0
2 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/artcraft-webapp/src/components/prompt-box/mobile/SettingsDrawer.tsx
+2
View File
@@ -32,6 +32,8 @@ export function SettingsDrawer({
<SheetContent
side="bottom"
aria-describedby={undefined}
modal={modal}
open={open}
className="ac-drawer-content max-h-[80vh] rounded-t-2xl bg-ui-panel pb-[max(1rem,env(safe-area-inset-bottom))]"
>
<div className="mx-auto mt-2 h-1 w-10 shrink-0 rounded-full bg-white/20" />
frontend/apps/artcraft-webapp/src/components/ui/sheet.tsx
+49 -26
View File
@@ -13,7 +13,7 @@ const SheetOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"ac-sheet-overlay fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
"ac-sheet-overlay fixed inset-0 z-50 bg-black/60",
className,
)}
{...props}
@@ -21,40 +21,63 @@ const SheetOverlay = React.forwardRef<
));
SheetOverlay.displayName = "SheetOverlay";
type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
type SheetContentProps = React.ComponentPropsWithoutRef<
typeof DialogPrimitive.Content
> & {
side?: "left" | "right" | "top" | "bottom";
// When the sheet is non-modal (`modal={false}` on Sheet), Radix renders no
// <Dialog.Overlay>, so we draw our own dimmed backdrop to keep the focus.
// Pass `open` so it can play the same fade in/out via `.ac-sheet-overlay`.
modal?: boolean;
open?: boolean;
};
const SheetContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed z-50 flex flex-col bg-[#1F1F1F] shadow-lg transition ease-in-out",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300",
side === "left" &&
"inset-y-0 left-0 h-full border-r border-white/[0.08] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
side === "right" &&
"inset-y-0 right-0 h-full border-l border-white/[0.08] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
side === "top" &&
"inset-x-0 top-0 border-b border-white/[0.08] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
side === "bottom" &&
"inset-x-0 bottom-0 border-t border-white/[0.08] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
className,
>(
(
{ side = "right", className, children, modal = true, open, ...props },
ref,
) => (
<SheetPortal>
{modal ? (
<SheetOverlay />
) : (
<div
aria-hidden
data-state={open ? "open" : "closed"}
className="ac-sheet-overlay fixed inset-0 z-50 bg-black/60"
/>
)}
{...props}
>
{children}
</DialogPrimitive.Content>
</SheetPortal>
));
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed z-50 flex flex-col bg-[#1F1F1F] shadow-lg transition ease-in-out",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300",
side === "left" &&
"inset-y-0 left-0 h-full border-r border-white/[0.08] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
side === "right" &&
"inset-y-0 right-0 h-full border-l border-white/[0.08] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
side === "top" &&
"inset-x-0 top-0 border-b border-white/[0.08] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
side === "bottom" &&
"inset-x-0 bottom-0 border-t border-white/[0.08] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
className,
)}
{...props}
>
{children}
</DialogPrimitive.Content>
</SheetPortal>
),
);
SheetContent.displayName = "SheetContent";
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col gap-1 p-4", className)} {...props} />
);