mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix artists

This commit is contained in:
Deluan 2020-11-18 23:33:34 -05:00 committed by Deluan Quintão
parent d9893cf84d
commit 3209430ebd
4 changed files with 41 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui/src/album/AlbumListView.js
View File

@ -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 (
<DatagridRow
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
{...rest}
>
{React.Children.map(
children,
(child, index) =>
child &&
isValidElement(child) &&
(index < childCount - 1
? child
: cloneElement(child, {
visible,
}))
)}
</DatagridRow>
)
}
const AlbumDatagridBody = (props) => (
<DatagridBody {...props} row={<AlbumDatagridRow />} />
)
const AlbumDatagrid = (props) => (
<Datagrid {...props} body={<AlbumDatagridBody />} />
)
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}
/>
) : (
<AlbumDatagrid expand={<AlbumDetails />} rowClick={'show'} {...rest}>
<Datagrid
expand={<AlbumDetails />}
rowClick={'show'}
classes={{ row: classes.row }}
{...rest}
>
<TextField source="name" />
<ArtistLinkField source="artist" />
{isDesktop && <NumberField source="songCount" sortByOrder={'DESC'} />}
@ -109,11 +91,13 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
source={'starred'}
sortBy={'starred ASC, starredAt ASC'}
sortByOrder={'DESC'}
className={classes.contextMenu}
label={
<StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
}
textAlign={'right'}
/>
</AlbumDatagrid>
</Datagrid>
)
}

51
ui/src/artist/ArtistList.js
View File

@ -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) => (
</Filter>
)
const ArtistDatagridRow = ({ children, ...rest }) => {
const [visible, setVisible] = useState(false)
const childCount = React.Children.count(children)
return (
<DatagridRow
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
{...rest}
>
{React.Children.map(
children,
(child, index) =>
child &&
isValidElement(child) &&
(index < childCount - 1
? child
: cloneElement(child, {
visible,
}))
)}
</DatagridRow>
)
}
const ArtistDatagridBody = (props) => (
<DatagridBody {...props} row={<ArtistDatagridRow />} />
)
const ArtistDatagrid = (props) => (
<Datagrid {...props} body={<ArtistDatagridBody />} />
)
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}
/>
) : (
<ArtistDatagrid rowClick={handleArtistLink}>
<Datagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
<TextField source="name" />
<NumberField source="albumCount" sortByOrder={'DESC'} />
<NumberField source="songCount" sortByOrder={'DESC'} />
@ -96,11 +73,13 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
source={'starred'}
sortBy={'starred ASC, starredAt ASC'}
sortByOrder={'DESC'}
className={classes.contextMenu}
label={
<StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
}
textAlign={'right'}
/>
</ArtistDatagrid>
</Datagrid>
)
}

14
ui/src/common/ContextMenus.js
View File

@ -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 (
<span className={classes.noWrap}>
<span className={clsx(classes.noWrap, className)}>
<StarButton
record={record}
resource={resource}
visible={visible && showStar}
visible={showStar}
color={color}
/>
<IconButton
@ -181,13 +181,11 @@ export const AlbumContextMenu = (props) => (
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,
}

3
ui/src/common/StarButton.js
View File

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