Fix song context menu "on hover" visibility
This commit is contained in:
parent
f5808288ab
commit
a42fb024be
|
@ -10,7 +10,6 @@ import AlbumDetails from './AlbumDetails'
|
|||
import AlbumActions from './AlbumActions'
|
||||
|
||||
const AlbumShowLayout = (props) => {
|
||||
console.log('show', props)
|
||||
const { loading, ...context } = useShowContext(props)
|
||||
const { record } = context
|
||||
|
||||
|
|
|
@ -56,18 +56,26 @@ const useStyles = makeStyles(
|
|||
toolbar: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
row: {
|
||||
'&:hover': {
|
||||
'& $contextMenu': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
},
|
||||
contextMenu: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
}),
|
||||
{ name: 'RaList' }
|
||||
)
|
||||
|
||||
const AlbumSongs = (props) => {
|
||||
console.log('songs', props)
|
||||
const listContext = props
|
||||
const classes = useStyles(props)
|
||||
const dispatch = useDispatch()
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
const { id: album_id, data, ids } = listContext
|
||||
const { id: album_id, data, ids } = props
|
||||
const version = useVersion()
|
||||
return (
|
||||
<>
|
||||
|
@ -75,25 +83,26 @@ const AlbumSongs = (props) => {
|
|||
classes={{ toolbar: classes.toolbar }}
|
||||
actions={props.actions}
|
||||
permanentFilter={{ album_id }}
|
||||
{...listContext}
|
||||
{...props}
|
||||
/>
|
||||
<div className={classes.main}>
|
||||
<Card
|
||||
className={classnames(classes.content, {
|
||||
[classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
|
||||
[classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
|
||||
})}
|
||||
key={version}
|
||||
>
|
||||
<BulkActionsToolbar {...listContext}>
|
||||
<BulkActionsToolbar {...props}>
|
||||
<SongBulkActions />
|
||||
</BulkActionsToolbar>
|
||||
<SongDatagrid
|
||||
expand={isXsmall ? null : <SongDetails />}
|
||||
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
||||
{...listContext}
|
||||
{...props}
|
||||
hasBulkActions={true}
|
||||
showDiscSubtitles={true}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
classes={{ row: classes.row }}
|
||||
>
|
||||
{isDesktop && (
|
||||
<TextField
|
||||
|
@ -113,6 +122,7 @@ const AlbumSongs = (props) => {
|
|||
<SongContextMenu
|
||||
source={'starred'}
|
||||
sortable={false}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
fontSize={'small'}
|
||||
|
|
|
@ -21,7 +21,7 @@ import {
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
columnIcon: {
|
||||
contextHeader: {
|
||||
marginLeft: '3px',
|
||||
marginTop: '-2px',
|
||||
verticalAlign: 'text-top',
|
||||
|
@ -75,9 +75,11 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
|
|||
sortByOrder={'DESC'}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
|
||||
<StarBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.contextHeader}
|
||||
/>
|
||||
}
|
||||
textAlign={'right'}
|
||||
/>
|
||||
</Datagrid>
|
||||
)
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useTranslate } from 'react-admin'
|
|||
import { IconButton, Menu, MenuItem } from '@material-ui/core'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import MoreVertIcon from '@material-ui/icons/MoreVert'
|
||||
import clsx from 'clsx'
|
||||
import { playNext, addTracks, setTrack, openAddToPlaylist } from '../actions'
|
||||
import subsonic from '../subsonic'
|
||||
import { StarButton } from './StarButton'
|
||||
|
@ -15,9 +16,6 @@ const useStyles = makeStyles({
|
|||
noWrap: {
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
menu: {
|
||||
visibility: (props) => (props.visible ? 'visible' : 'hidden'),
|
||||
},
|
||||
})
|
||||
|
||||
export const SongContextMenu = ({
|
||||
|
@ -25,9 +23,9 @@ export const SongContextMenu = ({
|
|||
record,
|
||||
showStar,
|
||||
onAddToPlaylist,
|
||||
visible,
|
||||
className,
|
||||
}) => {
|
||||
const classes = useStyles({ visible })
|
||||
const classes = useStyles()
|
||||
const dispatch = useDispatch()
|
||||
const translate = useTranslate()
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
|
@ -88,11 +86,9 @@ export const SongContextMenu = ({
|
|||
const open = Boolean(anchorEl)
|
||||
|
||||
return (
|
||||
<span className={classes.noWrap}>
|
||||
{showStar && (
|
||||
<StarButton record={record} resource={resource} visible={visible} />
|
||||
)}
|
||||
<IconButton onClick={handleClick} size={'small'} className={classes.menu}>
|
||||
<span className={clsx(classes.noWrap, className)}>
|
||||
<StarButton record={record} resource={resource} visible={showStar} />
|
||||
<IconButton onClick={handleClick} size={'small'}>
|
||||
<MoreVertIcon fontSize={'small'} />
|
||||
</IconButton>
|
||||
<Menu
|
||||
|
@ -118,7 +114,6 @@ SongContextMenu.propTypes = {
|
|||
resource: PropTypes.string.isRequired,
|
||||
record: PropTypes.object.isRequired,
|
||||
onAddToPlaylist: PropTypes.func,
|
||||
visible: PropTypes.bool,
|
||||
showStar: PropTypes.bool,
|
||||
}
|
||||
|
||||
|
@ -126,7 +121,6 @@ SongContextMenu.defaultProps = {
|
|||
onAddToPlaylist: () => {},
|
||||
record: {},
|
||||
resource: 'song',
|
||||
visible: true,
|
||||
showStar: true,
|
||||
addLabel: true,
|
||||
}
|
||||
|
|
|
@ -1,23 +1,15 @@
|
|||
import React, {
|
||||
useState,
|
||||
isValidElement,
|
||||
cloneElement,
|
||||
useMemo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import React, { isValidElement, useMemo, useCallback } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { Datagrid, DatagridBody, DatagridRow } from 'react-admin'
|
||||
import { TableCell, TableRow, Typography } from '@material-ui/core'
|
||||
import PropTypes from 'prop-types'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import AlbumIcon from '@material-ui/icons/Album'
|
||||
import clsx from 'clsx'
|
||||
import { playTracks } from '../actions'
|
||||
import { AlbumContextMenu } from '../common'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
row: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
subtitle: {
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
|
@ -28,6 +20,17 @@ const useStyles = makeStyles({
|
|||
verticalAlign: 'text-top',
|
||||
marginRight: '4px',
|
||||
},
|
||||
row: {
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
'& $contextMenu': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
},
|
||||
contextMenu: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
})
|
||||
|
||||
const DiscSubtitleRow = ({
|
||||
|
@ -37,7 +40,6 @@ const DiscSubtitleRow = ({
|
|||
contextAlwaysVisible,
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
const [visible, setVisible] = useState(false)
|
||||
const handlePlayDisc = (discNumber) => () => {
|
||||
onClick(discNumber)
|
||||
}
|
||||
|
@ -45,8 +47,6 @@ const DiscSubtitleRow = ({
|
|||
<TableRow
|
||||
hover
|
||||
onClick={handlePlayDisc(record.discNumber)}
|
||||
onMouseEnter={() => setVisible(true)}
|
||||
onMouseLeave={() => setVisible(false)}
|
||||
className={classes.row}
|
||||
>
|
||||
<TableCell colSpan={colSpan}>
|
||||
|
@ -61,7 +61,8 @@ const DiscSubtitleRow = ({
|
|||
record={{ id: record.albumId }}
|
||||
discNumber={record.discNumber}
|
||||
showStar={false}
|
||||
visible={contextAlwaysVisible || visible}
|
||||
className={classes.contextMenu}
|
||||
visible={contextAlwaysVisible}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
@ -74,9 +75,10 @@ export const SongDatagridRow = ({
|
|||
firstTracks,
|
||||
contextAlwaysVisible,
|
||||
onClickDiscSubtitle,
|
||||
className,
|
||||
...rest
|
||||
}) => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const classes = useStyles()
|
||||
const fields = React.Children.toArray(children).filter((c) =>
|
||||
isValidElement(c)
|
||||
)
|
||||
|
@ -93,17 +95,10 @@ export const SongDatagridRow = ({
|
|||
)}
|
||||
<DatagridRow
|
||||
record={record}
|
||||
onMouseMove={() => setVisible(true)}
|
||||
onMouseLeave={() => setVisible(false)}
|
||||
{...rest}
|
||||
className={clsx(className, classes.row)}
|
||||
>
|
||||
{fields.map((child, index) =>
|
||||
index < childCount - 1
|
||||
? child
|
||||
: cloneElement(child, {
|
||||
visible: contextAlwaysVisible || visible,
|
||||
})
|
||||
)}
|
||||
{fields}
|
||||
</DatagridRow>
|
||||
</>
|
||||
)
|
||||
|
@ -124,6 +119,7 @@ SongDatagridRow.defaultProps = {
|
|||
export const SongDatagrid = ({
|
||||
contextAlwaysVisible,
|
||||
showDiscSubtitles,
|
||||
classes,
|
||||
...rest
|
||||
}) => {
|
||||
const dispatch = useDispatch()
|
||||
|
@ -161,22 +157,25 @@ export const SongDatagrid = ({
|
|||
return set
|
||||
}, [ids, data, showDiscSubtitles])
|
||||
|
||||
const SongDatagridBody = (props) => (
|
||||
<DatagridBody
|
||||
{...props}
|
||||
row={
|
||||
<SongDatagridRow
|
||||
firstTracks={firstTracks}
|
||||
contextAlwaysVisible={contextAlwaysVisible}
|
||||
onClickDiscSubtitle={playDisc}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
return <Datagrid {...rest} body={<SongDatagridBody />} />
|
||||
const SongDatagridBody = (props) => {
|
||||
return (
|
||||
<DatagridBody
|
||||
{...props}
|
||||
row={
|
||||
<SongDatagridRow
|
||||
firstTracks={firstTracks}
|
||||
contextAlwaysVisible={contextAlwaysVisible}
|
||||
onClickDiscSubtitle={playDisc}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <Datagrid {...rest} body={<SongDatagridBody />} classes={classes} />
|
||||
}
|
||||
|
||||
SongDatagrid.propTypes = {
|
||||
contextAlwaysVisible: PropTypes.bool,
|
||||
showDiscSubtitles: PropTypes.bool,
|
||||
classes: PropTypes.object,
|
||||
}
|
||||
|
|
|
@ -10,7 +10,12 @@ import subsonic from '../subsonic'
|
|||
const useStyles = makeStyles({
|
||||
star: {
|
||||
color: (props) => props.color,
|
||||
visibility: (props) => (props.starred ? 'visible' : 'inherit'),
|
||||
visibility: (props) =>
|
||||
props.starred
|
||||
? 'visible'
|
||||
: props.visible === false
|
||||
? 'hidden'
|
||||
: 'inherit',
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
@ -24,6 +24,26 @@ import { SongBulkActions } from '../common'
|
|||
import { SongListActions } from './SongListActions'
|
||||
import { AlbumLinkField } from './AlbumLinkField'
|
||||
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
contextHeader: {
|
||||
marginLeft: '3px',
|
||||
marginTop: '-2px',
|
||||
verticalAlign: 'text-top',
|
||||
},
|
||||
row: {
|
||||
'&:hover': {
|
||||
'& $contextMenu': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
},
|
||||
contextMenu: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
})
|
||||
|
||||
const SongFilter = (props) => (
|
||||
<Filter {...props} variant={'outlined'}>
|
||||
|
@ -37,6 +57,7 @@ const SongFilter = (props) => (
|
|||
)
|
||||
|
||||
const SongList = (props) => {
|
||||
const classes = useStyles()
|
||||
const dispatch = useDispatch()
|
||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
|
@ -74,6 +95,7 @@ const SongList = (props) => {
|
|||
expand={<SongDetails />}
|
||||
rowClick={handleRowClick}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
classes={{ row: classes.row }}
|
||||
>
|
||||
<SongTitleField source="title" showTrackNumbers={false} />
|
||||
{isDesktop && <AlbumLinkField source="album" />}
|
||||
|
@ -94,6 +116,14 @@ const SongList = (props) => {
|
|||
source={'starred'}
|
||||
sortBy={'starred ASC, starredAt ASC'}
|
||||
sortByOrder={'DESC'}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.contextHeader}
|
||||
/>
|
||||
}
|
||||
textAlign={'right'}
|
||||
/>
|
||||
</SongDatagrid>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue