diff --git a/ui/src/album/AlbumShow.js b/ui/src/album/AlbumShow.js index 4253983b0..fab30017c 100644 --- a/ui/src/album/AlbumShow.js +++ b/ui/src/album/AlbumShow.js @@ -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 diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js index 09e64d228..1530934dc 100644 --- a/ui/src/album/AlbumSongs.js +++ b/ui/src/album/AlbumSongs.js @@ -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} />
0, + [classes.bulkActionsDisplayed]: props.selectedIds.length > 0, })} key={version} > - + } rowClick={(id) => dispatch(playTracks(data, ids, id))} - {...listContext} + {...props} hasBulkActions={true} showDiscSubtitles={true} contextAlwaysVisible={!isDesktop} + classes={{ row: classes.row }} > {isDesktop && ( { { sortByOrder={'DESC'} className={classes.contextMenu} label={ - + } - textAlign={'right'} /> ) diff --git a/ui/src/common/SongContextMenu.js b/ui/src/common/SongContextMenu.js index ff816af95..b7b50347f 100644 --- a/ui/src/common/SongContextMenu.js +++ b/ui/src/common/SongContextMenu.js @@ -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 ( - - {showStar && ( - - )} - + + + {}, record: {}, resource: 'song', - visible: true, showStar: true, addLabel: true, } diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js index 9147cbadc..5506f5d7f 100644 --- a/ui/src/common/SongDatagrid.js +++ b/ui/src/common/SongDatagrid.js @@ -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 = ({ setVisible(true)} - onMouseLeave={() => setVisible(false)} className={classes.row} > @@ -61,7 +61,8 @@ const DiscSubtitleRow = ({ record={{ id: record.albumId }} discNumber={record.discNumber} showStar={false} - visible={contextAlwaysVisible || visible} + className={classes.contextMenu} + visible={contextAlwaysVisible} /> @@ -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 = ({ )} 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} ) @@ -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) => ( - - } - /> - ) - return } /> + const SongDatagridBody = (props) => { + return ( + + } + /> + ) + } + return } classes={classes} /> } SongDatagrid.propTypes = { contextAlwaysVisible: PropTypes.bool, showDiscSubtitles: PropTypes.bool, + classes: PropTypes.object, } diff --git a/ui/src/common/StarButton.js b/ui/src/common/StarButton.js index 44206de9d..f0fee7342 100644 --- a/ui/src/common/StarButton.js +++ b/ui/src/common/StarButton.js @@ -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', }, }) diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index 75e124c0b..2a602df09 100644 --- a/ui/src/song/SongList.js +++ b/ui/src/song/SongList.js @@ -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) => ( @@ -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={} rowClick={handleRowClick} contextAlwaysVisible={!isDesktop} + classes={{ row: classes.row }} > {isDesktop && } @@ -94,6 +116,14 @@ const SongList = (props) => { source={'starred'} sortBy={'starred ASC, starredAt ASC'} sortByOrder={'DESC'} + className={classes.contextMenu} + label={ + + } + textAlign={'right'} /> )}