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

streamlined SettingsItem.tsx

Browse source
This commit is contained in:
Vomitblood 2024-08-07 12:43:17 +08:00
parent 2b2797af9d
commit cb13e299c9
3 changed files with 26 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@ export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description,
width: "60%", width: "60%",
}} }}
> >
{description} <Typography>{description}</Typography>
{defaultText && ( {defaultText && (
<Typography <Typography
color="lightgrey" color="lightgrey"

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

@ -1,11 +1,11 @@
import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material"; import { Box, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { FC } from "react"; import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings"; 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 { DevChip } from "../DevChip"; import { DevChip } from "../DevChip";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabStyleProps { interface SettingsTabStyleProps {
sx?: any; sx?: any;
@ -18,7 +18,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => { const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
const newSettings = { const newSettings = {
...stagedSettings, ...stagedSettings,
display: { style: {
...stagedSettings.style, ...stagedSettings.style,
[settingKey]: settingValue, [settingKey]: settingValue,
}, },
@ -33,10 +33,8 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
defaultText="On" defaultText="On"
description={ description={
<> <>
<Typography>
<BetaChip /> <BetaChip />
Dark mode Dark mode
</Typography>
</> </>
} }
input={ input={
@ -51,11 +49,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
/> />
<SettingsItem <SettingsItem
defaultText="#8ab4f8" defaultText="#8ab4f8"
description={ description="Accent color"
<>
<Typography>Accent color</Typography>
</>
}
input={ input={
<TextField <TextField
name="accent_color" name="accent_color"
@ -74,11 +68,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
/> />
<SettingsItem <SettingsItem
defaultText="Monospace" defaultText="Monospace"
description={ description="Font family"
<>
<Typography>Font family</Typography>
</>
}
inputLong={ inputLong={
<TextField <TextField
fullWidth fullWidth
@ -103,11 +93,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
/> />
<SettingsItem <SettingsItem
defaultText="100%" defaultText="100%"
description={ description="Font scaling"
<>
<Typography>Font scaling</Typography>
</>
}
inputBottom={ inputBottom={
<Slider <Slider
marks={[ marks={[
@ -149,10 +135,8 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
defaultText="200ms" defaultText="200ms"
description={ description={
<> <>
<Typography component="div">
<DevChip /> <DevChip />
Transition duration Transition duration
</Typography>
</> </>
} }
input={ input={
@ -176,26 +160,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
defaultText="8px"
description={ description={
<> <>
<Typography component="div"> <DevChip />
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Radius Radius
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 8px
</Typography>
</> </>
} }
input={ input={
@ -219,26 +188,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
defaultText="60%"
description={ description={
<> <>
<Typography component="div"> <DevChip />
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Window height Window height
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 60%
</Typography>
</> </>
} }
input={ input={
@ -262,26 +216,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
defaultText="400px"
description={ description={
<> <>
<Typography component="div"> <DevChip />
<Chip
color="warning"
label="Dev"
size="small"
sx={{
mr: 1,
}}
variant="outlined"
/>
Window width Window width
</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: 400px
</Typography>
</> </>
} }
input={ input={

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

@ -28,17 +28,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
<Box sx={{ sx }}> <Box sx={{ sx }}>
<CategoryTitle title="Fullscreen" /> <CategoryTitle title="Fullscreen" />
<SettingsItem <SettingsItem
description={ defaultText="On"
<> description="Fullscreen on startup"
<Typography>Fullscreen on startup</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: On
</Typography>
</>
}
input={ input={
<Switch <Switch
checked={stagedSettings.window.start_fullscreen} checked={stagedSettings.window.start_fullscreen}
@ -51,17 +42,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
/> />
<CategoryTitle title="Titlebar Buttons" /> <CategoryTitle title="Titlebar Buttons" />
<SettingsItem <SettingsItem
description={ defaultText="Off"
<> description="Minimize button"
<Typography>Minimize button</Typography>
<Typography
color="lightgrey"
variant="caption"
>
Default: On
</Typography>
</>
}
input={ input={
<Switch <Switch
checked={stagedSettings.window.minimize_button} checked={stagedSettings.window.minimize_button}
@ -73,11 +55,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
} }
/> />
<SettingsItem <SettingsItem
description={ defaultText="Off"
<> description="Maximize button"
<Typography>Maximize button</Typography>
</>
}
input={ input={
<Switch <Switch
checked={stagedSettings.window.maximize_button} checked={stagedSettings.window.maximize_button}