Vomitblood/stort
1
0
Fork 0
mirror of https://github.com/Vomitblood/stort.git synced 2024-11-26 05:45:26 +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 (
<Box
sx={{
backgroundColor: "#8ab4f8",
// backgroundColor: "#8ab4f8",
display: "flex",
flexDirection: "column",
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
const [settingsOpenState, setSettingsOpenState] = 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 [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";
interface SettingsItemProps {
settingsDescription: ReactNode;
settingsInput?: ReactNode;
settingsInputBottom?: ReactNode;
settingsInputLong?: ReactNode;
defaultText?: string;
description: ReactNode;
input?: ReactNode;
inputBottom?: ReactNode;
inputLong?: ReactNode;
}
export const SettingsItem: FC<SettingsItemProps> = ({
settingsDescription,
settingsInput,
settingsInputBottom,
settingsInputLong,
}) => {
export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description, input, inputBottom, inputLong }) => {
return (
<Box
sx={{
@ -28,8 +24,24 @@ export const SettingsItem: FC<SettingsItemProps> = ({
width: "100%",
}}
>
<Box sx={{ width: "60%" }}>{settingsDescription}</Box>
{settingsInput && (
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "60%",
}}
>
{description}
{defaultText && (
<Typography
color="lightgrey"
variant="caption"
>
Default: {defaultText}
</Typography>
)}
</Box>
{input && (
<Box
sx={{
display: "flex",
@ -38,21 +50,21 @@ export const SettingsItem: FC<SettingsItemProps> = ({
width: "30%",
}}
>
{settingsInput}
{input}
</Box>
)}
{settingsInputLong && (
{inputLong && (
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
}}
>
{settingsInputLong}
{inputLong}
</Box>
)}
</Box>
{settingsInputBottom && (
{inputBottom && (
<Box
sx={{
alignItems: "center",
@ -62,7 +74,7 @@ export const SettingsItem: FC<SettingsItemProps> = ({
px: 2,
}}
>
{settingsInputBottom}
{inputBottom}
</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>
);
};

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