Skip to content

Commit 87a9f75

Browse files
justinnasjustinnas
authored
Merge pull request #47 from Strexas/JTE/PKFE-21
JTE/PKFE-21
2 parents f728b73 + 97ac505 commit 87a9f75

File tree

13 files changed

+228
-204
lines changed

13 files changed

+228
-204
lines changed

‎app/front-end/src/components/dialogs/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { SettingsDialog } from './settingsDialog/settingsDialog';
2+
export { ShortcutsDialog } from './shortcutsDialog/shortcutsDialog';

‎app/front-end/src/components/dialogs/shortcutsDialog/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export { ShortcutsDialog } from './shortcutsDialog';
2+
export { ShortcutsDivider } from './shortcutsDivider';
3+
export { ShortcutsLine } from './shortcutsLine';
4+
5+
export { Shortcuts } from './shortcutsData';

‎app/front-end/src/components/dialogs/shortcutsDialog/shortcutsData.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
interface ShortcutDataProps {
2+
windowsKeys: string[];
3+
macOSKeys: string[];
4+
description: string;
5+
}
6+
7+
export const Shortcuts: ShortcutDataProps[] = [
8+
{
9+
windowsKeys: ['CTRL', 'C'],
10+
macOSKeys: ['COMMAND', 'C'],
11+
description: 'Undo last action',
12+
},
13+
{
14+
windowsKeys: ['CTRL', 'Y'],
15+
macOSKeys: ['COMMAND', 'Y'],
16+
description: 'Redo last action',
17+
},
18+
{
19+
windowsKeys: ['CTRL', 'A'],
20+
macOSKeys: ['COMMAND', 'A'],
21+
description: 'Select everything',
22+
},
23+
{
24+
windowsKeys: ['CTRL', 'SHIFT', 'ESC'],
25+
macOSKeys: ['ALT', 'COMMAND', 'ESC'],
26+
description: 'Task manager',
27+
},
28+
];

‎app/front-end/src/components/dialogs/shortcutsDialog/shortcutsDialog.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Shortcuts, ShortcutsDivider, ShortcutsLine } from '@/components/dialogs/shortcutsDialog';
2+
import { Close as CloseIcon } from '@mui/icons-material';
3+
import {
4+
alpha,
5+
Box,
6+
Dialog,
7+
DialogContent,
8+
DialogTitle,
9+
Grid,
10+
IconButton,
11+
styled,
12+
Switch,
13+
Typography,
14+
useTheme,
15+
} from '@mui/material';
16+
import { useState } from 'react';
17+
18+
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
19+
backdropFilter: 'blur(5px)',
20+
'& .MuiDialogContent-root': {
21+
padding: '1.5rem',
22+
},
23+
'& .MuiDialogActions-root': {
24+
padding: '1.5rem',
25+
},
26+
'& .MuiDialog-paper': {
27+
borderRadius: '1.5rem',
28+
minWidth: '30%',
29+
backgroundColor: theme.palette.background.paper,
30+
backgroundImage: 'none',
31+
},
32+
}));
33+
34+
interface ShortcutsDialogProps {
35+
open: boolean;
36+
onClose: () => void;
37+
}
38+
39+
export const ShortcutsDialog = ({ open, onClose }: ShortcutsDialogProps) => {
40+
const Theme = useTheme();
41+
42+
const [isMac, setIsMac] = useState<boolean>(false);
43+
44+
const handleMacSwitch = () => {
45+
setIsMac((prevIsMac) => !prevIsMac);
46+
};
47+
48+
return (
49+
<BootstrapDialog onClose={onClose} open={open}>
50+
<Grid container spacing={2} justifyContent='center' alignItems='center'>
51+
<Grid item xs={8}>
52+
<DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
53+
Shortcuts
54+
</DialogTitle>
55+
</Grid>
56+
<Grid item xs={4}>
57+
<Box display='flex' justifyContent='flex-end'>
58+
<IconButton
59+
aria-label='close'
60+
onClick={onClose}
61+
sx={{
62+
color: Theme.palette.primary.main,
63+
mt: '0.5rem',
64+
mr: '1.5rem',
65+
}}
66+
>
67+
<CloseIcon />
68+
</IconButton>
69+
</Box>
70+
</Grid>
71+
</Grid>
72+
<DialogContent sx={{ borderTop: `1px solid ${alpha(Theme.palette.text.secondary, 0.3)}` }}>
73+
<Grid container display='flex' alignItems='center' pb='1rem' mt='-1rem'>
74+
<Grid item xs={6}>
75+
<Typography sx={{ fontWeight: '700', fontSize: '1rem' }}>
76+
{isMac ? 'MacOS' : 'Windows'} shortcuts
77+
</Typography>
78+
</Grid>
79+
<Grid item xs={6} display='flex' alignItems='center' justifyContent='flex-end'>
80+
<Typography fontSize='1rem'>MacOS</Typography>
81+
<Switch onChange={handleMacSwitch} checked={isMac} />
82+
</Grid>
83+
</Grid>
84+
{Shortcuts.map((shortcut, index) => (
85+
<Box key={index}>
86+
<ShortcutsLine
87+
key={index}
88+
windowsKeys={shortcut.windowsKeys}
89+
macOSKeys={shortcut.macOSKeys}
90+
macOS={isMac}
91+
description={shortcut.description}
92+
/>
93+
{index < Shortcuts.length - 1 && <ShortcutsDivider />}
94+
</Box>
95+
))}
96+
</DialogContent>
97+
</BootstrapDialog>
98+
);
99+
};

‎app/front-end/src/components/dialogs/shortcutsDialog/shortcutsDivider.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Divider } from '@mui/material';
2+
3+
export const ShortcutsDivider: React.FC = () => {
4+
return <Divider sx={{ mt: '0.5rem', mb: '0.5rem' }} />;
5+
};

‎app/front-end/src/components/dialogs/shortcutsDialog/shortcutsLine.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Box, Grid, Typography } from '@mui/material';
2+
import React from 'react';
3+
4+
interface ShortcutLineProps {
5+
windowsKeys: string[];
6+
macOSKeys: string[];
7+
description?: string;
8+
macOS?: boolean;
9+
}
10+
11+
export const ShortcutsLine: React.FC<ShortcutLineProps> = ({ windowsKeys, macOSKeys, description, macOS }) => {
12+
const macOSSymbols: { [key: string]: string } = {
13+
command: '⌘',
14+
option: '⌥',
15+
control: '⌃',
16+
shift: '⇧',
17+
delete: '⌫',
18+
return: '↩',
19+
escape: '⎋',
20+
capslock: '⇪',
21+
};
22+
23+
const keys = macOS ? macOSKeys.map((key) => macOSSymbols[key.toLowerCase()] || key) : windowsKeys;
24+
25+
return (
26+
<Grid container rowSpacing={2} alignItems='center'>
27+
<Grid item xs={7}>
28+
<Typography fontSize={'1rem'}>{description}</Typography>
29+
</Grid>
30+
<Grid item xs={5}>
31+
<Grid container alignItems='center'>
32+
{keys.map((key, index) => (
33+
<Grid item key={index}>
34+
<Box
35+
sx={{
36+
display: 'flex',
37+
alignItems: 'center',
38+
}}
39+
>
40+
<Typography
41+
sx={{
42+
padding: '4px 8px',
43+
borderRadius: '4px',
44+
backgroundColor: 'rgba(0, 0, 0, 0.1)',
45+
fontWeight: 'bold',
46+
fontSize: '0.8rem',
47+
}}
48+
>
49+
{key.toUpperCase()}
50+
</Typography>
51+
{index < keys.length - 1 && <Typography sx={{ marginX: '4px' }}>+</Typography>}
52+
</Box>
53+
</Grid>
54+
))}
55+
</Grid>
56+
</Grid>
57+
</Grid>
58+
);
59+
};

‎app/front-end/src/components/layouts/baseLayout.tsx

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IconTitleButton } from '@/components/buttons/IconTitleButton';
2-
import { SettingsDialog } from '@/components/dialogs/settingsDialog';
2+
import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs';
33
import { Colors } from '@/types';
44
import {
55
AutoMode as AutoModeIcon,
@@ -33,6 +33,14 @@ interface Props {
3333
export const BaseLayout: React.FC<Props> = ({ children }) => {
3434
const Theme = useTheme();
3535

36+
const [isShortcutsMenuOpen, setIsShortcutsMenuOpen] = useState(false);
37+
const handleShortcutsMenuOpen = () => {
38+
setIsShortcutsMenuOpen(true);
39+
};
40+
const handleShortcutsMenuClose = () => {
41+
setIsShortcutsMenuOpen(false);
42+
};
43+
3644
const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
3745
const handleSettingsDialogOpen = () => {
3846
setIsSettingsDialogOpen(true);
@@ -99,8 +107,15 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
99107
Version 1.0.02 {/* TODO: add application context provider to get values of it */}
100108
</Typography>
101109
</Box>
102-
<Box sx={{ width: '100%', height: 'calc(100vh - max(4%, 2.5rem))', display: 'flex', flexDirection: 'row' }}>
103-
<Box sx={{ width: 'max(4%, 4.688rem) ', height: '100%', display: 'flex', flexDirection: 'column' }}>
110+
<Box
111+
sx={{
112+
width: 'calc(100vw - 0.5rem)',
113+
height: 'calc(100vh - max(4%, 2.5rem))',
114+
display: 'flex',
115+
flexDirection: 'row',
116+
}}
117+
>
118+
<Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
104119
<Box
105120
sx={{
106121
width: '100%',
@@ -146,13 +161,22 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
146161
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
147162
/>
148163
}
164+
onClick={handleShortcutsMenuOpen}
149165
/>
150166
</Box>
151167
</Box>
152-
<Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
168+
<Box
169+
sx={{
170+
width: '95.75%',
171+
height: 'calc(100% - 0.5rem)',
172+
borderRadius: '0.625rem',
173+
bgcolor: Theme.palette.secondary.main,
174+
}}
175+
>
153176
{children}
154177
</Box>
155178
<SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
179+
<ShortcutsDialog open={isShortcutsMenuOpen} onClose={handleShortcutsMenuClose} />
156180
</Box>
157181
</Box>
158182
);

‎app/front-end/src/components/modals/settingsDialog/settingsDialog.tsx

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎app/front-end/src/components/modals/settingsDialog/settingsFields/colorModeSetting.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎app/front-end/src/components/modals/settingsDialog/settingsFields/languageSetting.tsx

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)