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:15:01 +08:00
parent 19e1b05faa
commit 542b2ce483
13 changed files with 575 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/FooterBar.tsx
View file

@ -0,0 +1,59 @@
import { Settings } from "@mui/icons-material";
import { Box, Stack } from "@mui/material";
import { useRouter } from "next/router";
import { WindowButtons } from "./HeaderBar/WindowButtons";
export const FooterBar = () => {
const router = useRouter();
return (
<Box
className="titlebar"
data-tauri-drag-region="true"
sx={{
alignItems: "center",
// TODO: remove when done
borderTop: "1px solid red",
display: "flex",
flexDirection: "row",
height: "48px",
justifyContent: "space-between",
p: 1,
}}
>
<Box
className="titlebar"
data-tauri-drag-region="true"
sx={{
alignItems: "center",
display: "flex",
flexDirection: "row",
}}
>
hello this is the left side
</Box>
<Box
className="titlebar"
data-tauri-drag-region="true"
sx={{
alignItems: "center",
display: "flex",
flexDirection: "row",
}}
>
<Stack
direction="row"
spacing={2}
sx={{
alignItems: "center",
display: "flex",
flexDirection: "row",
}}
>
<Settings />
<WindowButtons />
</Stack>
</Box>
</Box>
);
};

8
src/components/Generic/FloatingDialog.tsx
View file

@ -41,10 +41,10 @@ export const FloatingDialog: FC<FloatingDialog> = ({
<Box
sx={{
bgcolor: "background.paper",
borderRadius: maximisedState ? "0px" : settings.display.radius + "px",
borderRadius: maximisedState ? "0px" : settings.style.radius + "px",
display: "flex",
flexDirection: "column",
height: maximisedState ? "100%" : settings.display.window_height + "%",
height: maximisedState ? "100%" : settings.style.window_height + "%",
left: "50%",
maxHeight: maximisedState ? "100vh" : "96vh",
maxWidth: maximisedState ? "100vw" : "96vw",
@ -53,8 +53,8 @@ export const FloatingDialog: FC<FloatingDialog> = ({
top: "50%",
transform: "translate(-50%, -50%)",
transition: "all ease-in-out",
transitionDuration: settings.display.transition_duration + "ms",
width: maximisedState ? "100vw" : settings.display.window_width + "px",
transitionDuration: settings.style.transition_duration + "ms",
width: maximisedState ? "100vw" : settings.style.window_width + "px",
}}
>
<Box

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

@ -1,10 +1,59 @@
import { Box } from "@mui/material";
import { FooterBar } from "../FooterBar";
import { HeaderBar } from "../HeaderBar/HeaderBar";
export const Layout = () => {
return (
<Box>
<Box
sx={{
backgroundColor: "#8ab4f8",
display: "flex",
flexDirection: "column",
height: "100vh",
}}
>
<HeaderBar />
<Box
sx={{
display: "flex",
flexGrow: 1,
overflow: "auto",
}}
>
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
kdfjdlfjdkfjdlfldkfj <br />
</Box>
<FooterBar />
</Box>
);
};

6
src/components/HeaderBar/HeaderBar.tsx
View file

@ -1,12 +1,8 @@
import { BugReportOutlined } from "@mui/icons-material";
import { Box, IconButton, Stack } from "@mui/material";
import { useRouter } from "next/router";
import { Box, Stack } from "@mui/material";
import { Settings } from "./Settings/Settings";
import { WindowButtons } from "./WindowButtons";
export const HeaderBar = () => {
const router = useRouter();
return (
<Box
className="titlebar"

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

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

4
src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx → src/components/HeaderBar/Settings/CategoryTitle.tsx
View file

@ -1,11 +1,11 @@
import { Box, Typography } from "@mui/material";
import { FC } from "react";
interface SettingsCategoryTitleProps {
interface CategoryTitleProps {
title: string;
}
export const SettingsCategoryTitle: FC<SettingsCategoryTitleProps> = ({ title }) => {
export const CategoryTitle: FC<CategoryTitleProps> = ({ title }) => {
return (
<Box
sx={{

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

@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
import { useSettings } from "../../../contexts/SettingsContext";
import { stagedSettingsAtom } from "../../../lib/store/jotai/settings";
import { FloatingDialog } from "../../Generic/FloatingDialog";
import { SettingsTabDisplay } from "./SettingsTabs/SettingsTabDisplay";
import { SettingsTabStyle } from "./SettingsTabs/SettingsTabStyle";
import { SettingsTabWindow } from "./SettingsTabs/SettingsTabWindow";
export const Settings = () => {
@ -82,7 +82,7 @@ export const Settings = () => {
<Box
sx={{
border: "1px solid " + theme.palette.grey[700],
borderRadius: settings.display.radius + "px",
borderRadius: settings.style.radius + "px",
display: "flex",
flexDirection: "column",
flexGrow: 1,
@ -103,8 +103,8 @@ export const Settings = () => {
variant="scrollable"
>
<Tab
label="Display"
value="display"
label="Style"
value="style"
/>
<Tab
label="Window"
@ -120,9 +120,9 @@ export const Settings = () => {
>
<TabPanel
sx={{ p: 2 }}
value="display"
value="style"
>
<SettingsTabDisplay />
<SettingsTabStyle />
</TabPanel>
<TabPanel
sx={{ p: 2 }}

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

@ -0,0 +1,340 @@
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>
);
};

38
src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx → src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx
View file

@ -2,14 +2,15 @@ import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typogra
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { SettingsCategoryTitle } from "../SettingsCategoryTitle";
import { BetaChip } from "../BetaChip";
import { CategoryTitle } from "../CategoryTitle";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabDisplayProps {
interface SettingsTabStyleProps {
sx?: any;
}
export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
// atoms
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
@ -17,7 +18,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
const newSettings = {
...stagedSettings,
display: {
...stagedSettings.display,
...stagedSettings.style,
[settingKey]: settingValue,
},
};
@ -26,16 +27,21 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
return (
<Box sx={{ sx }}>
<SettingsCategoryTitle title="Styles" />
<CategoryTitle title="Basic styles" />
<SettingsItem
settingsDescription={
<>
<Box
sx={{
display: "flex",
}}
>
<BetaChip />
<Typography>Dark mode</Typography>
</>
</Box>
}
settingsInput={
<Switch
checked={stagedSettings.display.dark_mode}
checked={stagedSettings.style.dark_mode}
name="dark_mode"
onChange={(e) => {
handleSettingsDisplayValueChange(e.target.name, e.target.checked);
@ -66,7 +72,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
}}
size="small"
type="color"
value={stagedSettings.display.accent_color}
value={stagedSettings.style.accent_color}
variant="standard"
/>
}
@ -95,7 +101,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
sx={{
maxWidth: "100%",
}}
value={stagedSettings.display.font_family || "monospace"}
value={stagedSettings.style.font_family || "monospace"}
variant="outlined"
>
<MenuItem value="monospace">Monospace</MenuItem>
@ -148,12 +154,12 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
handleSettingsDisplayValueChange("font_scaling", value);
}}
step={10}
value={stagedSettings.display.font_scaling}
value={stagedSettings.style.font_scaling}
valueLabelDisplay="auto"
/>
}
/>
<SettingsCategoryTitle title="Advanced settings" />
<CategoryTitle title="Advanced settings" />
<SettingsItem
settingsDescription={
<>
@ -192,7 +198,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
}}
size="small"
type="number"
value={stagedSettings.display.transition_duration}
value={stagedSettings.style.transition_duration}
variant="standard"
/>
}
@ -235,7 +241,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
}}
size="small"
type="number"
value={stagedSettings.display.radius}
value={stagedSettings.style.radius}
variant="standard"
/>
}
@ -278,7 +284,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
}}
size="small"
type="number"
value={stagedSettings.display.window_height}
value={stagedSettings.style.window_height}
variant="standard"
/>
}
@ -321,7 +327,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
}}
size="small"
type="number"
value={stagedSettings.display.window_width}
value={stagedSettings.style.window_width}
variant="standard"
/>
}

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

@ -2,7 +2,7 @@ import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typogra
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { SettingsCategoryTitle } from "../SettingsCategoryTitle";
import { CategoryTitle } from "../CategoryTitle";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabWindowProps {
@ -26,7 +26,7 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
return (
<Box sx={{ sx }}>
<SettingsCategoryTitle title="Fullscreen" />
<CategoryTitle title="Fullscreen" />
<SettingsItem
settingsDescription={
<>
@ -43,7 +43,7 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
/>
}
/>
<SettingsCategoryTitle title="Titlebar Buttons" />
<CategoryTitle title="Titlebar Buttons" />
<SettingsItem
settingsDescription={
<>

36
src/contexts/ThemeContext.tsx
View file

@ -8,16 +8,19 @@ interface UserThemeProviderProps {
children: ReactNode;
}
export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
const { settings } = useSettings();
// palette and accent settings
export const userPalette = {
const userPalette = {
primary: {
// light: '#a1c3f9',
main: "#8ab4f8",
main: settings.style.accent_color || "#8ab4f8",
// dark: '#4285f4',
},
secondary: {
// light: '#a1c3f9',
main: "#8ab4f8",
main: settings.style.accent_color || "#8ab4f8",
// dark: '#4285f4',
},
error: {
@ -57,18 +60,15 @@ export const userPalette = {
A700: "#616161",
},
background: {
paper: "#303134",
default: "#202124",
paper: settings.style.dark_mode ? "#303134" : "#fff",
default: settings.style.dark_mode ? "#202124" : "#fff",
},
};
export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
const { settings } = useSettings();
// font family settings
// TODO: figure out how to bundle fonts in tauri
let fontFamily = "GoogleSans";
switch (settings.display.font_family) {
switch (settings.style.font_family) {
case "sans_serif":
fontFamily = "GoogleSans, sans-serif";
break;
@ -84,7 +84,7 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
}
// font scaling settings
const fontSize = (settings.display.font_scaling / 100) * 14;
const fontSize = (settings.style.font_scaling / 100) * 14;
const userTheme = createTheme({
typography: {
@ -92,22 +92,22 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
fontSize: fontSize,
},
palette: {
mode: "dark",
mode: settings.style.dark_mode ? "dark" : "light",
...userPalette,
},
transitions: {
duration: {
shortest: settings.display.transition_duration,
shorter: settings.display.transition_duration,
short: settings.display.transition_duration,
shortest: settings.style.transition_duration,
shorter: settings.style.transition_duration,
short: settings.style.transition_duration,
// most basic recommended timing
standard: settings.display.transition_duration,
standard: settings.style.transition_duration,
// this is to be used in complex animations
complex: settings.display.transition_duration,
complex: settings.style.transition_duration,
// recommended when something is entering screen
enteringScreen: settings.display.transition_duration,
enteringScreen: settings.style.transition_duration,
// recommended when something is leaving screen
leavingScreen: settings.display.transition_duration,
leavingScreen: settings.style.transition_duration,
},
},
components: {

9
src/lib/settings.ts
View file

@ -3,7 +3,14 @@ import Paths from "./path";
import { readTomlFile, writeTomlFile } from "./utils/toml";
export const defaultSettings = {
display: {
background: {
background_color: "#8ab4f8" as string,
background_image: "" as string,
background_image_size: "cover" as string,
background_image_position: "center" as string,
background_image_repeat: "no-repeat" as string,
},
style: {
accent_color: "#8ab4f8" as string,
dark_mode: true as boolean,
font_family: "monospace" as string,

2
src/pages/testing.tsx
View file

@ -32,7 +32,7 @@ export default function Testing() {
<Button
onClick={() => {
updateSettings({
display: {
style: {
dark_mode: false as boolean,
accent_color: "#8ab4f8" as string,
transition_duration: 200 as number,