From f38ec6e7e60958fe452d01ff646d109932c530a1 Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Sun, 11 Aug 2024 16:50:53 +0800 Subject: [PATCH] fix: Select button overflows in mobile mode & function list item overflows in mobile mode --- src/components/OverflowShadow.tsx | 13 +++++++++++++ src/components/sidebar/FunctionListItem.tsx | 3 ++- src/components/sidebar/HistoryItem.tsx | 2 ++ src/style/calculator/graphing.less | 10 +++++++++- src/style/calculator/mixin.less | 16 ++++++++-------- src/style/layout.less | 2 +- src/style/sidebar.less | 15 ++++++++++++++- 7 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 src/components/OverflowShadow.tsx diff --git a/src/components/OverflowShadow.tsx b/src/components/OverflowShadow.tsx new file mode 100644 index 0000000..d697bbc --- /dev/null +++ b/src/components/OverflowShadow.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +interface OverflowShadowProps { + width?: number +} + +const OverflowShadow: React.FC = (props) => { + return
; +} + +export default OverflowShadow; diff --git a/src/components/sidebar/FunctionListItem.tsx b/src/components/sidebar/FunctionListItem.tsx index 2f53506..ae4cf8f 100644 --- 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 = (props) => {
{props.value} -
+
diff --git a/src/components/sidebar/HistoryItem.tsx b/src/components/sidebar/HistoryItem.tsx index b27da53..d707612 100644 --- 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 = (props) => { const handleClick = () => { @@ -29,6 +30,7 @@ const HistoryItem: React.FC = (props) => { onContextMenu={onContextMenu}>
{props.input} +
diff --git a/src/style/calculator/graphing.less b/src/style/calculator/graphing.less index c07f218..236de8e 100644 --- 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 index b426577..4da0c20 100644 --- 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 index b6983d0..01d9a66 100644 --- 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 index ccd5e64..233e353 100644 --- 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); + } } } }