refactor: refine the drag

This commit is contained in:
Kevin Yue 2023-06-26 15:07:55 +08:00
parent 5603157679
commit f91f0bcd17
8 changed files with 22 additions and 13 deletions

View File

@ -4,12 +4,13 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<title>Vite + React + TS</title> <title>GlobalProtect</title>
</head> </head>
<body data-tauri-drag-region> <body data-tauri-drag-region>
<script> <script>
/* workaround to webview font size auto scaling */
var htmlFontSize = getComputedStyle(document.documentElement).fontSize; var htmlFontSize = getComputedStyle(document.documentElement).fontSize;
var ratio = parseInt(htmlFontSize) / 16; var ratio = parseInt(htmlFontSize, 10) / 16;
document.documentElement.style.fontSize = (16 / ratio) + 'px'; document.documentElement.style.fontSize = (16 / ratio) + 'px';
</script> </script>
<div id="root"></div> <div id="root"></div>

View File

@ -35,7 +35,7 @@ export default function PortalForm() {
} }
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} data-tauri-drag-region>
<TextField <TextField
autoFocus autoFocus
label="Portal address" label="Portal address"

View File

@ -93,17 +93,11 @@ function InnerStatusIcon() {
return <DisconnectedIcon />; return <DisconnectedIcon />;
} }
const DragRegion = styled(Box)(({ theme }) => ({
position: "absolute",
inset: 0,
}));
export default function StatusIcon() { export default function StatusIcon() {
return ( return (
<IconContainer> <IconContainer>
<BackgroundIcon /> <BackgroundIcon />
<InnerStatusIcon /> <InnerStatusIcon />
<DragRegion data-tauri-drag-region />
</IconContainer> </IconContainer>
); );
} }

View File

@ -7,7 +7,6 @@ export default function StatusText() {
return ( return (
<Typography <Typography
data-tauri-drag-region
textAlign="center" textAlign="center"
mt={1.5} mt={1.5}
variant="subtitle1" variant="subtitle1"

View File

@ -4,9 +4,10 @@ import StatusText from "./StatusText";
export default function ConnectionStatus() { export default function ConnectionStatus() {
return ( return (
<Box data-tauri-drag-region> <Box position="relative">
<StatusIcon /> <StatusIcon />
<StatusText /> <StatusText />
<Box data-tauri-drag-region position="absolute" sx={{ inset: 0 }} />
</Box> </Box>
); );
} }

View File

@ -15,7 +15,12 @@ const LinkChip = (props: ChipProps<"a">) => (
export default function Feedback() { export default function Feedback() {
return ( return (
<Stack direction="row" justifyContent="space-evenly" mt={1}> <Stack
direction="row"
justifyContent="space-evenly"
mt={1}
data-tauri-drag-region
>
<LinkChip <LinkChip
avatar={<BugReport />} avatar={<BugReport />}
label="Feedback" label="Feedback"

View File

@ -16,6 +16,7 @@ import { isProcessingAtom, statusAtom } from "../../atoms/status";
const MenuContainer = styled(Box)(({ theme }) => ({ const MenuContainer = styled(Box)(({ theme }) => ({
position: "absolute", position: "absolute",
zIndex: 1,
left: theme.spacing(1), left: theme.spacing(1),
top: theme.spacing(1), top: theme.spacing(1),
})); }));
@ -100,6 +101,7 @@ export default function MainMenu() {
target="_blank" target="_blank"
sx={{ sx={{
position: "absolute", position: "absolute",
zIndex: 1,
right: (theme) => theme.spacing(1), right: (theme) => theme.spacing(1),
top: (theme) => theme.spacing(1), top: (theme) => theme.spacing(1),
}} }}

View File

@ -1,4 +1,11 @@
import { Alert, AlertTitle, Box, Slide, SlideProps, Snackbar } from "@mui/material"; import {
Alert,
AlertTitle,
Box,
Slide,
SlideProps,
Snackbar,
} from "@mui/material";
import { useAtom, useAtomValue } from "jotai"; import { useAtom, useAtomValue } from "jotai";
import { import {
closeNotificationAtom, closeNotificationAtom,