feat: Move the tools from statusbar to navbar & fix: History list dis…

…playing issue
koujiangqq · Jun 6, 2024 · 012a9e8 · 012a9e8
1 parent 95d8bca
commit 012a9e8
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 110 deletions.
diff --git a/src/components/navbar/ToolbarItem.tsx b/src/components/navbar/ToolbarItem.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+interface BarItemProps {
+    title: string
+    onClick?: () => void
+    className?: string
+}
+
+const ToolbarItem: React.FC<BarItemProps> = (props) => {
+    const handleClick = () => {
+        if(props.onClick) props.onClick();
+    };
+
+    return (
+        <div
+            className={"toolbar-item"+ (props.className ? " "+ props.className : "")}
+            onClick={() => handleClick()}>
+            <span>{props.title}</span>
+        </div>
+    );
+}
+
+export default ToolbarItem;
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -1,8 +1,12 @@
-import React from "react";
-import { Tooltip } from "react-tooltip";
+import React, { useRef } from "react";
 import Toggle from "@nocp/toggle";
 
 import ModeButton from "@/components/navbar/ModeButton";
+import ToolbarItem from "@/components/navbar/ToolbarItem";
+import Dialog from "@/components/Dialog";
+import ConvertingDialog from "@/dialogs/ConvertingDialog";
+import SeniorityDialog from "@/dialogs/SeniorityDialog";
+import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
 import Storage from "@/utils/Storage";
 import useThemeDetector from "@/hooks/useThemeDetector";
@@ -13,6 +17,9 @@ import GraphingIcon from "@/icons/graphing_mode.svg";
 import ProgrammingIcon from "@/icons/programming_mode.svg";
 
 const Navbar: React.FC = () => {
+    const convertingDialogRef = useRef<Dialog>(null);
+    const seniorityDialogRef = useRef<Dialog>(null);
+    const currencyDialogRef = useRef<Dialog>(null);
     const themeValue = new Storage().getItem("theme", useThemeDetector());
 
     const handleToggle = (isActive: boolean) => {
@@ -21,28 +28,44 @@ const Navbar: React.FC = () => {
     };
 
     return (
-        <nav className="navbar">
-            <div className="mode-switcher">
-                <ModeButton name="通用" mode={Mode.GENERAL} icon={GeneralIcon}/>
-                <ModeButton name="图像" mode={Mode.GRAPHING} icon={GraphingIcon}/>
-                <ModeButton name="程序员" mode={Mode.PROGRAMMING} icon={ProgrammingIcon}/>
-            </div>
-
-            <div className="theme-switcher">
-                <Toggle
-                    data-tooltip-id="theme-switcher"
-                    data-tooltip-content="浅色 / 深色主题"
-                    onToggle={(e) => handleToggle(e)}
-                    defaultToggleValue={themeValue === Theme.LIGHT}/>
-
-                <Tooltip
-                    id="theme-switcher"
-                    place="right"
-                    opacity={1}
-                    border="1px solid var(--ca-gray2)"
-                    delayShow={500}/>
-            </div>
-        </nav>
+        <>
+            <nav className="navbar">
+                <div className="split">
+                    <div className="mode-switcher">
+                        <ModeButton name="通用" mode={Mode.GENERAL} icon={GeneralIcon}/>
+                        <ModeButton name="图像" mode={Mode.GRAPHING} icon={GraphingIcon}/>
+                        <ModeButton name="程序员" mode={Mode.PROGRAMMING} icon={ProgrammingIcon}/>
+                    </div>
+                </div>
+
+                <div className="split">
+                    <div className="toolbar">
+                        <ToolbarItem title="汇率" onClick={() => currencyDialogRef.current?.open()}/>
+                        <ToolbarItem title="辈分计算" onClick={() => seniorityDialogRef.current?.open()}/>
+                        <ToolbarItem title="单位换算" onClick={() => convertingDialogRef.current?.open()}/>
+                    </div>
+
+                    <div className="theme-switcher-container">
+                        <div className="theme-switcher-name">
+                            <span>浅色 / 深色主题</span>
+                        </div>
+
+                        <div className="theme-switcher">
+                            <Toggle
+                                data-tooltip-id="theme-switcher"
+                                data-tooltip-content="浅色 / 深色主题"
+                                onToggle={(e) => handleToggle(e)}
+                                defaultToggleValue={themeValue === Theme.LIGHT}/>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {/* Dialogs */}
+            <ConvertingDialog ref={convertingDialogRef}/>
+            <SeniorityDialog ref={seniorityDialogRef}/>
+            <CurrencyDialog ref={currencyDialogRef}/>
+        </>
     );
 };
 

diff --git a/src/components/sidebar/History.tsx b/src/components/sidebar/History.tsx
@@ -118,10 +118,12 @@ const History: React.FC = () => {
                 title="历史记录"
                 tip={<><kbd>ctrl+d</kbd> 清空记录</>}
                 onContextMenu={onContextMenu}>
-                <div className="history-main" id="history-list" ref={listElemRef}>
-                    {
-                        list.map((item, index) => <HistoryItem {...item} key={index}/>)
-                    }
+                <div className="history-container">
+                    <div className="history-main" id="history-list" ref={listElemRef}>
+                        {
+                            list.map((item, index) => <HistoryItem {...item} key={index}/>)
+                        }
+                    </div>
                 </div>
             </SidebarPage>
             {contextMenu}

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -20,7 +20,7 @@ import MainContext from "@/contexts/MainContext";
 const Sidebar: React.FC = () => {
     const { mode } = useContext(MainContext);
     const [sidebarOpen, setSidebarOpen] = useState<boolean>(!Utils.isMobile());
-    const [width, setWidth] = useState<number>(382);
+    const [width, setWidth] = useState<number>(362);
     const themeValue = new Storage().getItem("theme", useThemeDetector());
 
     const layoutSwitch = (calcMode: Mode) => {
@@ -84,7 +84,7 @@ const Sidebar: React.FC = () => {
             <Sash
                 direction="vertical"
                 defaultValue={width}
-                minValue={362}
+                minValue={342}
                 maxValue={620}
                 side="left"
                 disabled={mode === Mode.GRAPHING}

diff --git a/src/components/statusbar/index.tsx b/src/components/statusbar/index.tsx
@@ -10,9 +10,6 @@ import BarItem from "@/components/statusbar/BarItem";
 import Dialog from "@/components/Dialog";
 import AboutDialog from "@/dialogs/AboutDialog";
 import ShortcutDialog from "@/dialogs/ShortcutDialog";
-import ConvertingDialog from "@/dialogs/ConvertingDialog";
-import SeniorityDialog from "@/dialogs/SeniorityDialog";
-import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
 import Emitter from "@/utils/Emitter";
 import { version } from "@/global";
@@ -26,9 +23,6 @@ const StatusBar: React.FC = () => {
     const [fps, setFPS] = useState<number>(0);
     const aboutDialogRef = useRef<Dialog>(null);
     const shortcutDialogRef = useRef<Dialog>(null);
-    const convertingDialogRef = useRef<Dialog>(null);
-    const seniorityDialogRef = useRef<Dialog>(null);
-    const currencyDialogRef = useRef<Dialog>(null);
 
     useEmitter([
         ["graphing-fps", (currentFPS: number) => setFPS(currentFPS)],
@@ -68,9 +62,6 @@ const StatusBar: React.FC = () => {
                         mode === Mode.GRAPHING &&
                         <BarItem title="重载" onClick={() => new Emitter().emit("graphing-reload")} tooltip="函数图像渲染重载"/>
                     }
-                    <BarItem title="汇率" onClick={() => currencyDialogRef.current?.open()}/>
-                    <BarItem title="辈分计算" onClick={() => seniorityDialogRef.current?.open()}/>
-                    <BarItem title="单位换算" onClick={() => convertingDialogRef.current?.open()}/>
                     <BarItem title="快捷键" onClick={() => shortcutDialogRef.current?.open()}/>
                     <BarItem title={"Calcium "+ version} onClick={() => new Emitter().emit("open-about-dialog")}/>
                 </div>
@@ -79,9 +70,6 @@ const StatusBar: React.FC = () => {
             {/* Dialogs */}
             <AboutDialog ref={aboutDialogRef}/>
             <ShortcutDialog ref={shortcutDialogRef}/>
-            <ConvertingDialog ref={convertingDialogRef}/>
-            <SeniorityDialog ref={seniorityDialogRef}/>
-            <CurrencyDialog ref={currencyDialogRef}/>
         </>
     );
 }

diff --git a/src/style/calculator/mixin.less b/src/style/calculator/mixin.less
@@ -1,3 +1,9 @@
+.navbar-label-style(@color: var(--ca-gray-light)) {
+    color: @color;
+    font-size: 11pt;
+    font-weight: bold;
+}
+
 .button-style() {
     display: flex;
     background-color: transparent;

diff --git a/src/style/navbar.less b/src/style/navbar.less
@@ -5,7 +5,10 @@ nav.navbar {
     background-color: var(--ca-light1);
     box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
     z-index: 2;
-    .mode-switcher {
+    .split {
+        display: flex;
+    }
+    .split .mode-switcher {
         display: flex;
         .mode-button-container {
             display: flex;
@@ -30,9 +33,7 @@ nav.navbar {
                     height: 100%;
                     margin-left: 7px;
                     span {
-                        color: var(--ca-gray10);
-                        font-size: 11pt;
-                        font-weight: bold;
+                        .navbar-label-style(var(--ca-gray10));
                     }
                 }
                 &:hover {
@@ -54,22 +55,44 @@ nav.navbar {
             }
         }
     }
-    .title-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        span {
-            color: var(--ca-gray1);
-            font-size: 13pt;
+    .split {
+        .toolbar {
+            display: flex;
+            margin-right: 15px;
+            .toolbar-item {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 0 10px;
+                cursor: pointer;
+                span {
+                    .navbar-label-style(var(--ca-gray6));
+                    transition: color 70ms ease;
+                    &:hover {
+                        color: var(--ca-gray-light);
+                    }
+                }
+            }
         }
-    }
-    .theme-switcher {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 15px 10px;
-        .toggle {
-            margin: 0 auto;
+        .theme-switcher-container {
+            display: flex;
+            .theme-switcher-name {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                span {
+                    .navbar-label-style();
+                }
+            }
+            .theme-switcher {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 15px;
+                .toggle {
+                    margin: 0 auto;
+                }
+            }
         }
     }
 }