mirror of
https://github.com/Vomitblood/stort.git
synced 2024-11-26 05:45:26 +08:00
added debug panel
This commit is contained in:
parent
e48611b11c
commit
f237031eb3
|
@ -1,5 +1,11 @@
|
|||
import { BugReportOutlined, SettingsOutlined } from "@mui/icons-material";
|
||||
import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
|
||||
import {
|
||||
BugReportOutlined,
|
||||
FormatPaintOutlined,
|
||||
SettingsOutlined,
|
||||
WallpaperOutlined,
|
||||
WebAssetOutlined,
|
||||
} from "@mui/icons-material";
|
||||
import { TabContext, TabList, TabPanel } from "@mui/lab";
|
||||
import { Box, Button, IconButton, Tab, Tooltip, useTheme } from "@mui/material";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/router";
|
||||
|
@ -10,6 +16,7 @@ import { FloatingDialog } from "../../Generic/FloatingDialog";
|
|||
import { Background } from "./SettingsTabs/Background";
|
||||
import { Style } from "./SettingsTabs/Style";
|
||||
import { Window } from "./SettingsTabs/Window";
|
||||
import { Debug } from "./SettingsTabs/Debug";
|
||||
|
||||
export const Settings = () => {
|
||||
// contexts
|
||||
|
@ -24,8 +31,6 @@ export const Settings = () => {
|
|||
const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
|
||||
const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false);
|
||||
const [subTabValue, setSubTabValue] = useState("style");
|
||||
const [applyLoading, setApplyLoading] = useState<boolean>(false);
|
||||
const [saveLoading, setSaveLoading] = useState<boolean>(false);
|
||||
|
||||
const toggleSettings = () => {
|
||||
setSettingsOpenState((prevState) => !prevState);
|
||||
|
@ -47,9 +52,7 @@ export const Settings = () => {
|
|||
};
|
||||
|
||||
const applyClickEvent = () => {
|
||||
setApplyLoading(true);
|
||||
updateSettings(stagedSettings);
|
||||
setApplyLoading(false);
|
||||
};
|
||||
|
||||
const saveClickEvent = () => {
|
||||
|
@ -61,24 +64,11 @@ export const Settings = () => {
|
|||
// set staged settings back to current settings on close
|
||||
useEffect(() => {
|
||||
if (!settingsOpenState) setStagedSettings(settings);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [settingsOpenState]);
|
||||
|
||||
return (
|
||||
<FloatingDialog
|
||||
actionButtons={
|
||||
<>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
router.push("/testing");
|
||||
}}
|
||||
sx={{
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
<BugReportOutlined />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
body={
|
||||
<Box
|
||||
sx={{
|
||||
|
@ -104,22 +94,31 @@ export const Settings = () => {
|
|||
variant="scrollable"
|
||||
>
|
||||
<Tab
|
||||
icon={<FormatPaintOutlined />}
|
||||
label="Style"
|
||||
value="style"
|
||||
/>
|
||||
<Tab
|
||||
icon={<WallpaperOutlined />}
|
||||
label="Background"
|
||||
value="background"
|
||||
/>
|
||||
<Tab
|
||||
icon={<WebAssetOutlined />}
|
||||
label="Window"
|
||||
value="window"
|
||||
/>
|
||||
<Tab
|
||||
icon={<BugReportOutlined />}
|
||||
label="Debug"
|
||||
value="debug"
|
||||
/>
|
||||
</TabList>
|
||||
<Box
|
||||
overflow="auto"
|
||||
sx={{
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
m: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
|
@ -141,6 +140,12 @@ export const Settings = () => {
|
|||
>
|
||||
<Window />
|
||||
</TabPanel>
|
||||
<TabPanel
|
||||
sx={{ p: 2 }}
|
||||
value="debug"
|
||||
>
|
||||
<Debug />
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</TabContext>
|
||||
</Box>
|
||||
|
@ -164,8 +169,7 @@ export const Settings = () => {
|
|||
Cancel
|
||||
</Button>
|
||||
|
||||
<LoadingButton
|
||||
loading={applyLoading}
|
||||
<Button
|
||||
onClick={applyClickEvent}
|
||||
size="small"
|
||||
sx={{
|
||||
|
@ -174,15 +178,14 @@ export const Settings = () => {
|
|||
variant="outlined"
|
||||
>
|
||||
Apply
|
||||
</LoadingButton>
|
||||
<LoadingButton
|
||||
loading={saveLoading}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={saveClickEvent}
|
||||
size="small"
|
||||
variant="contained"
|
||||
>
|
||||
Save
|
||||
</LoadingButton>
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
close={closeSettings}
|
||||
|
|
|
@ -18,7 +18,7 @@ interface BackgroundProps {
|
|||
|
||||
export const Background: FC<BackgroundProps> = ({ sx }) => {
|
||||
// contexts
|
||||
const { settings, updateSettings } = useSettings();
|
||||
const { settings } = useSettings();
|
||||
|
||||
// atoms
|
||||
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
|
||||
|
@ -112,6 +112,7 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
|
|||
applyWallpaper();
|
||||
|
||||
setOldWallpaperPath(settings.background.background_image_path);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [settings.background.background_image_path]);
|
||||
|
||||
// update the preview image when stagedSettings.background.background_image_path changes
|
||||
|
|
47
src/components/HeaderBar/Settings/SettingsTabs/Debug.tsx
Normal file
47
src/components/HeaderBar/Settings/SettingsTabs/Debug.tsx
Normal file
|
@ -0,0 +1,47 @@
|
|||
import { Box, Typography } from "@mui/material";
|
||||
import { FC } from "react";
|
||||
import { useSettings } from "../../../../contexts/SettingsContext";
|
||||
import { CategoryTitle } from "../CategoryTitle";
|
||||
|
||||
interface DebugProps {
|
||||
sx?: any;
|
||||
}
|
||||
|
||||
export const Debug: FC<DebugProps> = ({ sx }) => {
|
||||
// contexts
|
||||
const { settings, resetSettings } = useSettings();
|
||||
|
||||
return (
|
||||
<Box sx={{ sx }}>
|
||||
<CategoryTitle title="Debug Panel" />
|
||||
<Typography
|
||||
color="error"
|
||||
variant="h6"
|
||||
>
|
||||
Here do be dragons
|
||||
</Typography>
|
||||
<button
|
||||
onClick={() => {
|
||||
resetSettings();
|
||||
}}
|
||||
>
|
||||
reset settings
|
||||
</button>
|
||||
<button>update settings</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(settings);
|
||||
}}
|
||||
>
|
||||
log settings
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(settings.background.background_image_path);
|
||||
}}
|
||||
>
|
||||
testing
|
||||
</button>
|
||||
</Box>
|
||||
);
|
||||
};
|
Loading…
Reference in a new issue