third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-09 11:52:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make Playlist grid more responsive

Browse Source
This commit is contained in:
Deluan 2021-04-24 11:29:12 -04:00
parent 0142352280
commit 79bbff0e98
1 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/playlist/PlaylistList.js
View File

@ -12,6 +12,7 @@ import {
} from 'react-admin' } from 'react-admin'
import Switch from '@material-ui/core/Switch' import Switch from '@material-ui/core/Switch'
import { DurationField, List, Writable, isWritable } from '../common' import { DurationField, List, Writable, isWritable } from '../common'
import { useMediaQuery } from '@material-ui/core'
const PlaylistFilter = (props) => ( const PlaylistFilter = (props) => (
<Filter {...props} variant={'outlined'}> <Filter {...props} variant={'outlined'}>
@ -55,24 +56,34 @@ const TogglePublicInput = ({ permissions, resource, record = {}, source }) => {
) )
} }
const PlaylistList = ({ permissions, ...props }) => ( const PlaylistList = ({ permissions, ...props }) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
return (
<List {...props} exporter={false} filters={<PlaylistFilter />}> <List {...props} exporter={false} filters={<PlaylistFilter />}>
<Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r && r.owner)}> <Datagrid
rowClick="show"
isRowSelectable={(r) => isWritable(r && r.owner)}
>
<TextField source="name" /> <TextField source="name" />
<TextField source="owner" /> <TextField source="owner" />
<NumberField source="songCount" /> {isDesktop && <NumberField source="songCount" />}
<DurationField source="duration" /> {isDesktop && <DurationField source="duration" />}
<DateField source="updatedAt" sortByOrder={'DESC'} /> {isDesktop && <DateField source="updatedAt" sortByOrder={'DESC'} />}
{!isXsmall && (
<TogglePublicInput <TogglePublicInput
source="public" source="public"
permissions={permissions} permissions={permissions}
sortByOrder={'DESC'} sortByOrder={'DESC'}
/> />
)}
<Writable> <Writable>
<EditButton /> <EditButton />
</Writable> </Writable>
</Datagrid> </Datagrid>
</List> </List>
) )
}
export default PlaylistList export default PlaylistList