leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add tooltip when hover teachers names

Browse source
This commit is contained in:
Leonardo Murça 2022-06-22 22:34:32 -03:00
parent bf87ed2f8c
commit b7b796c07c
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/ClassCard.js
View file

@ -7,6 +7,7 @@ import {
Avatar, Avatar,
Stack, Stack,
AvatarGroup, AvatarGroup,
Tooltip,
} from '@mui/material'; } from '@mui/material';
function ClassCard({ abbreviation, title, color, teachers, layoutType }) { function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
@ -54,19 +55,21 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
/> />
))} ))}
</AvatarGroup> </AvatarGroup>
<Typography <Tooltip title={teachers.map(t => t.name).join(', ')}>
sx={{ <Typography
overflow: 'hidden', sx={{
textOverflow: 'ellipsis', overflow: 'hidden',
display: '-webkit-box', textOverflow: 'ellipsis',
WebkitLineClamp: 2, display: '-webkit-box',
WebkitBoxOrient: 'vertical', WebkitLineClamp: 2,
}} WebkitBoxOrient: 'vertical',
variant="body2" }}
color="text.secondary" variant="body2"
> color="text.secondary"
{teachers.map(t => t.name).join(',')} >
</Typography> {teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack> </Stack>
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
@ -116,7 +119,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
variant="body2" variant="body2"
color="text.secondary" color="text.secondary"
> >
{teachers.map(t => t.name).join(',')} {teachers.map(t => t.name).join(', ')}
</Typography> </Typography>
</Stack> </Stack>
</CardContent> </CardContent>

4
src/context/user.js
View file

@ -34,10 +34,6 @@ const getClassrooms = userId =>
name: 'Alexandre Couto Cardoso', name: 'Alexandre Couto Cardoso',
avatar: '/assets/alex.jpg', avatar: '/assets/alex.jpg',
}, },
// {
// name: 'Alexandre Couto Cardoso',
// avatar: '/assets/alex.jpg',
// },
], ],
}, },
{ {