ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-05 18:15:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: project description now flies from the bottom in the mobile

Browse Source
This commit is contained in:
corgifist 2025-07-27 02:26:48 +03:00
parent 93fb66dc2e
commit 509691534b
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/page.tsx
View File

@ -236,15 +236,17 @@ const ProjectDropdown = ({
<EllipsisIcon /> <EllipsisIcon />
</Button> </Button>
</SheetTrigger> </SheetTrigger>
<SheetContent side="bottom" className="px-2 pb-safe-or-2 gap-1"> <SheetContent side="bottom" className="px-safe-or-2 pb-safe-or-2 gap-1">
<SheetHeader className="m-0 p-2 gap-0"> <SheetHeader className="m-0 p-2 gap-0">
<div className="flex flex-row items-center w-full"> <div className="flex flex-row items-center w-full">
<SheetTitle className="font-semibold">{project.title}</SheetTitle> <SheetTitle className="font-semibold">{project.title}</SheetTitle>
<Button variant="ghost" onClick={() => setRenameDialogOpen(true)}> <SheetClose asChild>
<PencilIcon /> <span className="sr-only">Rename</span> <Button variant="ghost" onClick={() => setRenameDialogOpen(true)}>
</Button> <PencilIcon /> <span className="sr-only">Rename</span>
</Button>
</SheetClose>
</div> </div>
<SheetDescription>Actions for {project.title}</SheetDescription> <SheetDescription>Additional Options for the Project</SheetDescription>
</SheetHeader> </SheetHeader>
<Separator /> <Separator />
<SheetClose asChild> <SheetClose asChild>
@ -329,8 +331,32 @@ const ProjectDropdown = ({
); );
}; };
const ProjectDescription = ({ project }: { project: Project }): ReactNode => { const ProjectDescription = ({ project }: { project: Project}): ReactNode => {
const isMobile = useIsMobile();
if (!project.description) return <></>; if (!project.description) return <></>;
if (isMobile) {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon">
<InfoIcon />
</Button>
</SheetTrigger>
<SheetContent side="bottom">
<SheetHeader className="m-0 p-2 gap-0">
<SheetTitle>{project.title} Description</SheetTitle>
<SheetDescription>Additional Information About the Project</SheetDescription>
</SheetHeader>
<Separator/>
<div className="p-2">
{project.description}
</div>
</SheetContent>
</Sheet>
);
}
return ( return (
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
@ -339,7 +365,7 @@ const ProjectDescription = ({ project }: { project: Project }): ReactNode => {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-80"> <PopoverContent className="w-80">
<h3 className="font-semibold text-lg">Project Description</h3> <h3 className="font-semibold text-lg">{project.title} Description</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{project.description} {project.description}
</p> </p>
@ -371,6 +397,7 @@ const ProjectContainer = ({
}; };
// Automatically add UUID to the selectedProjects // Automatically add UUID to the selectedProjects
// useEffect is required here because we can't update SelectContext while rendering
useEffect(() => { useEffect(() => {
if (mounted) { if (mounted) {
if (selected) { if (selected) {
@ -398,12 +425,12 @@ const ProjectContainer = ({
{project.editDate && <p className="text-sm text-secondary-foreground" data-selectable="true">Last Edit Date: {date.toLocaleDateString()}, {date.toLocaleTimeString()}</p>} {project.editDate && <p className="text-sm text-secondary-foreground" data-selectable="true">Last Edit Date: {date.toLocaleDateString()}, {date.toLocaleTimeString()}</p>}
</div> </div>
<div className="flex flex-col lg:xl:flex-row items-center gap-1" data-selectable="true"> <div className="flex flex-col lg:xl:flex-row items-center gap-1" data-selectable="true">
{!selecting && <ProjectDescription project={project} />} {!selecting && <ProjectDescription project={project}/>}
<ProjectDropdown selected={selected} setSelected={setSelected} project={project} /> <ProjectDropdown selected={selected} setSelected={setSelected} project={project} />
</div> </div>
</div> </div>
{selecting && ( {selecting && (
<div className="absolute top-0 right-0 p-2"> <div className="absolute top-0 right-0 p-5">
<Checkbox checked={selected} onCheckedChange={(checked) => setSelected(checked as boolean)} /> <Checkbox checked={selected} onCheckedChange={(checked) => setSelected(checked as boolean)} />
</div> </div>
)} )}

3
src/components/ui/sheet.tsx
View File

@ -67,7 +67,8 @@ function SheetContent({
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" && side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className "px-safe-or-2 pb-safe-or-2 gap-1",
className,
)} )}
{...props} {...props}
> >