mirror of
https://github.com/yuezk/GlobalProtect-openconnect.git
synced 2025-04-02 18:31:50 -04:00
refactor: refine the drag
This commit is contained in:
parent
5603157679
commit
f91f0bcd17
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
|
@ -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),
|
||||||
}}
|
}}
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user