diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index dea990a64..e7c7e6c41 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -1,12 +1,19 @@ import React from 'react' +import Paper from '@material-ui/core/Paper' +import Table from '@material-ui/core/Table' +import TableBody from '@material-ui/core/TableBody' +import inflection from 'inflection' +import TableCell from '@material-ui/core/TableCell' +import TableContainer from '@material-ui/core/TableContainer' +import TableRow from '@material-ui/core/TableRow' import { BooleanField, Datagrid, DateField, NumberField, Show, - SimpleShowLayout, TextField, + useTranslate, } from 'react-admin' import { useMediaQuery } from '@material-ui/core' import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder' @@ -16,7 +23,6 @@ import { DurationField, RangeField, SimpleList, - SizeField, MultiLineTextField, AlbumContextMenu, } from '../common' @@ -35,24 +41,53 @@ const useStyles = makeStyles({ }, }, }, + tableCell: { + width: '17.5%', + }, contextMenu: { visibility: 'hidden', }, }) const AlbumDetails = (props) => { + const classes = useStyles() + const translate = useTranslate() + const { record } = props + const data = { + albumArtist: , + genre: , + compilation: , + updatedAt: , + comment: , + } + if (!record.comment) { + delete data.comment + } return ( - - - - - - - {props.record && props.record['comment'] && ( - - )} - + + + + {Object.keys(data).map((key) => { + return ( + + + {translate(`resources.album.fields.${key}`, { + _: inflection.humanize(inflection.underscore(key)), + })} + : + + {data[key]} + + ) + })} + +
+
) } diff --git a/ui/src/common/SongDetails.js b/ui/src/common/SongDetails.js index b26ceed22..57d1a7555 100644 --- a/ui/src/common/SongDetails.js +++ b/ui/src/common/SongDetails.js @@ -9,8 +9,16 @@ import { BooleanField, DateField, TextField, useTranslate } from 'react-admin' import inflection from 'inflection' import { BitrateField, SizeField } from './index' import { MultiLineTextField } from './MultiLineTextField' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles({ + tableCell: { + width: '17.5%', + }, +}) export const SongDetails = (props) => { + const classes = useStyles() const translate = useTranslate() const { record } = props const data = { @@ -42,7 +50,11 @@ export const SongDetails = (props) => { {Object.keys(data).map((key) => { return ( - + {translate(`resources.song.fields.${key}`, { _: inflection.humanize(inflection.underscore(key)), })}