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
} = this.props;
const {
trackFileCount,
sizeOnDisk
} = statistics;
const {
isOrganizeModalOpen,
isRetagModalOpen,
@ -233,6 +238,14 @@ class AlbumDetails extends Component {
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) {
expandIcon = icons.COLLAPSE;
} else if (allCollapsed) {
@ -410,21 +423,32 @@ class AlbumDetails extends Component {
</span>
</Label>
<Label
className={styles.detailsLabel}
size={sizes.LARGE}
>
<Icon
name={icons.DRIVE}
size={17}
/>
<Tooltip
anchor={
<Label
className={styles.detailsLabel}
size={sizes.LARGE}
>
<Icon
name={icons.DRIVE}
size={17}
/>
<span className={styles.sizeOnDisk}>
{
formatBytes(statistics.sizeOnDisk || 0)
}
</span>
</Label>
<span className={styles.sizeOnDisk}>
{
formatBytes(sizeOnDisk || 0)
}
</span>
</Label>
}
tooltip={
<span>
{trackFilesCountMessage}
</span>
}
kind={kinds.INVERSE}
position={tooltipPositions.BOTTOM}
/>
<Label
className={styles.detailsLabel}

View File

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