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 blur for footer

Browse source
This commit is contained in:
Vomitblood 2024-08-07 13:54:22 +08:00
parent d3c0919473
commit 150bafb7bf
5 changed files with 78 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/FooterBar.tsx
View file

@ -4,16 +4,14 @@ 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",
backdropFilter: "blur(10px)",
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
flexDirection: "row",
height: "48px",

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

@ -9,8 +9,10 @@ export const HeaderBar = () => {
data-tauri-drag-region="true"
sx={{
alignItems: "center",
// backdropFilter: "blur(10px)",
// backgroundColor: "rgba(0, 0, 0, 0.5)",
// TODO: remove when done
borderBottom: "1px solid red",
// borderBottom: "1px solid red",
display: "flex",
flexDirection: "row",
height: "48px",

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

@ -27,8 +27,6 @@ export const Settings = () => {
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const toggleSettings = () => {
// reset the settings maximised state
setSettingsMaximisedState(false);
setSettingsOpenState((prevState) => !prevState);
};

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

@ -0,0 +1,72 @@
import { Box, Switch } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
import { CategoryTitle } from "../CategoryTitle";
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 }}>
<CategoryTitle title="Fullscreen" />
<SettingsItem
defaultText="On"
description="Fullscreen on startup"
input={
<Switch
checked={stagedSettings.window.start_fullscreen}
name="start_fullscreen"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
<CategoryTitle title="Titlebar Buttons" />
<SettingsItem
defaultText="Off"
description="Minimize button"
input={
<Switch
checked={stagedSettings.window.minimize_button}
name="minimize_button"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
<SettingsItem
defaultText="Off"
description="Maximize button"
input={
<Switch
checked={stagedSettings.window.maximize_button}
name="maximize_button"
onChange={(e) => {
handleSettingsWindowValueChange(e.target.name, e.target.checked);
}}
/>
}
/>
</Box>
);
};

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

@ -1,4 +1,4 @@
import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
import { Box, Switch } from "@mui/material";
import { useAtom } from "jotai";
import { FC } from "react";
import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";