fix(adaptation): Dark theme bug & incorrect appearance of graphing mo…

…de & fix: Functional error of graphing mode in mobile client
nocpiun · May 18, 2024 · 06cd42e · 06cd42e · github-actions · May 18, 2024
1 parent 97eb5c6
commit 06cd42e
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 14 deletions.
diff --git a/src/components/InputButton.tsx b/src/components/InputButton.tsx
@@ -22,7 +22,7 @@ const InputButton: React.FC<InputButtonProps> = (props) => {
     const inputValue = props.inputValue ?? props.symbol;
     const id = useId();
 
-    const clickHandle = () => {
+    const handleClick = () => {
         if(props.onClick) {
             props.onClick();
             return;
@@ -48,7 +48,7 @@ const InputButton: React.FC<InputButtonProps> = (props) => {
         <div className="keypad-button-container" style={{ flexGrow: props.grow }}>
             <button
                 className="keypad-button"
-                onClick={() => clickHandle()}
+                onClick={() => handleClick()}
                 disabled={disabled}
                 style={props.style}
                 tabIndex={-1}

diff --git a/src/components/sidebar/FunctionList.tsx b/src/components/sidebar/FunctionList.tsx
@@ -78,6 +78,7 @@ const FunctionList: React.FC = () => {
 
         switch(symbol) {
             case "Backspace":
+            case "\\text{Del}":
                 ctx.backspace();
                 break;
             case "Enter":
@@ -194,13 +195,13 @@ const FunctionList: React.FC = () => {
 
     return (
         <>
-            <SidebarPage
+            {!Utils.isMobile() && <SidebarPage
                 id="function-list"
                 title="函数列表"
                 tip={<>最多添加{maxFunctionAmount}个函数</>} 
                 onContextMenu={onContextMenu}>
                 <div className="function-list-main">{mainSection}</div>
-            </SidebarPage>
+            </SidebarPage>}
             {contextMenu}
 
             {/* Portal to `/src/views/graphing/index.tsx` */}

diff --git a/src/style/adaptation/mobile.less b/src/style/adaptation/mobile.less
@@ -93,7 +93,7 @@
                 }
                 .mobile-input-container {
                     display: flex;
-                    background-color: #fff;
+                    background-color: var(--ca-light1);
                 }
                 .graphing-container {
                     height: 49%;
@@ -107,6 +107,15 @@
                 }
                 .mobile-graphing-input-container {
                     display: flex;
+                    .function-input-box .function-input-box-tag {
+                        margin-left: 25px;
+                        .select {
+                            width: 50px;
+                            .select-item {
+                                padding-top: 8px;
+                            }
+                        }
+                    }
                 }
             }
         }

diff --git a/src/style/calculator/calculator.less b/src/style/calculator/calculator.less
@@ -182,9 +182,7 @@
                         flex-direction: column;
                         justify-content: space-between;
                         height: 100%;
-                        .keypad-tab-name {
-                            color: var(--ca-gray7);
-                        }
+                        color: var(--ca-gray7);
                     }
                     &.open .keypad-tab-name {
                         color: var(--ca-gray-light);
@@ -223,7 +221,7 @@
                         height: 50px;
                         margin-right: 3px;
                         .keypad-button {
-                            background-color: var(--ca-gray5) !important;
+                            background-color: transparent !important;
                             .button-style();
                             span {
                                 font-size: 12pt;

diff --git a/src/style/calculator/graphing.less b/src/style/calculator/graphing.less
@@ -28,7 +28,7 @@
         flex-direction: column;
         width: 100%;
         height: 0;
-        background-color: #fff;
+        background-color: var(--ca-light1);
         .function-input-box {
             display: flex;
             padding: 7px 0;

diff --git a/src/style/sidebar.less b/src/style/sidebar.less
@@ -13,6 +13,7 @@
             text-align: center;
             border-bottom: 1px solid var(--ca-gray2);
             white-space: nowrap;
+            color: var(--ca-gray-light);
         }
         .mode-switcher-wrapper {
             position: relative;

diff --git a/src/views/graphing/index.tsx b/src/views/graphing/index.tsx
@@ -136,11 +136,11 @@ const Graphing: React.FC = memo(() => {
         });
         canvas.addEventListener("touchend", () => {
             if(!workerRef.current) return;
-            workerRef.current.postMessage({ type: "mouse-leave" });
+            workerRef.current.postMessage({ type: "mouse-up" });
         });
         canvas.addEventListener("touchcancel", () => {
             if(!workerRef.current) return;
-            workerRef.current.postMessage({ type: "mouse-leave" });
+            workerRef.current.postMessage({ type: "mouse-up" });
         });
 
         // "graphing-reload" cannot be moved into `useEmitter` hook

diff --git a/src/views/programming/NumberBox.tsx b/src/views/programming/NumberBox.tsx
@@ -13,7 +13,7 @@ interface NumberBoxProps {
 const NumberBox: React.FC<NumberBoxProps> = (props) => {
     const [isActive, setIsActive] = useState<boolean>(false);
 
-    const clickHandle = () => {
+    const handleClick = () => {
         new Emitter().emit("number-sys-chose", props.type);
     };
 
@@ -24,7 +24,7 @@ const NumberBox: React.FC<NumberBoxProps> = (props) => {
     }, []);
 
     return (
-        <li className={"number-box"+ (isActive ? " active" : "")} onClick={() => clickHandle()}>
+        <li className={"number-box"+ (isActive ? " active" : "")} onClick={() => handleClick()}>
             <span className="name">{Utils.firstLetterUpperCase(props.type)}</span>
             <span className="number">{props.value}</span>
         </li>