-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(appStyle): various fixes & minor tweaks
- Loading branch information
Showing
9 changed files
with
193 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,130 @@ | ||
| import CheckIcon from '@mui/icons-material/Check'; | ||
| import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; | ||
| import DarkModeIcon from '@mui/icons-material/DarkMode'; | ||
| import HomeIcon from '@mui/icons-material/Home'; | ||
| import LightModeIcon from '@mui/icons-material/LightMode'; | ||
| import ListAltIcon from '@mui/icons-material/ListAlt'; | ||
| import SettingsIcon from '@mui/icons-material/Settings'; | ||
| import TimelineIcon from '@mui/icons-material/Timeline'; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Divider, | ||
| IconButton, | ||
| List, | ||
| ListItemButton, | ||
| ListItemIcon, | ||
| ListItemText, | ||
| SwipeableDrawer | ||
| } from '@mui/material'; | ||
| import { FC } from 'react'; | ||
| import { Link, useLocation } from 'react-router-dom'; | ||
|
|
||
| import { useAppSelector } from '../hooks/redux'; | ||
| import { selectThemeMode } from '../store/theme/theme.selectors'; | ||
|
|
||
| interface MenuItemProps { | ||
| icon: React.ReactNode; | ||
| name: string; | ||
| onClick: () => void; | ||
| selected: boolean; | ||
| url: string; | ||
| } | ||
| const MenuItem: FC<MenuItemProps> = ({ icon, name, onClick, selected, url }) => ( | ||
| <ListItemButton selected={selected} component={Link} to={url} key={name} onClick={onClick}> | ||
| <ListItemIcon>{icon}</ListItemIcon> | ||
| <ListItemText primary={name} /> | ||
| </ListItemButton> | ||
| ); | ||
|
|
||
| interface Props { | ||
| open: boolean; | ||
| toggleDrawerMenu: () => void; | ||
| toggleThemeMode: () => void; | ||
| width: string; | ||
| } | ||
|
|
||
| const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, toggleThemeMode, width }) => { | ||
| const themeMode = useAppSelector(selectThemeMode); | ||
| const currentPathName = useLocation().pathname; | ||
| const menuItems = [ | ||
| { | ||
| icon: <HomeIcon />, | ||
| name: 'Accueil', | ||
| url: '/' | ||
| }, | ||
| { | ||
| icon: <CheckIcon />, | ||
| name: 'Valider mes trackers', | ||
| url: '/trackers' | ||
| }, | ||
| { | ||
| icon: <ListAltIcon />, | ||
| name: 'Tous mes trackers', | ||
| url: '/trackers/manage' | ||
| }, | ||
| { | ||
| icon: <TimelineIcon />, | ||
| name: 'Statistiques', | ||
| url: '/stats' | ||
| }, | ||
| { | ||
| icon: <SettingsIcon />, | ||
| name: 'Paramètres', | ||
| url: '/settings' | ||
| } | ||
| ]; | ||
|
|
||
| return ( | ||
| <SwipeableDrawer | ||
| anchor="left" | ||
| onClose={toggleDrawerMenu} | ||
| onOpen={toggleDrawerMenu} | ||
| open={open} | ||
| sx={{ | ||
| width: width, | ||
| flexShrink: 0, | ||
| '& .MuiDrawer-paper': { | ||
| width: width, | ||
| boxSizing: 'border-box' | ||
| } | ||
| }}> | ||
| <Box display="flex" justifyContent="space-between"> | ||
| <IconButton sx={{ ml: 1 }} onClick={toggleThemeMode} color="inherit"> | ||
| {themeMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />} | ||
| </IconButton> | ||
| <IconButton onClick={toggleDrawerMenu}> | ||
| <ChevronLeftIcon /> | ||
| </IconButton> | ||
| </Box> | ||
| <Divider /> | ||
| <List> | ||
| {menuItems.map((mi) => ( | ||
| <MenuItem | ||
| key={mi.name} | ||
| icon={mi.icon} | ||
| name={mi.name} | ||
| onClick={toggleDrawerMenu} | ||
| selected={currentPathName === mi.url} | ||
| url={mi.url} | ||
| /> | ||
| ))} | ||
| </List> | ||
| <Divider /> | ||
| <Box display="flex" justifyContent="center" paddingY={1}> | ||
| <Button variant="contained" component={Link} onClick={toggleDrawerMenu} to="/about"> | ||
| À Propos | ||
| </Button> | ||
| </Box> | ||
| </SwipeableDrawer> | ||
| ); | ||
| }; | ||
|
|
||
| export default DrawerMenu; | ||
| import CheckIcon from '@mui/icons-material/Check'; | ||
| import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; | ||
| import DarkModeIcon from '@mui/icons-material/DarkMode'; | ||
| import HomeIcon from '@mui/icons-material/Home'; | ||
| import LightModeIcon from '@mui/icons-material/LightMode'; | ||
| import ListAltIcon from '@mui/icons-material/ListAlt'; | ||
| import SettingsIcon from '@mui/icons-material/Settings'; | ||
| import TimelineIcon from '@mui/icons-material/Timeline'; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Divider, | ||
| IconButton, | ||
| List, | ||
| ListItemButton, | ||
| ListItemIcon, | ||
| ListItemText, | ||
| SwipeableDrawer | ||
| } from '@mui/material'; | ||
| import { FC } from 'react'; | ||
| import { Link, useLocation } from 'react-router-dom'; | ||
|
|
||
| import { useAppSelector } from '../hooks/redux'; | ||
| import ThemeMode from '../models/ThemeMode'; | ||
| import PackageVersion from '../pages/About/PackageVersion'; | ||
| import { selectThemeMode } from '../store/theme/theme.selectors'; | ||
|
|
||
| interface MenuItemProps { | ||
| icon: React.ReactNode; | ||
| name: string; | ||
| onClick: () => void; | ||
| selected: boolean; | ||
| url: string; | ||
| } | ||
| const MenuItem: FC<MenuItemProps> = ({ icon, name, onClick, selected, url }) => { | ||
| const themeMode = useAppSelector(selectThemeMode); | ||
| const isDarkMode = themeMode === ThemeMode.DARK; | ||
| return ( | ||
| <ListItemButton selected={selected} component={Link} to={url} key={name} onClick={onClick}> | ||
| <ListItemIcon>{icon}</ListItemIcon> | ||
| <ListItemText primaryTypographyProps={{ color: isDarkMode ? '#fff' : '' }} primary={name} /> | ||
| </ListItemButton> | ||
| ); | ||
| }; | ||
|
|
||
| interface Props { | ||
| open: boolean; | ||
| toggleDrawerMenu: () => void; | ||
| toggleThemeMode: () => void; | ||
| width: string; | ||
| } | ||
|
|
||
| const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, toggleThemeMode, width }) => { | ||
| const themeMode = useAppSelector(selectThemeMode); | ||
| const currentPathName = useLocation().pathname; | ||
| const menuItems = [ | ||
| { | ||
| icon: <HomeIcon color="primary" />, | ||
| name: 'Accueil', | ||
| url: '/' | ||
| }, | ||
| { | ||
| icon: <CheckIcon color="primary" />, | ||
| name: 'Valider mes trackers', | ||
| url: '/trackers' | ||
| }, | ||
| { | ||
| icon: <ListAltIcon color="primary" />, | ||
| name: 'Tous mes trackers', | ||
| url: '/trackers/manage' | ||
| }, | ||
| { | ||
| icon: <TimelineIcon color="primary" />, | ||
| name: 'Statistiques', | ||
| url: '/stats' | ||
| }, | ||
| { | ||
| icon: <SettingsIcon color="primary" />, | ||
| name: 'Paramètres', | ||
| url: '/settings' | ||
| } | ||
| ]; | ||
|
|
||
| return ( | ||
| <SwipeableDrawer | ||
| anchor="left" | ||
| onClose={toggleDrawerMenu} | ||
| onOpen={toggleDrawerMenu} | ||
| open={open} | ||
| sx={{ | ||
| width: width, | ||
| flexShrink: 0, | ||
| '& .MuiDrawer-paper': { | ||
| width: width, | ||
| boxSizing: 'border-box' | ||
| } | ||
| }}> | ||
| <PackageVersion style={{ bottom: 0, right: 0, position: 'absolute' }} /> | ||
| <Box display="flex" justifyContent="space-between"> | ||
| <IconButton sx={{ ml: 1 }} onClick={toggleThemeMode} color="inherit"> | ||
| {themeMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />} | ||
| </IconButton> | ||
| <IconButton onClick={toggleDrawerMenu}> | ||
| <ChevronLeftIcon /> | ||
| </IconButton> | ||
| </Box> | ||
| <Divider /> | ||
| <List> | ||
| {menuItems.map((mi) => ( | ||
| <MenuItem | ||
| key={mi.name} | ||
| icon={mi.icon} | ||
| name={mi.name} | ||
| onClick={toggleDrawerMenu} | ||
| selected={currentPathName === mi.url} | ||
| url={mi.url} | ||
| /> | ||
| ))} | ||
| </List> | ||
| <Divider /> | ||
| <Box display="flex" justifyContent="center" paddingY={1}> | ||
| <Button variant="contained" component={Link} onClick={toggleDrawerMenu} to="/about"> | ||
| À Propos | ||
| </Button> | ||
| </Box> | ||
| </SwipeableDrawer> | ||
| ); | ||
| }; | ||
|
|
||
| export default DrawerMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 34 additions & 36 deletions
70
src/components/forms/TrackerColorPicker/TrackerColorButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,34 @@ | ||
| import { Box, Button, styled } from '@mui/material'; | ||
| import { FC } from 'react'; | ||
|
|
||
| interface BlockProps { | ||
| bg: string; | ||
| } | ||
| const ColorBlockButton = styled(Button)<BlockProps>((props) => ({ | ||
| background: props.bg, | ||
| boxShadow: '1px', | ||
| minHeight: '40px', | ||
| minWidth: '70px', | ||
| ':hover': { | ||
| background: props.bg | ||
| } | ||
| })); | ||
|
|
||
| interface Props { | ||
| colorCode: string; | ||
| isSelected: boolean; | ||
| onBlockClick: () => void; | ||
| } | ||
|
|
||
| const TrackerColorButton: FC<Props> = ({ colorCode, isSelected, onBlockClick }) => { | ||
| return ( | ||
| <Box boxShadow={1}> | ||
| <ColorBlockButton | ||
| id={colorCode} | ||
| sx={{ border: isSelected ? 1 : undefined }} | ||
| bg={colorCode} | ||
| onClick={onBlockClick}> | ||
| {isSelected && '✓'} | ||
| </ColorBlockButton> | ||
| </Box> | ||
| ); | ||
| }; | ||
| export default TrackerColorButton; | ||
| import { Button, styled } from '@mui/material'; | ||
| import { FC } from 'react'; | ||
|
|
||
| interface BlockProps { | ||
| bg: string; | ||
| } | ||
| const ColorBlockButton = styled(Button)<BlockProps>((props) => ({ | ||
| background: props.bg, | ||
| boxShadow: '1px', | ||
| minHeight: '40px', | ||
| minWidth: '70px', | ||
| ':hover': { | ||
| background: props.bg | ||
| } | ||
| })); | ||
|
|
||
| interface Props { | ||
| colorCode: string; | ||
| isSelected: boolean; | ||
| onBlockClick: () => void; | ||
| } | ||
|
|
||
| const TrackerColorButton: FC<Props> = ({ colorCode, isSelected, onBlockClick }) => { | ||
| return ( | ||
| <ColorBlockButton | ||
| id={colorCode} | ||
| sx={{ border: isSelected ? 2 : undefined, boxShadow: 1 }} | ||
| bg={colorCode} | ||
| onClick={onBlockClick}> | ||
| {isSelected && '✓'} | ||
| </ColorBlockButton> | ||
| ); | ||
| }; | ||
| export default TrackerColorButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.