diff --git a/src/views/Action/Draggable.js b/src/views/Action/Draggable.js index 6e51008..75a0380 100644 --- a/src/views/Action/Draggable.js +++ b/src/views/Action/Draggable.js @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { limitNumber } from "../../libs/utils"; import { isMobile } from "../../libs/mobile"; import { setFab } from "../../libs/storage"; +import Paper from "@mui/material/Paper"; const getEdgePosition = ( { x: left, y: top, edge }, @@ -58,6 +59,17 @@ const getHidePosition = ( return { x: left, y: top, edge, hide: true }; }; +function DraggableWrapper({ children, usePaper, ...props }) { + if (usePaper) { + return ( + + {children} + + ); + } + return
{children}
; +} + export default function Draggable({ windowSize, width, @@ -70,6 +82,7 @@ export default function Draggable({ onMove, handler, children, + usePaper, }) { const [origin, setOrigin] = useState({ x: left, @@ -181,7 +194,8 @@ export default function Draggable({ }; return ( -
{children}
-
+ ); } diff --git a/src/views/Action/index.js b/src/views/Action/index.js index 1503a17..2e50791 100644 --- a/src/views/Action/index.js +++ b/src/views/Action/index.js @@ -1,4 +1,3 @@ -import Paper from "@mui/material/Paper"; import Fab from "@mui/material/Fab"; import TranslateIcon from "@mui/icons-material/Translate"; import ThemeProvider from "../../hooks/Theme"; @@ -9,6 +8,8 @@ import Popup from "../Popup"; import { debounce } from "../../libs/utils"; import { isGm } from "../../libs/client"; import Header from "../Popup/Header"; +import Box from "@mui/material/Box"; +import Divider from "@mui/material/Divider"; import { DEFAULT_SHORTCUTS, OPT_SHORTCUT_TRANSLATE, @@ -178,17 +179,17 @@ export default function Action({ translator, fab }) { show={showPopup} onStart={handleStart} onMove={handleMove} + usePaper handler={ - +
- + + } > - - {showPopup && ( - - )} - + {showPopup && ( + + )}