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

updated github actions workflow

Browse source
This commit is contained in:
Vomitblood 2024-08-07 00:12:25 +08:00
parent 78d3ec8a55
commit be57283251
3 changed files with 424 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx Normal file
View file

@ -0,0 +1,23 @@
import { Box, Typography } from "@mui/material";
import { FC } from "react";
interface SettingsCategoryTitleProps {
title: string;
}
export const SettingsCategoryTitle: FC<SettingsCategoryTitleProps> = ({ title }) => {
return (
<Box
sx={{
mb: 1,
}}
>
<Typography
color="primary"
variant="h6"
>
{title}
</Typography>
</Box>
);
};

70
src/components/HeaderBar/Settings/SettingsItem.tsx Normal file
View file

@ -0,0 +1,70 @@
import { Box } from "@mui/material";
import { FC, ReactNode } from "react";
interface SettingsItemProps {
settingsDescription: ReactNode;
settingsInput?: ReactNode;
settingsInputBottom?: ReactNode;
settingsInputLong?: ReactNode;
}
export const SettingsItem: FC<SettingsItemProps> = ({
settingsDescription,
settingsInput,
settingsInputBottom,
settingsInputLong,
}) => {
return (
<Box
sx={{
mb: 2,
}}
>
<Box
sx={{
alignItems: "center",
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<Box sx={{ width: "60%" }}>{settingsDescription}</Box>
{settingsInput && (
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
maxWidth: "100px",
width: "30%",
}}
>
{settingsInput}
</Box>
)}
{settingsInputLong && (
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
}}
>
{settingsInputLong}
</Box>
)}
</Box>
{settingsInputBottom && (
<Box
sx={{
alignItems: "center",
display: "flex",
flexDirection: "column",
justifyContent: "center",
px: 2,
}}
>
{settingsInputBottom}
</Box>
)}
</Box>
);
};

331
src/components/HeaderBar/Settings/SettingsTabDisplay.tsx Normal file
View file

@ -0,0 +1,331 @@
import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { settingsAtom } from "../../../lib/store/jotai/settings";
import { SettingsCategoryTitle } from "./SettingsCategoryTitle";
import { SettingsItem } from "./SettingsItem";
interface SettingsTabDisplayProps {
sx?: any;
}
export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
// atoms
const [stagedSettings, setStagedSettings] = useAtom(settingsAtom);
const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
const newSettings = {
...stagedSettings,
display: {
...stagedSettings.display,
[settingKey]: settingValue,
},
};
setStagedSettings(newSettings);
};
return (
<Box sx={{ sx }}>
<SettingsCategoryTitle title="Basic settings" />
<SettingsItem
settingsDescription={
<>
<Typography>Dark mode</Typography>
</>
}
settingsInput={
<Switch
checked={stagedSettings.display.dark_mode}
name="dark_mode"
onChange={(e) => {
handleSettingsDisplayValueChange(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) => {
handleSettingsDisplayValueChange(e.target.name, e.target.value);
}}
sx={{
width: "100%",
}}
size="small"
type="color"
value={stagedSettings.display.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) => {
handleSettingsDisplayValueChange(e.target.name, e.target.value);
}}
select
size="small"
sx={{
maxWidth: "100%",
}}
value={stagedSettings.display.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) => {
handleSettingsDisplayValueChange("font_scaling", value);
}}
step={10}
value={stagedSettings.display.font_scaling}
valueLabelDisplay="auto"
/>
}
/>
<SettingsCategoryTitle 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) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.display.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) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.display.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) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.display.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) => {
handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
}}
sx={{
width: "100%",
}}
size="small"
type="number"
value={stagedSettings.display.window_width}
variant="standard"
/>
}
/>
</Box>
);
};