Replace cursor with pointer when hovering over an expandable comment.

Fixes https://github.com/navidrome/navidrome/issues/637#issuecomment-778599670
This commit is contained in:
Deluan 2021-02-15 14:05:27 -05:00
parent 0d6717ce69
commit 781155ff39
1 changed files with 11 additions and 6 deletions

View File

@ -9,6 +9,7 @@ import {
useMediaQuery, useMediaQuery,
} from '@material-ui/core' } from '@material-ui/core'
import { useTranslate } from 'react-admin' import { useTranslate } from 'react-admin'
import clsx from 'clsx'
import Lightbox from 'react-image-lightbox' import Lightbox from 'react-image-lightbox'
import 'react-image-lightbox/style.css' import 'react-image-lightbox/style.css'
import subsonic from '../subsonic' import subsonic from '../subsonic'
@ -74,6 +75,9 @@ const useStyles = makeStyles((theme) => ({
marginTop: '1em', marginTop: '1em',
float: 'left', float: 'left',
}, },
pointerCursor: {
cursor: 'pointer',
},
})) }))
const AlbumComment = ({ record }) => { const AlbumComment = ({ record }) => {
@ -93,18 +97,19 @@ const AlbumComment = ({ record }) => {
setExpanded(!expanded) setExpanded(!expanded)
}, [expanded, setExpanded]) }, [expanded, setExpanded])
const numLines = record.comment.split('\n').length
return ( return (
<Collapse <Collapse
collapsedHeight={'1.5em'} collapsedHeight={'1.5em'}
in={expanded} in={expanded}
timeout={'auto'} timeout={'auto'}
className={classes.commentBlock} className={clsx(
> classes.commentBlock,
<Typography numLines > 1 && classes.pointerCursor
variant={'body1'} )}
className={classes.commentText}
onClick={handleExpandClick}
> >
<Typography variant={'body1'} onClick={handleExpandClick}>
{formatted} {formatted}
</Typography> </Typography>
</Collapse> </Collapse>