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

49
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 }) => {
<List {...props} exporter={false} filters={<PlaylistFilter />}> const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
<Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r && r.owner)}> const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
<TextField source="name" />
<TextField source="owner" /> return (
<NumberField source="songCount" /> <List {...props} exporter={false} filters={<PlaylistFilter />}>
<DurationField source="duration" /> <Datagrid
<DateField source="updatedAt" sortByOrder={'DESC'} /> rowClick="show"
<TogglePublicInput isRowSelectable={(r) => isWritable(r && r.owner)}
source="public" >
permissions={permissions} <TextField source="name" />
sortByOrder={'DESC'} <TextField source="owner" />
/> {isDesktop && <NumberField source="songCount" />}
<Writable> {isDesktop && <DurationField source="duration" />}
<EditButton /> {isDesktop && <DateField source="updatedAt" sortByOrder={'DESC'} />}
</Writable> {!isXsmall && (
</Datagrid> <TogglePublicInput
</List> source="public"
) permissions={permissions}
sortByOrder={'DESC'}
/>
)}
<Writable>
<EditButton />
</Writable>
</Datagrid>
</List>
)
}
export default PlaylistList export default PlaylistList