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'),
},
})