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 window section to settings

Browse source
This commit is contained in:
Vomitblood 2024-08-07 11:43:32 +08:00
parent 67c72909ff
commit 19e1b05faa
9 changed files with 178 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Generic/Initialization.tsx
View file

@ -1,8 +1,11 @@
import { useEffect } from "react";
import Paths from "../../lib/path";
import { createDir, exists } from "@tauri-apps/api/fs";
import { useEffect } from "react";
import { useSettings } from "../../contexts/SettingsContext";
import Paths from "../../lib/path";
export const Initialization = () => {
const { settings } = useSettings();
useEffect(() => {
const initializePaths = async () => {
try {
@ -17,8 +20,14 @@ export const Initialization = () => {
if (!configDirectoryExists) await createDir(Paths.getPath("configDirectory"));
};
const fullscreen = async () => {
const { appWindow } = await import("@tauri-apps/api/window");
await appWindow.setFullscreen(true);
};
initializePaths().then(() => createDirectories());
});
if (settings.window.start_fullscreen) fullscreen();
}, []);
return null;
};

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

@ -51,13 +51,6 @@ export const HeaderBar = () => {
flexDirection: "row",
}}
>
<IconButton
onClick={() => {
router.push("/testing");
}}
>
<BugReportOutlined />
</IconButton>
<Settings />
<WindowButtons />
</Stack>

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

@ -1,20 +1,23 @@
import { SettingsOutlined } from "@mui/icons-material";
import { BugReportOutlined, SettingsOutlined } from "@mui/icons-material";
import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Button, IconButton, Tab, useTheme } from "@mui/material";
import { Box, Button, IconButton, Tab, Tooltip, useTheme } from "@mui/material";
import { useAtom } from "jotai";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useSettings } from "../../../contexts/SettingsContext";
import { settingsAtom } from "../../../lib/store/jotai/settings";
import { stagedSettingsAtom } from "../../../lib/store/jotai/settings";
import { FloatingDialog } from "../../Generic/FloatingDialog";
import { SettingsTabDisplay } from "./SettingsTabDisplay";
import { SettingsTabDisplay } from "./SettingsTabs/SettingsTabDisplay";
import { SettingsTabWindow } from "./SettingsTabs/SettingsTabWindow";
export const Settings = () => {
// contexts
const theme = useTheme();
const { settings, updateSettings, resetSettings } = useSettings();
const { settings, updateSettings } = useSettings();
const router = useRouter();
// atoms
const [stagedSettings, setStagedSettings] = useAtom(settingsAtom);
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
// states
const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
@ -61,10 +64,23 @@ export const Settings = () => {
return (
<FloatingDialog
actionButtons={
<>
<IconButton
onClick={() => {
router.push("/testing");
}}
sx={{
mr: 1,
}}
>
<BugReportOutlined />
</IconButton>
</>
}
body={
<Box
sx={{
// TODO: make look nice
border: "1px solid " + theme.palette.grey[700],
borderRadius: settings.display.radius + "px",
display: "flex",
@ -90,6 +106,10 @@ export const Settings = () => {
label="Display"
value="display"
/>
<Tab
label="Window"
value="window"
/>
</TabList>
<Box
overflow="auto"
@ -104,6 +124,12 @@ export const Settings = () => {
>
<SettingsTabDisplay />
</TabPanel>
<TabPanel
sx={{ p: 2 }}
value="window"
>
<SettingsTabWindow />
</TabPanel>
</Box>
</TabContext>
</Box>
@ -151,12 +177,14 @@ export const Settings = () => {
close={closeSettings}
maximisedState={settingsMaximisedState}
openButton={
<IconButton
onClick={toggleSettings}
size="small"
>
<SettingsOutlined />
</IconButton>
<Tooltip title="Settings">
<IconButton
onClick={toggleSettings}
size="small"
>
<SettingsOutlined />
</IconButton>
</Tooltip>
}
openState={settingsOpenState}
setMaximisedState={setSettingsMaximisedState}

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

@ -1,9 +1,9 @@
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";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { SettingsCategoryTitle } from "../SettingsCategoryTitle";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabDisplayProps {
sx?: any;
@ -11,7 +11,7 @@ interface SettingsTabDisplayProps {
export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
// atoms
const [stagedSettings, setStagedSettings] = useAtom(settingsAtom);
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
const newSettings = {
@ -26,7 +26,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
return (
<Box sx={{ sx }}>
<SettingsCategoryTitle title="Basic settings" />
<SettingsCategoryTitle title="Styles" />
<SettingsItem
settingsDescription={
<>

81
src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx Normal file
View file

@ -0,0 +1,81 @@
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 { SettingsCategoryTitle } from "../SettingsCategoryTitle";
import { SettingsItem } from "../SettingsItem";
interface SettingsTabWindowProps {
sx?: any;
}
export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
// atoms
const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
const handleSettingsWindowValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
const newSettings = {
...stagedSettings,
window: {
...stagedSettings.window,
[settingKey]: settingValue,
},
};
setStagedSettings(newSettings);
};
return (
<Box sx={{ sx }}>
<SettingsCategoryTitle title="Fullscreen" />
<SettingsItem
settingsDescription={
<>
<Typography>Fullscreen on startup</Typography>
</>
}
settingsInput={
<Switch
checked={stagedSettings.window.start_fullscreen}
name="start_fullscreen"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
<SettingsCategoryTitle title="Titlebar Buttons" />
<SettingsItem
settingsDescription={
<>
<Typography>Minimize button</Typography>
</>
}
settingsInput={
<Switch
checked={stagedSettings.window.minimize_button}
name="minimize_button"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
<SettingsItem
settingsDescription={
<>
<Typography>Maximize button</Typography>
</>
}
settingsInput={
<Switch
checked={stagedSettings.window.maximize_button}
name="maximize_button"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
</Box>
);
};

0
src/contexts/LoadingContext.tsx
View file

59
src/contexts/ThemeContext.tsx
View file

@ -1,7 +1,8 @@
// TODO: add settings functionality, refer to whensapp project
import { FC, ReactNode } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { FC, ReactNode } from "react";
import { useSettings } from "./SettingsContext";
interface UserThemeProviderProps {
children: ReactNode;
@ -62,31 +63,33 @@ export const userPalette = {
};
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) {
// case "sans_serif":
// fontFamily = "GoogleSans, sans-serif";
// break;
// case "monospace":
// fontFamily = "JetBrainsMono, monospace";
// break;
// case "comic_sans":
// fontFamily = "ComicSans, sans-serif";
// break;
// case "system_font":
// fontFamily = "system-ui";
// break;
// }
switch (settings.display.font_family) {
case "sans_serif":
fontFamily = "GoogleSans, sans-serif";
break;
case "monospace":
fontFamily = "JetBrainsMono, monospace";
break;
case "comic_sans":
fontFamily = "ComicSans, sans-serif";
break;
case "system_font":
fontFamily = "system-ui";
break;
}
// font scaling settings
// const fontSize = (settings.display.font_scaling / 100) * 14;
const fontSize = (settings.display.font_scaling / 100) * 14;
const userTheme = createTheme({
typography: {
fontFamily: fontFamily,
// fontSize: fontSize,
fontSize: fontSize,
},
palette: {
mode: "dark",
@ -94,17 +97,17 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
},
transitions: {
duration: {
// shortest: settings.display.transition_duration,
// shorter: settings.display.transition_duration,
// short: settings.display.transition_duration,
// // most basic recommended timing
// standard: settings.display.transition_duration,
// // this is to be used in complex animations
// complex: settings.display.transition_duration,
// // recommended when something is entering screen
// enteringScreen: settings.display.transition_duration,
// // recommended when something is leaving screen
// leavingScreen: settings.display.transition_duration,
shortest: settings.display.transition_duration,
shorter: settings.display.transition_duration,
short: settings.display.transition_duration,
// most basic recommended timing
standard: settings.display.transition_duration,
// this is to be used in complex animations
complex: settings.display.transition_duration,
// recommended when something is entering screen
enteringScreen: settings.display.transition_duration,
// recommended when something is leaving screen
leavingScreen: settings.display.transition_duration,
},
},
components: {

13
src/lib/settings.ts
View file

@ -4,18 +4,19 @@ import { readTomlFile, writeTomlFile } from "./utils/toml";
export const defaultSettings = {
display: {
dark_mode: true as boolean,
accent_color: "#8ab4f8" as string,
transition_duration: 200 as number,
radius: 8 as number,
window_height: 60 as number,
window_width: 400 as number,
dark_mode: true as boolean,
font_family: "monospace" as string,
font_scaling: 100,
radius: 8 as number,
transition_duration: 200 as number,
window_height: 80 as number,
window_width: 400 as number,
},
window: {
minimize_button: false as boolean,
maximize_button: false as boolean,
minimize_button: false as boolean,
start_fullscreen: false as boolean, // TODO: this should be true on prod
},
};

2
src/lib/store/jotai/settings.ts
View file

@ -1,4 +1,4 @@
import { atom } from "jotai";
import { defaultSettings } from "../../settings";
export const settingsAtom = atom(defaultSettings);
export const stagedSettingsAtom = atom(defaultSettings);