diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index 09d13f31f..2c9c3a7e5 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -1,9 +1,7 @@ -import React, { cloneElement, isValidElement, useState } from 'react' +import React from 'react' import { BooleanField, Datagrid, - DatagridBody, - DatagridRow, DateField, NumberField, Show, @@ -29,6 +27,16 @@ const useStyles = makeStyles({ marginTop: '-2px', verticalAlign: 'text-top', }, + row: { + '&:hover': { + '& $contextMenu': { + visibility: 'visible', + }, + }, + }, + contextMenu: { + visibility: 'hidden', + }, }) const AlbumDetails = (props) => { @@ -48,37 +56,6 @@ const AlbumDetails = (props) => { ) } -const AlbumDatagridRow = ({ children, ...rest }) => { - const [visible, setVisible] = useState(false) - const childCount = React.Children.count(children) - return ( - setVisible(true)} - onMouseLeave={() => setVisible(false)} - {...rest} - > - {React.Children.map( - children, - (child, index) => - child && - isValidElement(child) && - (index < childCount - 1 - ? child - : cloneElement(child, { - visible, - })) - )} - - ) -} - -const AlbumDatagridBody = (props) => ( - } /> -) -const AlbumDatagrid = (props) => ( - } /> -) - const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { const classes = useStyles() const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) @@ -98,7 +75,12 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { {...rest} /> ) : ( - } rowClick={'show'} {...rest}> + } + rowClick={'show'} + classes={{ row: classes.row }} + {...rest} + > {isDesktop && } @@ -109,11 +91,13 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { source={'starred'} sortBy={'starred ASC, starredAt ASC'} sortByOrder={'DESC'} + className={classes.contextMenu} label={ } + textAlign={'right'} /> - + ) } diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js index e3e546974..8ba829cd7 100644 --- a/ui/src/artist/ArtistList.js +++ b/ui/src/artist/ArtistList.js @@ -1,9 +1,7 @@ -import React, { cloneElement, isValidElement, useState } from 'react' +import React from 'react' import { useHistory } from 'react-router-dom' import { Datagrid, - DatagridBody, - DatagridRow, Filter, NumberField, SearchInput, @@ -28,6 +26,16 @@ const useStyles = makeStyles({ marginTop: '-2px', verticalAlign: 'text-top', }, + row: { + '&:hover': { + '& $contextMenu': { + visibility: 'visible', + }, + }, + }, + contextMenu: { + visibility: 'hidden', + }, }) const ArtistFilter = (props) => ( @@ -41,37 +49,6 @@ const ArtistFilter = (props) => ( ) -const ArtistDatagridRow = ({ children, ...rest }) => { - const [visible, setVisible] = useState(false) - const childCount = React.Children.count(children) - return ( - setVisible(true)} - onMouseLeave={() => setVisible(false)} - {...rest} - > - {React.Children.map( - children, - (child, index) => - child && - isValidElement(child) && - (index < childCount - 1 - ? child - : cloneElement(child, { - visible, - })) - )} - - ) -} - -const ArtistDatagridBody = (props) => ( - } /> -) -const ArtistDatagrid = (props) => ( - } /> -) - const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => { const classes = useStyles() const handleArtistLink = useGetHandleArtistClick(width) @@ -87,7 +64,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => { {...rest} /> ) : ( - + @@ -96,11 +73,13 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => { source={'starred'} sortBy={'starred ASC, starredAt ASC'} sortByOrder={'DESC'} + className={classes.contextMenu} label={ } + textAlign={'right'} /> - + ) } diff --git a/ui/src/common/ContextMenus.js b/ui/src/common/ContextMenus.js index 8ed47d248..5cc46da86 100644 --- a/ui/src/common/ContextMenus.js +++ b/ui/src/common/ContextMenus.js @@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem' import MoreVertIcon from '@material-ui/icons/MoreVert' import { makeStyles } from '@material-ui/core/styles' import { useDataProvider, useNotify, useTranslate } from 'react-admin' +import clsx from 'clsx' import { playNext, addTracks, @@ -25,7 +26,6 @@ const useStyles = makeStyles({ }, menu: { color: (props) => props.color, - visibility: (props) => (props.visible ? 'visible' : 'hidden'), }, }) @@ -34,10 +34,10 @@ const ContextMenu = ({ showStar, record, color, - visible, + className, songQueryParams, }) => { - const classes = useStyles({ color, visible }) + const classes = useStyles({ color }) const dataProvider = useDataProvider() const dispatch = useDispatch() const translate = useTranslate() @@ -129,11 +129,11 @@ const ContextMenu = ({ const open = Boolean(anchorEl) return ( - + ( AlbumContextMenu.propTypes = { record: PropTypes.object, discNumber: PropTypes.number, - visible: PropTypes.bool, color: PropTypes.string, showStar: PropTypes.bool, } AlbumContextMenu.defaultProps = { - visible: true, showStar: true, addLabel: true, } @@ -206,13 +204,11 @@ export const ArtistContextMenu = (props) => ( ArtistContextMenu.propTypes = { record: PropTypes.object, - visible: PropTypes.bool, color: PropTypes.string, showStar: PropTypes.bool, } ArtistContextMenu.defaultProps = { - visible: true, showStar: true, addLabel: true, } diff --git a/ui/src/common/StarButton.js b/ui/src/common/StarButton.js index 133f35d15..44206de9d 100644 --- a/ui/src/common/StarButton.js +++ b/ui/src/common/StarButton.js @@ -10,8 +10,7 @@ import subsonic from '../subsonic' const useStyles = makeStyles({ star: { color: (props) => props.color, - visibility: (props) => - props.visible || props.starred ? 'visible' : 'hidden', + visibility: (props) => (props.starred ? 'visible' : 'inherit'), }, })