New: AlbumStudio Disambiguation and AlbumType

pull/652/head
Qstick 6 years ago
parent f43c1e749f
commit 872080cf9e

@ -145,7 +145,7 @@ class AlbumStudio extends Component {
{ {
!isFetching && !!error && !isFetching && !!error &&
<div>Unable to load the calendar</div> <div>Unable to load the Album Studio</div>
} }
{ {

@ -1,4 +1,4 @@
.season { .album {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
overflow: hidden; overflow: hidden;
@ -13,6 +13,15 @@
padding: 0 4px; padding: 0 4px;
} }
.albumType {
padding: 0 4px;
border-width: 0 1px;
border-style: solid;
border-color: $borderColor;
background-color: $white;
color: $defaultColor;
}
.tracks { .tracks {
padding: 0 4px; padding: 0 4px;
background-color: $white; background-color: $white;
@ -22,3 +31,7 @@
.allTracks { .allTracks {
background-color: #e0ffe0; background-color: #e0ffe0;
} }
.missingWanted {
background-color: #ffe0e0;
}

@ -24,6 +24,8 @@ class AlbumStudioAlbum extends Component {
render() { render() {
const { const {
title, title,
disambiguation,
albumType,
monitored, monitored,
statistics, statistics,
isSaving isSaving
@ -36,7 +38,7 @@ class AlbumStudioAlbum extends Component {
} = statistics; } = statistics;
return ( return (
<div className={styles.season}> <div className={styles.album}>
<div className={styles.info}> <div className={styles.info}>
<MonitorToggleButton <MonitorToggleButton
monitored={monitored} monitored={monitored}
@ -46,7 +48,15 @@ class AlbumStudioAlbum extends Component {
<span> <span>
{ {
`${title}` disambiguation ? `${title} (${disambiguation})` : `${title}`
}
</span>
</div>
<div className={styles.albumType}>
<span>
{
`${albumType}`
} }
</span> </span>
</div> </div>
@ -54,6 +64,7 @@ class AlbumStudioAlbum extends Component {
<div <div
className={classNames( className={classNames(
styles.tracks, styles.tracks,
percentOfTracks < 100 && monitored && styles.missingWanted,
percentOfTracks === 100 && styles.allTracks percentOfTracks === 100 && styles.allTracks
)} )}
title={`${trackFileCount}/${totalTrackCount} tracks downloaded`} title={`${trackFileCount}/${totalTrackCount} tracks downloaded`}
@ -70,6 +81,8 @@ class AlbumStudioAlbum extends Component {
AlbumStudioAlbum.propTypes = { AlbumStudioAlbum.propTypes = {
id: PropTypes.number.isRequired, id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
disambiguation: PropTypes.string,
albumType: PropTypes.string.isRequired,
monitored: PropTypes.bool.isRequired, monitored: PropTypes.bool.isRequired,
statistics: PropTypes.object.isRequired, statistics: PropTypes.object.isRequired,
isSaving: PropTypes.bool.isRequired, isSaving: PropTypes.bool.isRequired,

@ -12,7 +12,7 @@
white-space: nowrap; white-space: nowrap;
} }
.seasons { .albums {
composes: cell from 'Components/Table/Cells/TableRowCell.css'; composes: cell from 'Components/Table/Cells/TableRowCell.css';
display: flex; display: flex;

@ -61,13 +61,13 @@ class AlbumStudioRow extends Component {
/> />
</TableRowCell> </TableRowCell>
<TableRowCell className={styles.seasons}> <TableRowCell className={styles.albums}>
{ {
albums.map((season) => { albums.map((album) => {
return ( return (
<AlbumStudioAlbum <AlbumStudioAlbum
key={season.id} key={album.id}
{...season} {...album}
onAlbumMonitoredPress={onAlbumMonitoredPress} onAlbumMonitoredPress={onAlbumMonitoredPress}
/> />
); );

Loading…
Cancel
Save