animation on collapse

mienaiyami · Oct 27, 2021 · 639b4d5 · 639b4d5
1 parent b68f246
commit 639b4d5
Show file tree

Hide file tree

Showing 9 changed files with 501 additions and 197 deletions.
diff --git a/electron/main.ts b/electron/main.ts
@@ -111,7 +111,6 @@ const registerListener = () => {
         createWindow(link);
     });
 };
-console.log("aaaaaaaaaaaa");
 app.on("ready", async () => {
     registerListener();
     createWindow();

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "mangareader",
     "productName": "Manga Reader",
-    "version": "2.1.1",
+    "version": "2.1.3",
     "description": "App to read manga on desktop",
     "main": "./.webpack/main/index.js",
     "author": {

diff --git a/src/Components/BookmarkTab.tsx b/src/Components/BookmarkTab.tsx
@@ -1,32 +1,42 @@
-import { ReactElement, useContext } from "react";
+import { forwardRef, ReactElement, useContext } from "react";
 import { AppContext } from "../App";
 import BookmarkHistoryListItem from "./BookmarkHistoryListItem";
 
-const BookmarkTab = (): ReactElement => {
-    const { bookmarks, setBookmarks } = useContext(AppContext);
+const BookmarkTab = forwardRef(
+    (
+        { bookmarkTabDisplay }: { bookmarkTabDisplay: boolean },
+        ref: React.ForwardedRef<HTMLDivElement>
+    ): ReactElement => {
+        const { bookmarks, setBookmarks } = useContext(AppContext);
 
-    return (
-        <div className="contTab listCont" id="bookmarksTab">
-            <h2>Bookmarks</h2>
-            <div className="location-cont">
-                {bookmarks.length === 0 ? (
-                    <p>No Bookmarks...</p>
-                ) : (
-                    <ol>
-                        {bookmarks.map((e, i) => (
-                            <BookmarkHistoryListItem
-                                isHistory={false}
-                                isBookmark={true}
-                                index={i}
-                                {...e}
-                                key={e.link}
-                            />
-                        ))}
-                    </ol>
-                )}
+        return (
+            <div
+                className="contTab listCont"
+                style={{ display: bookmarkTabDisplay ? "flex" : "none" }}
+                id="bookmarksTab"
+                ref={ref}
+            >
+                <h2>Bookmarks</h2>
+                <div className="location-cont">
+                    {bookmarks.length === 0 ? (
+                        <p>No Bookmarks...</p>
+                    ) : (
+                        <ol>
+                            {bookmarks.map((e, i) => (
+                                <BookmarkHistoryListItem
+                                    isHistory={false}
+                                    isBookmark={true}
+                                    index={i}
+                                    {...e}
+                                    key={e.link}
+                                />
+                            ))}
+                        </ol>
+                    )}
+                </div>
             </div>
-        </div>
-    );
-};
+        );
+    }
+);
 
 export default BookmarkTab;
diff --git a/src/Components/HistoryTab.tsx b/src/Components/HistoryTab.tsx
@@ -1,54 +1,64 @@
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ReactElement, useContext } from "react";
+import { forwardRef, ReactElement, useContext } from "react";
 import { AppContext } from "../App";
 import BookmarkHistoryListItem from "./BookmarkHistoryListItem";
 
-const HistoryTab = (): ReactElement => {
-    const { history, setHistory } = useContext(AppContext);
-    return (
-        <div className="contTab listCont" id="historyTab">
-            <h2>
-                History
-                <button
-                    onFocus={(e) => e.currentTarget.blur()}
-                    onClick={() => {
-                        window.electron.dialog
-                            .showMessageBox(window.electron.getCurrentWindow(), {
-                                title: "Warning",
-                                type: "warning",
-                                message: "Are you sure you want to clear history",
-                                buttons: ["Yes", "No"],
-                            })
-                            .then((res) => {
-                                if (res && res.response === 0) setHistory([]);
-                            });
-                    }}
-                    tabIndex={-1}
-                    data-tooltip="Clear All"
-                >
-                    <FontAwesomeIcon icon={faTrash} />
-                </button>
-            </h2>
-            <div className="location-cont">
-                {history.length === 0 ? (
-                    <p>No History...</p>
-                ) : (
-                    <ol>
-                        {history.map((e, i) => (
-                            <BookmarkHistoryListItem
-                                isBookmark={false}
-                                isHistory={true}
-                                index={i}
-                                {...e}
-                                key={e.date}
-                            />
-                        ))}
-                    </ol>
-                )}
+const HistoryTab = forwardRef(
+    (
+        { historyTabDisplay }: { historyTabDisplay: boolean },
+        ref: React.ForwardedRef<HTMLDivElement>
+    ): ReactElement => {
+        const { history, setHistory } = useContext(AppContext);
+        return (
+            <div
+                className="contTab listCont"
+                style={{ display: historyTabDisplay ? "flex" : "none" }}
+                id="historyTab"
+                ref={ref}
+            >
+                <h2>
+                    History
+                    <button
+                        onFocus={(e) => e.currentTarget.blur()}
+                        onClick={() => {
+                            window.electron.dialog
+                                .showMessageBox(window.electron.getCurrentWindow(), {
+                                    title: "Warning",
+                                    type: "warning",
+                                    message: "Are you sure you want to clear history",
+                                    buttons: ["Yes", "No"],
+                                })
+                                .then((res) => {
+                                    if (res && res.response === 0) setHistory([]);
+                                });
+                        }}
+                        tabIndex={-1}
+                        data-tooltip="Clear All"
+                    >
+                        <FontAwesomeIcon icon={faTrash} />
+                    </button>
+                </h2>
+                <div className="location-cont">
+                    {history.length === 0 ? (
+                        <p>No History...</p>
+                    ) : (
+                        <ol>
+                            {history.map((e, i) => (
+                                <BookmarkHistoryListItem
+                                    isBookmark={false}
+                                    isHistory={true}
+                                    index={i}
+                                    {...e}
+                                    key={e.date}
+                                />
+                            ))}
+                        </ol>
+                    )}
+                </div>
             </div>
-        </div>
-    );
-};
+        );
+    }
+);
 
 export default HistoryTab;
diff --git a/src/Components/InfoOnHover.tsx b/src/Components/InfoOnHover.tsx
@@ -12,18 +12,21 @@ const InfoOnHover = (props: IhoverInfo) => {
     const ref = useRef<HTMLDivElement>(null);
     useLayoutEffect(() => {
         if (ref.current) {
-            const hoverInfoWidth = 300;
             if (document.querySelector(props.parent)) {
                 let x = 0;
                 if (props.parent === "#bookmarksTab .location-cont") {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     x = document.querySelector<HTMLDivElement>(props.parent)!.getBoundingClientRect().right;
+                    if (x + ref.current.offsetWidth > window.innerWidth) {
+                        x =
+                            document.querySelector<HTMLDivElement>(props.parent)!.getBoundingClientRect().left -
+                            ref.current.offsetWidth;
+                    }
                 }
                 if (props.parent === "#historyTab .location-cont") {
                     x =
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                         document.querySelector<HTMLDivElement>(props.parent)!.getBoundingClientRect().x -
-                        hoverInfoWidth;
+                        ref.current.offsetWidth;
                 }
                 let y = props.y - window.app.titleBarHeight;
                 if (y > window.innerHeight - ref.current.offsetHeight - window.app.titleBarHeight - 5) {