feat(core): prevent the floating sidebar from showing immediately after the sidebar is closed (#8531)

close PD-1763

https://github.com/user-attachments/assets/a8346098-5f87-4297-bdb6-885f5486ce78
This commit is contained in:
JimmFly
2024-10-21 05:26:02 +00:00
parent 90ef12eaca
commit d1783b6f8c
4 changed files with 26 additions and 14 deletions

View File

@@ -36,6 +36,11 @@ export class AppSidebar extends Entity {
*/
hovering$ = new LiveData<boolean>(false);
/**
* prevent it from setting hovering once when the sidebar is closed
*/
preventHovering$ = new LiveData<boolean>(false);
/**
* small screen mode, will disable hover effect
*/
@@ -63,6 +68,10 @@ export class AppSidebar extends Entity {
this.hovering$.next(hoverFloating);
};
setPreventHovering = (preventHovering: boolean) => {
this.preventHovering$.next(preventHovering);
};
setResizing = (resizing: boolean) => {
this.resizing$.next(resizing);
};

View File

@@ -16,15 +16,30 @@ export const SidebarSwitch = ({
}) => {
const appSidebarService = useService(AppSidebarService).sidebar;
const open = useLiveData(appSidebarService.open$);
const preventHovering = useLiveData(appSidebarService.preventHovering$);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const switchRef = useRef<HTMLDivElement>(null);
const handleMouseEnter = useCallback(() => {
if (open || preventHovering) {
return;
}
appSidebarService.setHovering(true);
}, [appSidebarService]);
}, [appSidebarService, open, preventHovering]);
const handleClickSwitch = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
if (open) {
timeoutRef.current = setTimeout(() => {
appSidebarService.setPreventHovering(false);
}, 500);
}
appSidebarService.setPreventHovering(true);
appSidebarService.toggleSidebar();
}, [appSidebarService]);
}, [appSidebarService, open]);
const t = useI18n();
const tooltipContent = open