fix: animation fix

pengx17 · Aug 30, 2021 · 7e4957f · 7e4957f
1 parent 2e9a60d
commit 7e4957f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/src/PageTabs.tsx b/src/PageTabs.tsx
@@ -5,6 +5,7 @@ import keyboardjs from "keyboardjs";
 import { us } from "keyboardjs/locales/us";
 import React from "react";
 import { useDeepCompareEffect, useLatest } from "react-use";
+
 import "./PageTabs.css";
 import { ITabInfo } from "./types";
 import {
@@ -110,7 +111,7 @@ function Tabs({
         };
         const onDragOver: React.DragEventHandler = (e) => {
           if (draggingTab) {
-            // Prevent fly back animation
+            // Prevent drag fly back animation
             e.preventDefault();
             onSwapTab(tab, draggingTab);
           }
@@ -215,15 +216,10 @@ export function useActivePage() {
 export function PageTabs(): JSX.Element {
   const [tabs, setTabs] = useOpeningPageTabs();
   const activePage = useActivePage();
-  useAdaptMainUIStyle();
 
-  React.useEffect(() => {
-    if (tabs.length > (activePage ? 1 : 0) || tabs.some((t) => t.pinned)) {
-      logseq.showMainUI();
-    } else {
-      logseq.hideMainUI();
-    }
-  }, [tabs, activePage]);
+  useAdaptMainUIStyle(
+    tabs.length > (activePage ? 1 : 0) || tabs.some((t) => t.pinned)
+  );
 
   const onCloseTab = useEventCallback((tab: ITabInfo, idx?: number) => {
     if (idx == null) {

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,7 @@
 import "@logseq/libs";
 import "virtual:windi.css";
 
-import './reset.css';
+import "./reset.css";
 
 import React from "react";
 import ReactDOM from "react-dom";
@@ -24,8 +24,7 @@ function main() {
   logseq.setMainUIInlineStyle({
     zIndex: 0,
     position: "fixed",
-    left: '0',
-    height: '28px'
+    left: "0",
   });
 
   // @ts-expect-error

diff --git a/src/utils.ts b/src/utils.ts
@@ -120,8 +120,9 @@ export function useOpeningPageTabs() {
   return [tabs, setTabs] as const;
 }
 
-export function useAdaptMainUIStyle() {
+export function useAdaptMainUIStyle(show: boolean) {
   React.useEffect(() => {
+    logseq.showMainUI(); // always on
     const listener = () => {
       const leftHeader = top.document.querySelector(
         "#left-container .cp__header"
@@ -132,8 +133,9 @@ export function useAdaptMainUIStyle() {
         logseq.setMainUIInlineStyle({
           zIndex: 9,
           top: `${topOffset + 2}px`,
+          height: show ? "28px" : "0px",
           width: width - 10 + "px", // 10 is the width of the scrollbar
-          transition: "width 0.2s",
+          transition: "width 0.2s, height 0.2s",
         });
       }
     };
@@ -143,7 +145,7 @@ export function useAdaptMainUIStyle() {
     return () => {
       ob.disconnect();
     };
-  }, []);
+  }, [show]);
 }
 
 export const isMac = () => {