fix: Select button overflows in mobile mode & function list item over…

…flows in mobile mode
nocpiun · Aug 11, 2024 · f38ec6e · f38ec6e · github-actions · Aug 11, 2024
1 parent 4a21eaf
commit f38ec6e
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/src/components/OverflowShadow.tsx b/src/components/OverflowShadow.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+interface OverflowShadowProps {
+    width?: number
+}
+
+const OverflowShadow: React.FC<OverflowShadowProps> = (props) => {
+    return <div
+        className="overflow-shadow"
+        style={{ width: props.width || 30 }}/>;
+}
+
+export default OverflowShadow;
diff --git a/src/components/sidebar/FunctionListItem.tsx b/src/components/sidebar/FunctionListItem.tsx
@@ -10,6 +10,7 @@ import { FunctionInputtingType } from "@/types";
 
 import moreIcon from "@/icons/more.svg";
 import removeIcon from "@/icons/remove.svg";
+import OverflowShadow from "../OverflowShadow";
 
 interface ListItemProps {
     id: number
@@ -56,7 +57,7 @@ const FunctionListItem: React.FC<ListItemProps> = (props) => {
                 <div className="function-list-item-value">
                     <span>
                         <InlineMath>{props.value}</InlineMath>
-                        <div className="function-list-item-value-shadow"/>
+                        <OverflowShadow />
                     </span>
                 </div>
 

diff --git a/src/components/sidebar/HistoryItem.tsx b/src/components/sidebar/HistoryItem.tsx
@@ -5,6 +5,7 @@ import { useContextMenu, ContextMenuItem, ContextMenuDivider } from "use-context
 import { HistoryItemInfo } from "@/components/sidebar/History";
 
 import Emitter from "@/utils/Emitter";
+import OverflowShadow from "../OverflowShadow";
 
 const HistoryItem: React.FC<HistoryItemInfo> = (props) => {
     const handleClick = () => {
@@ -29,6 +30,7 @@ const HistoryItem: React.FC<HistoryItemInfo> = (props) => {
                 onContextMenu={onContextMenu}>
                 <div className="item-input">
                     <span><InlineMath>{props.input}</InlineMath></span>
+                    <OverflowShadow />
                 </div>
                 <div className="item-output">
                     <span>

diff --git a/src/style/calculator/graphing.less b/src/style/calculator/graphing.less
@@ -27,7 +27,7 @@
         flex: 1;
         display: none; // flex
         flex-direction: column;
-        width: 100%;
+        width: 100vw;
         height: 0;
         background-color: var(--ca-light1);
         .function-input-box {
@@ -81,6 +81,14 @@
         .function-list {
             flex: 1;
             .function-list-style();
+            &-item {
+                &-value {
+                    width: 100%;
+                    .overflow-shadow {
+                        background: linear-gradient(to left, var(--ca-light1), transparent);
+                    }
+                }
+            }
         }
         .mobile-input-container {
             border-top: 1px solid var(--ca-gray2);

diff --git a/src/style/calculator/mixin.less b/src/style/calculator/mixin.less
@@ -155,9 +155,9 @@
         animation: function-item-added 100ms ease;
         animation-iteration-count: 1;
         &-tag {
-            flex: 1;
-            .function-tag();
+            width: 45px;
             padding: 0 3px;
+            .function-tag();
         }
         &-value {
             flex: 5;
@@ -167,8 +167,7 @@
             color: var(--ca-gray-light);
             overflow: hidden;
             position: relative;
-            &-shadow {
-                width: 30px;
+            .overflow-shadow {
                 position: absolute;
                 top: 0;
                 right: 0;
@@ -178,7 +177,7 @@
         }
         &-buttons {
             flex: .5;
-            display: flex;
+            display: none;
             button {
                 display: flex;
                 align-items: center;
@@ -187,6 +186,7 @@
                 outline: none;
                 background-color: transparent;
                 svg {
+                    fill: var(--ca-gray1);
                     width: 19px;
                     height: 19px;
                     margin-top: 3px;
@@ -199,10 +199,10 @@
         }
         &:hover {
             background-color: var(--ca-gray9);
-            .function-list-item-buttons svg:hover {
-                fill: var(--ca-gray1);
+            .function-list-item-buttons {
+                display: flex;
             }
-            .function-list-item-value .function-list-item-value-shadow {
+            .function-list-item-value .overflow-shadow {
                 background: linear-gradient(to left, var(--ca-gray9), transparent);
             }
         }

diff --git a/src/style/layout.less b/src/style/layout.less
@@ -116,7 +116,7 @@ kbd {
             padding: 0 5px;
             border: none;
             outline: none;
-            background-color: var(--ca-gray9);
+            background-color: transparent;
             border-radius: 3px;
             flex-flow: row;
             align-items: center;

diff --git a/src/style/sidebar.less b/src/style/sidebar.less
@@ -147,7 +147,6 @@
                                 height: 70px;
                                 position: relative;
                                 padding: 10px 30px;
-                                transition: background-color .08s;
                                 box-sizing: border-box;
                                 cursor: pointer;
                                 .item-input {
@@ -156,6 +155,14 @@
                                     font-size: 10pt;
                                     overflow: hidden;
                                     white-space: nowrap;
+                                    position: relative;
+                                    .overflow-shadow {
+                                        position: absolute;
+                                        top: 0;
+                                        right: 0;
+                                        bottom: 0;
+                                        background: linear-gradient(to left, var(--ca-light2), transparent);
+                                    }
                                 }
                                 .item-output {
                                     flex: 1;
@@ -187,9 +194,15 @@
                                 }
                                 &:hover {
                                     background-color: var(--ca-gray5);
+                                    .item-input .overflow-shadow {
+                                        background: linear-gradient(to left, var(--ca-gray5), transparent);
+                                    }
                                 }
                                 &:active {
                                     background-color: var(--ca-gray3);
+                                    .item-input .overflow-shadow {
+                                        background: linear-gradient(to left, var(--ca-gray3), transparent);
+                                    }
                                 }
                             }
                         }