New: Show number of files as tooltip over size on disk

Closes #1966

Co-Authored-By: Robin Dadswell <19610103+RobinDadswell@users.noreply.github.com>
This commit is contained in:
Qstick 2022-12-11 22:02:46 -06:00
parent 848d2301a6
commit 21053885da
2 changed files with 63 additions and 29 deletions

View File

@ -218,6 +218,11 @@ class AlbumDetails extends Component {
onSearchPress onSearchPress
} = this.props; } = this.props;
const {
trackFileCount,
sizeOnDisk
} = statistics;
const { const {
isOrganizeModalOpen, isOrganizeModalOpen,
isRetagModalOpen, isRetagModalOpen,
@ -233,6 +238,14 @@ class AlbumDetails extends Component {
let expandIcon = icons.EXPAND_INDETERMINATE; let expandIcon = icons.EXPAND_INDETERMINATE;
let trackFilesCountMessage = translate('TrackFilesCountMessage');
if (trackFileCount === 1) {
trackFilesCountMessage = '1 track file';
} else if (trackFileCount > 1) {
trackFilesCountMessage = `${trackFileCount} track files`;
}
if (allExpanded) { if (allExpanded) {
expandIcon = icons.COLLAPSE; expandIcon = icons.COLLAPSE;
} else if (allCollapsed) { } else if (allCollapsed) {
@ -410,21 +423,32 @@ class AlbumDetails extends Component {
</span> </span>
</Label> </Label>
<Label <Tooltip
className={styles.detailsLabel} anchor={
size={sizes.LARGE} <Label
> className={styles.detailsLabel}
<Icon size={sizes.LARGE}
name={icons.DRIVE} >
size={17} <Icon
/> name={icons.DRIVE}
size={17}
/>
<span className={styles.sizeOnDisk}> <span className={styles.sizeOnDisk}>
{ {
formatBytes(statistics.sizeOnDisk || 0) formatBytes(sizeOnDisk || 0)
} }
</span> </span>
</Label> </Label>
}
tooltip={
<span>
{trackFilesCountMessage}
</span>
}
kind={kinds.INVERSE}
position={tooltipPositions.BOTTOM}
/>
<Label <Label
className={styles.detailsLabel} className={styles.detailsLabel}

View File

@ -453,22 +453,32 @@ class ArtistDetails extends Component {
</span> </span>
</Label> </Label>
<Label <Tooltip
className={styles.detailsLabel} anchor={
title={trackFilesCountMessage} <Label
size={sizes.LARGE} className={styles.detailsLabel}
> size={sizes.LARGE}
<Icon >
name={icons.DRIVE} <Icon
size={17} name={icons.DRIVE}
/> size={17}
/>
<span className={styles.sizeOnDisk}> <span className={styles.sizeOnDisk}>
{ {
formatBytes(sizeOnDisk || 0) formatBytes(sizeOnDisk || 0)
} }
</span> </span>
</Label> </Label>
}
tooltip={
<span>
{trackFilesCountMessage}
</span>
}
kind={kinds.INVERSE}
position={tooltipPositions.BOTTOM}
/>
<Label <Label
className={styles.detailsLabel} className={styles.detailsLabel}