fix: Mobile mode switching issue & perf: Cancel the preloading of web…

… workers
nocpiun · Jun 10, 2024 · e880d8d · e880d8d · github-actions · Jun 10, 2024
1 parent d334636
commit e880d8d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 28 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,9 +5,10 @@ import { shortcuts } from "@/global";
 import { Mode, RenderedFunction } from "@/types";
 import Utils from "@/utils/Utils";
 import Storage from "@/utils/Storage";
+import Emitter from "@/utils/Emitter";
 import { Axis } from "@/renderer/Graphics";
 
-import usePreloader from "@/hooks/usePreloader";
+// import usePreloader from "@/hooks/usePreloader";
 
 // Layout
 import "katex/dist/katex.min.css";
@@ -31,10 +32,13 @@ const App: React.FC = () => {
 	const [functionList, setFunctionList] = useState<RenderedFunction[]>([]);
 	const [axis, setAxisType] = useState<Axis>(Axis.CARTESIAN);
 
-	usePreloader(new URL("@/workers/graphing.worker.ts", import.meta.url), "script");
-	usePreloader(new URL("@/workers/calculating.worker.ts", import.meta.url), "script");
+	// usePreloader(new URL("@/workers/graphing.worker.ts", import.meta.url), "script");
+	// usePreloader(new URL("@/workers/calculating.worker.ts", import.meta.url), "script");
 
 	useEffect(() => {
+		// Default Mode
+		new Emitter().emit("switch-mode", new Storage().getItem("ca-mode", Mode.GENERAL) as Mode);
+
 		document.body.addEventListener("keydown", (e: KeyboardEvent) => {
 			shortcuts.forEach((shortcut, key) => {
 				if(
@@ -74,7 +78,7 @@ const App: React.FC = () => {
 		<main className="calcium" id="calcium-main">
 			<MainContext.Provider value={{ mode, setMode, functionList, setFunctionList, axis, setAxisType }}>
 				<AliveScope>
-					{!Utils.isMobile() && <Navbar />}
+					<Navbar />
 					<div className="app">
 						<Sidebar />
 						<Calculator />

diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import Toggle from "@nocp/toggle";
 
 import ModeButton from "@/components/navbar/ModeButton";
@@ -8,7 +8,6 @@ import ConvertingDialog from "@/dialogs/ConvertingDialog";
 import SeniorityDialog from "@/dialogs/SeniorityDialog";
 import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
-import Emitter from "@/utils/Emitter";
 import Storage from "@/utils/Storage";
 import useThemeDetector from "@/hooks/useThemeDetector";
 import { Mode, Theme } from "@/types";
@@ -28,11 +27,6 @@ const Navbar: React.FC = () => {
         new Storage().setItem("ca-theme", isActive ? Theme.LIGHT : Theme.DARK);
     };
 
-    useEffect(() => {
-        // default
-        new Emitter().emit("switch-mode", new Storage().getItem("ca-mode", Mode.GENERAL) as Mode);
-    }, []);
-
     return (
         <>
             <nav className="navbar">

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -56,13 +56,12 @@ const Sidebar: React.FC = () => {
     return (
         <aside className={"sidebar-container"+ (sidebarOpen ? " open" : "")} style={!Utils.isMobile() ? { width } : {}}>
             {/* Mobile only */}
-            {Utils.isMobile() && <div className="mobile-control-panel">
+            {<div className="mobile-control-panel">
                 <div className="sidebar-title">
                     <span>Calcium {version}</span>
                 </div>
 
                 <div className="mode-switcher-wrapper">
-                    <div className="mode-switcher-tab-slider" style={{ transform: "translateY("+ mode * 100 +"%)" }}/>
                     <div className="mode-switcher">
                         <ModeButton name="通用" mode={Mode.GENERAL}/>
                         <ModeButton name="图像" mode={Mode.GRAPHING}/>

diff --git a/src/style/adaptation/default.less b/src/style/adaptation/default.less
@@ -20,12 +20,6 @@
     }
 }
 
-@media screen and (max-width: 1480px) {
-    .mode-switcher {
-        min-width: 50px;
-    }
-}
-
 @media screen and (min-width: 1024px) {
     .sidebar-container {
         min-width: 315px;

diff --git a/src/style/adaptation/mobile.less b/src/style/adaptation/mobile.less
@@ -3,6 +3,9 @@
         display: block !important;
     }
     main {
+        nav.navbar {
+            display: none;
+        }
         .app {
             border-top: none !important;
             aside {
@@ -21,6 +24,7 @@
                     }
                 }
                 .mobile-control-panel {
+                    display: block;
                     width: 100%;
                     height: 100%;
                     border: none;

diff --git a/src/style/sidebar.less b/src/style/sidebar.less
@@ -3,7 +3,7 @@
     flex-direction: row;
     .border-line(top);
     .mobile-control-panel {
-        display: flex;
+        display: none;
         flex-direction: column;
         justify-content: space-between;
         width: 65px;
@@ -18,14 +18,6 @@
         }
         .mode-switcher-wrapper {
             position: relative;
-            .mode-switcher-tab-slider {
-                position: absolute;
-                left: 0;
-                width: 3px;
-                height: 33%;
-                background-color: var(--ca-blue4);
-                transition: transform .15s ease;
-            }
             .mode-switcher {
                 font-size: 0;
                 .mode-button-container {