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

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%",
}}
>
{description}
<Typography>{description}</Typography>
{defaultText && (
<Typography
color="lightgrey"

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

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

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