Vomitblood/stort
1
0
Fork 0
mirror of https://github.com/Vomitblood/stort.git synced 2024-11-26 13:55:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

added settings background section

Browse source
This commit is contained in:
Vomitblood 2024-08-07 12:31:11 +08:00
parent 542b2ce483
commit 2b2797af9d
7 changed files with 103 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Generic/Layout.tsx
View file

@ -6,7 +6,7 @@ export const Layout = () => {
return ( return (
<Box <Box
sx={{ sx={{
backgroundColor: "#8ab4f8", // backgroundColor: "#8ab4f8",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100vh", height: "100vh",

15
src/components/HeaderBar/Settings/DevChip.tsx Normal file
View file

@ -0,0 +1,15 @@
import { Chip } from "@mui/material";
export const DevChip = () => {
return (
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
);
};

2
src/components/HeaderBar/Settings/Settings.tsx
View file

@ -22,7 +22,7 @@ export const Settings = () => {
// states // states
const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false); const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false); const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false);
const [subTabValue, setSubTabValue] = useState("display"); const [subTabValue, setSubTabValue] = useState("style");
const [applyLoading, setApplyLoading] = useState<boolean>(false); const [applyLoading, setApplyLoading] = useState<boolean>(false);
const [saveLoading, setSaveLoading] = useState<boolean>(false); const [saveLoading, setSaveLoading] = useState<boolean>(false);

48
src/components/HeaderBar/Settings/SettingsItem.tsx
View file

@ -1,19 +1,15 @@
import { Box } from "@mui/material"; import { Box, Typography } from "@mui/material";
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
interface SettingsItemProps { interface SettingsItemProps {
settingsDescription: ReactNode; defaultText?: string;
settingsInput?: ReactNode; description: ReactNode;
settingsInputBottom?: ReactNode; input?: ReactNode;
settingsInputLong?: ReactNode; inputBottom?: ReactNode;
inputLong?: ReactNode;
} }
export const SettingsItem: FC<SettingsItemProps> = ({ export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description, input, inputBottom, inputLong }) => {
settingsDescription,
settingsInput,
settingsInputBottom,
settingsInputLong,
}) => {
return ( return (
<Box <Box
sx={{ sx={{
@ -28,8 +24,24 @@ export const SettingsItem: FC<SettingsItemProps> = ({
width: "100%", width: "100%",
}} }}
> >
<Box sx={{ width: "60%" }}>{settingsDescription}</Box> <Box
{settingsInput && ( sx={{
display: "flex",
flexDirection: "column",
width: "60%",
}}
>
{description}
{defaultText && (
<Typography
color="lightgrey"
variant="caption"
>
Default: {defaultText}
</Typography>
)}
</Box>
{input && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -38,21 +50,21 @@ export const SettingsItem: FC<SettingsItemProps> = ({
width: "30%", width: "30%",
}} }}
> >
{settingsInput} {input}
</Box> </Box>
)} )}
{settingsInputLong && ( {inputLong && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
}} }}
> >
{settingsInputLong} {inputLong}
</Box> </Box>
)} )}
</Box> </Box>
{settingsInputBottom && ( {inputBottom && (
<Box <Box
sx={{ sx={{
alignItems: "center", alignItems: "center",
@ -62,7 +74,7 @@ export const SettingsItem: FC<SettingsItemProps> = ({
px: 2, px: 2,
}} }}
> >
{settingsInputBottom} {inputBottom}
</Box> </Box>
)} )}
</Box> </Box>

340
src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
View file

@ -1,340 +0,0 @@
import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { BetaChip } from "../BetaChip";
import { CategoryTitle } from "../CategoryTitle";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabBackgroundProps {
sx?: any;
}
export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) => {
// atoms
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
const handleSettingsBackgroundValueChange = (
settingKey: string,
settingValue: boolean | number | string | number[],
) => {
const newSettings = {
...stagedSettings,
background: {
...stagedSettings.background,
[settingKey]: settingValue,
},
};
setStagedSettings(newSettings);
};
return (
<Box sx={{ sx }}>
<CategoryTitle title="Basic styles" />
<SettingsItem
settingsDescription={
<Box
sx={{
display: "flex",
}}
>
<BetaChip />
<Typography>Dark mode</Typography>
</Box>
}
settingsInput={
<Switch
checked={stagedSettings.style.dark_mode}
name="dark_mode"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography>Accent color</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: #8ab4f8
</Typography>
</>
}
settingsInput={
<TextField
name="accent_color"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, e.target.value);
}}
sx={{
width: "100%",
}}
size="small"
type="color"
value={stagedSettings.style.accent_color}
variant="standard"
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography>Font family</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: Monospace
</Typography>
</>
}
settingsInputLong={
<TextField
fullWidth
name="font_family"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, e.target.value);
}}
select
size="small"
sx={{
maxWidth: "100%",
}}
value={stagedSettings.style.font_family || "monospace"}
variant="outlined"
>
<MenuItem value="monospace">Monospace</MenuItem>
<MenuItem value="sans_serif">Sans Serif</MenuItem>
<MenuItem value="comic_sans">Comic Sans</MenuItem>
<MenuItem value="system_font">System font</MenuItem>
</TextField>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography>Font scaling</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 100%
</Typography>
</>
}
settingsInputBottom={
<Slider
marks={[
{
value: 80,
label: "80%",
},
{
value: 90,
label: "90%",
},
{
value: 100,
label: "100%",
},
{
value: 110,
label: "110%",
},
{
value: 120,
label: "120%",
},
]}
min={80}
max={120}
name="font_scaling"
onChangeCommitted={(e, value) => {
handleSettingsBackgroundValueChange("font_scaling", value);
}}
step={10}
value={stagedSettings.style.font_scaling}
valueLabelDisplay="auto"
/>
}
/>
<CategoryTitle title="Advanced settings" />
<SettingsItem
settingsDescription={
<>
<Typography component="div">
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Transition duration
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 200ms
</Typography>
</>
}
settingsInput={
<TextField
InputProps={{
endAdornment: <InputAdornment position="end">ms</InputAdornment>,
inputProps: { min: 0, max: 100, step: 1 },
}}
name="transition_duration"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.style.transition_duration}
variant="standard"
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography component="div">
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Radius
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 8px
</Typography>
</>
}
settingsInput={
<TextField
InputProps={{
endAdornment: <InputAdornment position="end">px</InputAdornment>,
inputProps: { min: 0, max: 100, step: 1 },
}}
name="radius"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.style.radius}
variant="standard"
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography component="div">
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Window height
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 60%
</Typography>
</>
}
settingsInput={
<TextField
InputProps={{
endAdornment: <InputAdornment position="end">%</InputAdornment>,
inputProps: { min: 0, max: 100, step: 1 },
}}
name="window_height"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.style.window_height}
variant="standard"
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography component="div">
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Window width
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 400px
</Typography>
</>
}
settingsInput={
<TextField
InputProps={{
endAdornment: <InputAdornment position="end">px</InputAdornment>,
inputProps: { min: 0, max: 10000, step: 1 },
}}
name="window_width"
onChange={(e) => {
handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.style.window_width}
variant="standard"
/>
}
/>
</Box>
);
};

102
src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx
View file

@ -5,6 +5,7 @@ import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { BetaChip } from "../BetaChip"; import { BetaChip } from "../BetaChip";
import { CategoryTitle } from "../CategoryTitle"; import { CategoryTitle } from "../CategoryTitle";
import { SettingsItem } from "../SettingsItem"; import { SettingsItem } from "../SettingsItem";
import { DevChip } from "../DevChip";
interface SettingsTabStyleProps { interface SettingsTabStyleProps {
sx?: any; sx?: any;
@ -14,7 +15,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
// atoms // atoms
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom); const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => { const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
const newSettings = { const newSettings = {
...stagedSettings, ...stagedSettings,
display: { display: {
@ -29,43 +30,37 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
<Box sx={{ sx }}> <Box sx={{ sx }}>
<CategoryTitle title="Basic styles" /> <CategoryTitle title="Basic styles" />
<SettingsItem <SettingsItem
settingsDescription={ defaultText="On"
<Box description={
sx={{ <>
display: "flex", <Typography>
}}
>
<BetaChip /> <BetaChip />
<Typography>Dark mode</Typography> Dark mode
</Box> </Typography>
</>
} }
settingsInput={ input={
<Switch <Switch
checked={stagedSettings.style.dark_mode} checked={stagedSettings.style.dark_mode}
name="dark_mode" name="dark_mode"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, e.target.checked); handleSettingsStyleValueChange(e.target.name, e.target.checked);
}} }}
/> />
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ defaultText="#8ab4f8"
description={
<> <>
<Typography>Accent color</Typography> <Typography>Accent color</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: #8ab4f8
</Typography>
</> </>
} }
settingsInput={ input={
<TextField <TextField
name="accent_color" name="accent_color"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, e.target.value); handleSettingsStyleValueChange(e.target.name, e.target.value);
}} }}
sx={{ sx={{
width: "100%", width: "100%",
@ -78,23 +73,18 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ defaultText="Monospace"
description={
<> <>
<Typography>Font family</Typography> <Typography>Font family</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: Monospace
</Typography>
</> </>
} }
settingsInputLong={ inputLong={
<TextField <TextField
fullWidth fullWidth
name="font_family" name="font_family"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, e.target.value); handleSettingsStyleValueChange(e.target.name, e.target.value);
}} }}
select select
size="small" size="small"
@ -112,18 +102,13 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ defaultText="100%"
description={
<> <>
<Typography>Font scaling</Typography> <Typography>Font scaling</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 100%
</Typography>
</> </>
} }
settingsInputBottom={ inputBottom={
<Slider <Slider
marks={[ marks={[
{ {
@ -151,7 +136,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
max={120} max={120}
name="font_scaling" name="font_scaling"
onChangeCommitted={(e, value) => { onChangeCommitted={(e, value) => {
handleSettingsDisplayValueChange("font_scaling", value); handleSettingsStyleValueChange("font_scaling", value);
}} }}
step={10} step={10}
value={stagedSettings.style.font_scaling} value={stagedSettings.style.font_scaling}
@ -161,29 +146,16 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
/> />
<CategoryTitle title="Advanced settings" /> <CategoryTitle title="Advanced settings" />
<SettingsItem <SettingsItem
settingsDescription={ defaultText="200ms"
description={
<> <>
<Typography component="div"> <Typography component="div">
<Chip <DevChip />
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Transition duration Transition duration
</Typography> </Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 200ms
</Typography>
</> </>
} }
settingsInput={ input={
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end">ms</InputAdornment>, endAdornment: <InputAdornment position="end">ms</InputAdornment>,
@ -191,7 +163,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
}} }}
name="transition_duration" name="transition_duration"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
}} }}
sx={{ sx={{
width: "100%", width: "100%",
@ -204,7 +176,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography component="div"> <Typography component="div">
<Chip <Chip
@ -226,7 +198,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
</Typography> </Typography>
</> </>
} }
settingsInput={ input={
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end">px</InputAdornment>, endAdornment: <InputAdornment position="end">px</InputAdornment>,
@ -234,7 +206,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
}} }}
name="radius" name="radius"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
}} }}
sx={{ sx={{
width: "100%", width: "100%",
@ -247,7 +219,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography component="div"> <Typography component="div">
<Chip <Chip
@ -269,7 +241,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
</Typography> </Typography>
</> </>
} }
settingsInput={ input={
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end">%</InputAdornment>, endAdornment: <InputAdornment position="end">%</InputAdornment>,
@ -277,7 +249,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
}} }}
name="window_height" name="window_height"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
}} }}
sx={{ sx={{
width: "100%", width: "100%",
@ -290,7 +262,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography component="div"> <Typography component="div">
<Chip <Chip
@ -312,7 +284,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
</Typography> </Typography>
</> </>
} }
settingsInput={ input={
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end">px</InputAdornment>, endAdornment: <InputAdornment position="end">px</InputAdornment>,
@ -320,7 +292,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
}} }}
name="window_width" name="window_width"
onChange={(e) => { onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value)); handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
}} }}
sx={{ sx={{
width: "100%", width: "100%",

24
src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
View file

@ -28,12 +28,18 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
<Box sx={{ sx }}> <Box sx={{ sx }}>
<CategoryTitle title="Fullscreen" /> <CategoryTitle title="Fullscreen" />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography>Fullscreen on startup</Typography> <Typography>Fullscreen on startup</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: On
</Typography>
</> </>
} }
settingsInput={ input={
<Switch <Switch
checked={stagedSettings.window.start_fullscreen} checked={stagedSettings.window.start_fullscreen}
name="start_fullscreen" name="start_fullscreen"
@ -45,12 +51,18 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
/> />
<CategoryTitle title="Titlebar Buttons" /> <CategoryTitle title="Titlebar Buttons" />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography>Minimize button</Typography> <Typography>Minimize button</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: On
</Typography>
</> </>
} }
settingsInput={ input={
<Switch <Switch
checked={stagedSettings.window.minimize_button} checked={stagedSettings.window.minimize_button}
name="minimize_button" name="minimize_button"
@ -61,12 +73,12 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
settingsDescription={ description={
<> <>
<Typography>Maximize button</Typography> <Typography>Maximize button</Typography>
</> </>
} }
settingsInput={ input={
<Switch <Switch
checked={stagedSettings.window.maximize_button} checked={stagedSettings.window.maximize_button}
name="maximize_button" name="maximize_button"