feat(core): prevent the floating sidebar from showing immediately aft…

…er the sidebar is closed (toeverything#8531) close PD-1763 https://github.com/user-attachments/assets/a8346098-5f87-4297-bdb6-885f5486ce78
tantanorange · Oct 21, 2024 · d1783b6 · d1783b6
1 parent 90ef12e
commit d1783b6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts b/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts
@@ -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);
   };

diff --git a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx
@@ -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

diff --git a/tests/affine-desktop/e2e/tabs.spec.ts b/tests/affine-desktop/e2e/tabs.spec.ts
@@ -93,9 +93,6 @@ test('Collapse Sidebar', async ({ page }) => {
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
   const sliderBarArea = page.getByTestId('app-sidebar');
-  await sliderBarArea.hover();
-  await page.mouse.move(600, 500);
-  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 });
 
@@ -104,9 +101,6 @@ test('Expand Sidebar', async ({ page }) => {
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
   const sliderBarArea = page.getByTestId('app-sidebar');
-  await sliderBarArea.hover();
-  await page.mouse.move(600, 500);
-  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 
   await page

diff --git a/tests/affine-local/e2e/layout.spec.ts b/tests/affine-local/e2e/layout.spec.ts
@@ -10,9 +10,6 @@ test('Collapse Sidebar', async ({ page }) => {
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
   const sliderBarArea = page.getByTestId('app-sidebar');
-  await sliderBarArea.hover();
-  await page.mouse.move(300, 300);
-  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 });
 
@@ -23,9 +20,6 @@ test('Expand Sidebar', async ({ page }) => {
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
   const sliderBarArea = page.getByTestId('sliderBar-inner');
-  await sliderBarArea.hover();
-  await page.mouse.move(300, 300);
-  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 
   await page