Skip to content

JTE/PKFE-20 #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/front-end/src/components/dialogs/settingsDialog/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { SettingsDialog } from './settingsDialog';
export { SettingSpacer } from './settingSpacer';
export { SettingsSelectField } from './settingsSelectField';
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Box } from '@mui/material';

export const SettingSpacer = ({ size = 3 }) => {
return <Box mb={size} />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { SettingSpacer } from '@/components/dialogs/settingsDialog';
import { ColorModeSetting, LanguageSetting, TimeZoneSetting } from '@/components/dialogs/settingsDialog/settingsFields';
import { Close as CloseIcon } from '@mui/icons-material';
import { alpha, Box, Dialog, DialogContent, DialogTitle, Grid, IconButton, styled, useTheme } from '@mui/material';

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
backdropFilter: 'blur(5px)',
'& .MuiDialogContent-root': {
padding: '1.5rem',
},
'& .MuiDialogActions-root': {
padding: '1.5rem',
},
'& .MuiDialog-paper': {
borderRadius: '1.5rem',
minWidth: '25%',
backgroundColor: theme.palette.background.paper,
backgroundImage: 'none',
},
}));

interface SettingsDialogProps {
open: boolean;
onClose: () => void;
}

export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, onClose }) => {
const Theme = useTheme();

return (
<BootstrapDialog onClose={onClose} open={open}>
<Grid container spacing={2} justifyContent='center' alignItems='center'>
<Grid item xs={8}>
<DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
Settings
</DialogTitle>
</Grid>
<Grid item xs={4}>
<Box display='flex' justifyContent='flex-end'>
<IconButton
aria-label='close'
onClick={onClose}
sx={{
color: Theme.palette.primary.main,
mt: '0.5rem',
mr: '1.5rem',
}}
>
<CloseIcon />
</IconButton>
</Box>
</Grid>
</Grid>
<DialogContent sx={{ borderTop: `1px solid ${alpha(Theme.palette.text.secondary, 0.3)}` }}>
<ColorModeSetting />
<SettingSpacer />
<LanguageSetting />
<SettingSpacer />
<TimeZoneSetting />
</DialogContent>
</BootstrapDialog>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
import { useThemeContext } from '@/hooks';

export const ColorModeSetting = () => {
const ThemeContext = useThemeContext();

const handleThemeChange = () => {
ThemeContext.update();
};

return (
<SettingsSelectField
title='Color mode'
description='Toggle between light and dark modes'
settings={[
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
]}
value={ThemeContext.mode}
onChange={handleThemeChange}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { ColorModeSetting } from './colorModeSetting';
export { LanguageSetting } from './languageSetting';
export { TimeZoneSetting } from './timeZoneSetting';
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
import { SelectChangeEvent } from '@mui/material';
import { useState } from 'react';

export const LanguageSetting = () => {
// TODO: Implement language switching functionality and replace with correct values

const [switchLanguage, setSwitchLanguage] = useState('en');

const handleLanguageChange = (event: SelectChangeEvent<string>) => {
const selectedLanguage = event.target.value;
setSwitchLanguage(selectedLanguage);
};

return (
<SettingsSelectField
title='Language'
description='Change the language of the application'
settings={[
{ value: 'en', label: 'English' },
{ value: 'lt', label: 'Lithuanian' },
{ value: 'it', label: 'Italian' },
]}
value={switchLanguage}
onChange={handleLanguageChange}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
import { SelectChangeEvent } from '@mui/material';
import { useState } from 'react';

export const TimeZoneSetting = () => {
// TODO: Implement time zone switching functionality and replace with correct values

const [switchTimeZone, setSwitchTimeZone] = useState('GMT+3');

const handleTimeZoneChange = (event: SelectChangeEvent<string>) => {
const selectedValue = event.target.value;
setSwitchTimeZone(selectedValue);
};

return (
<SettingsSelectField
title='Time zone'
description='Change the time zone of the application'
settings={[{ value: 'GMT+3', label: 'GMT+3' }]}
value={switchTimeZone}
onChange={handleTimeZoneChange}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Box, FormControl, Grid, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from '@mui/material';
import React from 'react';

interface Setting {
value: string | undefined;
label: string;
}

interface SettingsSelectFieldProps {
title: string;
description: string;
settings: Setting[];
value: string | undefined;
onChange: (event: SelectChangeEvent) => void;
}

export const SettingsSelectField: React.FC<SettingsSelectFieldProps> = ({
title,
description,
settings,
value,
onChange,
}) => {
const Theme = useTheme();

return (
<Grid container spacing={2} justifyContent='center' alignItems='center'>
<Grid item xs={8}>
<Typography sx={{ fontSize: '1.1rem', fontWeight: '500' }}>{title}</Typography>
<Typography sx={{ fontSize: '0.9rem', color: Theme.palette.text.secondary }}>{description}</Typography>
</Grid>
<Grid item xs={4}>
<Box display='flex' justifyContent='flex-end'>
<FormControl sx={{ minWidth: 120 }}>
<Select
value={value}
onChange={onChange}
displayEmpty
size='small'
inputProps={{ 'aria-label': 'Without label' }}
>
{settings.map((setting) => (
<MenuItem key={setting.value} value={setting.value}>
{setting.label}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
);
};
43 changes: 25 additions & 18 deletions app/front-end/src/components/layouts/baseLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import { IconTitleButton } from '@/components/buttons/IconTitleButton';
import { useThemeContext } from '@/hooks';
import { SettingsDialog } from '@/components/dialogs/settingsDialog';
import { Colors } from '@/types';
import { AutoMode, DarkMode, Home, LightMode, SettingsOutlined, SwitchAccessShortcut } from '@mui/icons-material';
import {
AutoMode as AutoModeIcon,
Home as HomeIcon,
SettingsOutlined as SettingsOutlinedIcon,
SwitchAccessShortcut as SwitchAccessShortcutIcon,
} from '@mui/icons-material';
import { Box, Typography, useTheme } from '@mui/material';
import { useState } from 'react';

interface Props {
children?: React.ReactNode;
Expand All @@ -26,7 +32,15 @@ interface Props {
*/
export const BaseLayout: React.FC<Props> = ({ children }) => {
const Theme = useTheme();
const ThemeContext = useThemeContext();

const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
const handleSettingsDialogOpen = () => {
setIsSettingsDialogOpen(true);
};
const handleSettingsDialogClose = () => {
setIsSettingsDialogOpen(false);
};

return (
<Box
sx={{
Expand Down Expand Up @@ -99,11 +113,11 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
}}
>
<IconTitleButton
icon={<Home sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
icon={<HomeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
title={'Home'}
/>
<IconTitleButton
icon={<AutoMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
icon={<AutoModeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
title={'Macros'}
/>
</Box>
Expand All @@ -120,32 +134,25 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
>
<IconTitleButton
icon={
<SettingsOutlined sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
<SettingsOutlinedIcon
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
/>
}
onClick={handleSettingsDialogOpen}
/>
<IconTitleButton
icon={
<SwitchAccessShortcut
<SwitchAccessShortcutIcon
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
/>
}
/>
{ThemeContext.mode === 'light' ? (
<IconTitleButton
icon={<DarkMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
onClick={() => ThemeContext.update()}
/>
) : (
<IconTitleButton
icon={<LightMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
onClick={() => ThemeContext.update()}
/>
)}
</Box>
</Box>
<Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strange width and height. Might be a problem in the future.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see how it could be problematic.

{children}
</Box>
<SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
</Box>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import ColorModeSetting from '@/components/modals/settingsDialog/settingsFields/colorModeSetting';
import LanguageSetting from '@/components/modals/settingsDialog/settingsFields/languageSetting';
import TimeZoneSetting from '@/components/modals/settingsDialog/settingsFields/timeZoneSetting';
import { SettingSpacer } from '@/components/modals/settingsDialog/settingSpacer';
import CloseIcon from '@mui/icons-material/Close';
import { Box, Grid } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import { styled, useTheme } from '@mui/material/styles';

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
backdropFilter: 'blur(5px)',
'& .MuiDialogContent-root': {
padding: '1.5rem',
},
'& .MuiDialogActions-root': {
padding: '1.5rem',
},
'& .MuiDialog-paper': {
borderRadius: '1.5rem',
minWidth: '25%',
backgroundColor: theme.palette.background.default,
},
}));

interface SettingsDialogProps {
open: boolean;
handleClose: () => void;
}

export default function SettingsDialog({ open, handleClose }: SettingsDialogProps) {
const Theme = useTheme();

return (
<BootstrapDialog onClose={handleClose} open={open}>
<Grid container spacing={2} justifyContent='center' alignItems='center'>
<Grid item xs={8}>
<DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
Settings
</DialogTitle>
</Grid>
<Grid item xs={4}>
<Box display='flex' justifyContent='flex-end'>
<IconButton
aria-label='close'
onClick={handleClose}
sx={{
color: Theme.palette.primary.main,
mt: '0.5rem',
mr: '1.5rem',
}}
>
<CloseIcon />
</IconButton>
</Box>
</Grid>
</Grid>
<DialogContent dividers>
<ColorModeSetting />
<SettingSpacer />
<LanguageSetting />
<SettingSpacer />
<TimeZoneSetting />
</DialogContent>
</BootstrapDialog>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import SettingsSelectField from '@/components/modals/settingsDialog/settingsSelectField';
import { useThemeContext } from '@/hooks';
import { SelectChangeEvent } from '@mui/material';
import { useState } from 'react';

export default function ColorModeSetting() {
const ThemeContext = useThemeContext();

const [switchTheme, setSwitchTheme] = useState(ThemeContext.mode);

const handleThemeChange = (event: SelectChangeEvent<string>) => {
const selectedTheme = event.target.value as 'light' | 'dark';
setSwitchTheme(selectedTheme);
ThemeContext.update();
};

return (
<SettingsSelectField
title='Color mode'
description='Toggle between light and dark modes'
settings={[
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
]}
value={switchTheme}
onChange={handleThemeChange}
/>
);
}
Loading
Loading