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

changed some swipe to delete settings

Browse Source
This commit is contained in:
corgifist 2025-08-02 16:38:58 +03:00
parent c6ed5b4685
commit c52cd12b3d
5 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(dashboard)/layout.tsx
View File

@ -11,7 +11,7 @@ export default async function RootLayout({
return (
<SidebarProvider>
<Dashboard />
<main className="relative h-screen isolate">
<main className="relative h-screen isolate" style={{touchAction: "pan-y pinch-zoom"}}>
<PersistenceProvider>
{children}
</PersistenceProvider>

10
src/app/(dashboard)/page.tsx
View File

@ -451,9 +451,9 @@ const ProjectContainer = ({
);
return isMobile ? (
<div className="h-full w-[100% + 5 * var(--spacing)] -mx-5 origin-center">
<SwipeToDelete onDelete={() => deleteProject(project.uuid)} transitionDuration={200} height={210.38} deleteThreshold={45}>
<div className="w-screen bg-background px-5">
<div className=" w-[100% + 5 * var(--spacing)] -mx-5 origin-center overflow-hidden">
<SwipeToDelete onDelete={() => deleteProject(project.uuid)} transitionDuration={200} deleteThreshold={50}>
<div className="w-screen bg-background px-5 py-2 -mt-[1px] h-[calc(100% + 2px)]">
{projectComponent}
</div>
</SwipeToDelete>
@ -517,7 +517,7 @@ export default function Home(): ReactNode {
return (
<SelectContext.Provider value={context}>
<div className="flex flex-col justify-between h-screen overscroll-x-none overflow-x-hidden" style={{ touchAction: deleting ? "none" : "pan-y pinch-zoom" }}>
<div className="flex flex-col justify-between h-screen">
<div className="p-5">
<div className="flex flex-row items-center gap-2">
<StaticSidebarTrigger />
@ -602,7 +602,7 @@ export default function Home(): ReactNode {
</Toggle>
</div>
</StickyTopContainer>
<div className={cn("grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2")}>
<div className={cn("grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-0 sm:gap-4 mt-2")}>
{filteredProjects && filteredProjects.map((project) => <ProjectContainer key={project.uuid} project={project} />)}
</div>
{(filteredProjects != undefined && filteredProjects.length == 0) && (

2
src/app/(editor)/editor/[uuid]/page.tsx
View File

@ -73,5 +73,5 @@ export default function Editor() {
<div className="flex flex-row justify-end grow basis-0" />
</Menubar>
</>
) : <></>;
) : <>Project is invalid (or is it?)</>;
}

27
src/components/swipe-to-delete/SwipeToDelete.tsx
View File

@ -90,11 +90,15 @@ export const SwipeToDelete = ({
startTouchPosition.current = cursorPosition(event);
initTranslate.current = translate;
setTouching(true);
if (!deleting) setDeleting(true);
setDeleting(true);
},
[disabled, touching, translate, deleting, setDeleting]
);
useEffect(() => {
// setDeleting(touching);
}, [touching]);
useEffect(() => {
const root = container.current;
root?.style.setProperty("--rstdiHeight", height + "px");
@ -122,9 +126,8 @@ export const SwipeToDelete = ({
if (rtl && cursorPosition(event) < startTouchPosition.current - initTranslate.current)
return setTranslate(0);
setTranslate(cursorPosition(event) - startTouchPosition.current + initTranslate.current);
if (!deleting) setDeleting(true);
},
[rtl, touching, deleting, setDeleting]
[rtl, touching]
);
@ -181,7 +184,7 @@ export const SwipeToDelete = ({
setTranslate(() => (rtl ? 1 : -1) * deleteWidth);
}
setTouching(() => false);
if (deleting) setDeleting(false);
setDeleting(false);
if (deleteWithoutConfirm) onDeleteClick();
},
[containerWidth, deleteWidth, deleteWithoutConfirmThreshold, onDeleteClick, rtl, translate, deleting, setDeleting]
@ -207,22 +210,6 @@ export const SwipeToDelete = ({
};
}, [onMouseMove, onMouseUp, onTouchMove, touching]);
// disabling scrolling when swiping to delete
useEffect(() => {
const handleScroll = (e: Event) => {
if (deleting) {
e.preventDefault();
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [deleting]);
return (
<div id={id} className={`rstdi${internalDeleting ? " deleting" : ""} ${className}`} ref={container}>
<div className={`delete${internalDeleting ? " deleting" : ""}`}>

15
src/components/swipe-to-delete/styles.css
View File

@ -13,11 +13,10 @@
width: auto;
position: relative;
box-sizing: border-box;
overflow: hidden;
height: 100%;
max-height: 100%;
overflow: hidden;
overscroll-behavior: none;
overflow: hidden;
}
.rstdi *,
@ -27,7 +26,7 @@
}
.rstdi.deleting {
transition: all var(--rstdiTransitionDuration) ease-out;
transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
opacity: 0;
max-height: 0;
}
@ -40,7 +39,7 @@
}
.rstdi .content.transition {
transition: all var(--rstdiTransitionDuration) ease-out;
transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
}
.rstdi .content.deleting {
@ -48,14 +47,14 @@
width: auto;
position: relative;
transform: translateX(-100%);
transition: all var(--rstdiTransitionDuration) ease-out;
transition: all var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
}
.rstdi .delete {
position: absolute;
right: 0;
margin-top: 1px;
height: calc(100% - 3px);
margin-top: 0px;
height: 100%;
width: 100%;
top: 0;
background: var(--rstdiDeleteColor);
@ -67,7 +66,7 @@
.rstdi .delete button {
width: var(--rstdiDeleteWidth);
transition: transform var(--rstdiTransitionDuration) ease-out;
transition: transform var(--rstdiTransitionDuration) cubic-bezier(0.33, 1, 0.68, 1);
transform: translateX(var(--rstdiButtonMarginLeft));
text-align: center;
height: 100%;