Album details UI fix (#922)

* Fix the Album Details UI to look similar to Song Details UI

* Remove the unused components

* Fix the gap between row and the first field in the details view

* Fix the width of the row of Album Details UI

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: <TextField record={record} source="albumArtist" />,
+    genre: <TextField record={record} source="genre" />,
+    compilation: <BooleanField record={record} source="compilation" />,
+    updatedAt: <DateField record={record} source="updatedAt" showTime />,
+    comment: <MultiLineTextField record={record} source="comment" multiline />,
+  }
+  if (!record.comment) {
+    delete data.comment
+  }
   return (
     <Show {...props} title=" ">
-      <SimpleShowLayout>
+      <TableContainer component={Paper}>
-        <TextField source="albumArtist" />
+        <Table aria-label="album details" size="small">
-        <TextField source="genre" />
+          <TableBody>
-        <BooleanField source="compilation" />
+            {Object.keys(data).map((key) => {
-        <DateField source="updatedAt" showTime />
+              return (
-        <SizeField source="size" />
+                <TableRow key={`${record.id}-${key}`}>
-        {props.record && props.record['comment'] && (
+                  <TableCell
-          <MultiLineTextField source="comment" />
+                    component="th"
-        )}
+                    scope="row"
-      </SimpleShowLayout>
+                    className={classes.tableCell}
+                  >
+                    {translate(`resources.album.fields.${key}`, {
+                      _: inflection.humanize(inflection.underscore(key)),
+                    })}
+                    :
+                  </TableCell>
+                  <TableCell align="left">{data[key]}</TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </Show>
   )
 }

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 (
               <TableRow key={`${record.id}-${key}`}>
-                <TableCell component="th" scope="row">
+                <TableCell
+                  component="th"
+                  scope="row"
+                  className={classes.tableCell}
+                >
                   {translate(`resources.song.fields.${key}`, {
                     _: inflection.humanize(inflection.underscore(key)),
                   })}