Add a tooltip for artist's popular tracks with full track name

nukeop · Sep 8, 2024 · 469626b · 469626b
1 parent 4e10741
commit 469626b
Show file tree

Hide file tree

Showing 5 changed files with 359 additions and 326 deletions.
diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -6,14 +6,13 @@ import { Button } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 
+import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
+import { TextCell } from '@nuclear/ui/lib/components/GridTrackTable/Cells/TextCell';
+import { Track } from '@nuclear/ui/lib/types';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
-import styles from './styles.scss';
-import { ArtistTopTrack } from '@nuclear/core/src/plugins/plugins.types';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import TrackTableCell from '@nuclear/ui/lib/components/TrackTable/Cells/TrackTableCell';
-import { Cell, CellProps } from 'react-table';
-import { Track } from '@nuclear/ui/lib/types';
+import styles from './styles.scss';
 
 type AddAllButtonProps = {
   handleAddAll: React.MouseEventHandler;
@@ -71,8 +70,8 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: (track: Track) => track.playcount,
-    Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
+    accessor: (track: Track) => Number(track.playcount).toLocaleString(),
+    Cell: TextCell
   }], []);
 
   return (
@@ -86,19 +85,24 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
           handleAddAll={handleAddAll}
           t={t}
         />
-        <TrackTableContainer
-          tracks={
-            _(tracks)
-              .sortBy('playcount')
-              .takeRight(expanded ? 15 : 5)
-              .value()
-          }
-          displayDeleteButton={false}
-          displayAlbum={false}
-          displayPosition={false}
-          displayArtist={false}
-          customColumns={customColumns}
-        />
+        <div 
+          className={styles.popular_tracks_table_container}
+          style={{ height: expanded ? `calc(48px + (${tracks.length}*42px))` : undefined }}
+        >
+          <TrackTableContainer
+            tracks={
+              _(tracks)
+                .sortBy('playcount')
+                .takeRight(expanded ? 15 : 5)
+                .value()
+            }
+            displayDeleteButton={false}
+            displayAlbum={false}
+            displayPosition={false}
+            displayArtist={false}
+            customColumns={customColumns}
+          />
+        </div>
         <div className='expand_button' onClick={toggleExpand}>
           <FontAwesome
             name={expanded ? 'angle-double-up' : 'angle-double-down'}

diff --git a/packages/app/app/components/ArtistView/PopularTracks/styles.scss b/packages/app/app/components/ArtistView/PopularTracks/styles.scss
@@ -14,6 +14,14 @@
     font-variant: all-small-caps;
   }
 
+  .popular_tracks_table_container {
+    height: calc(48px + (42px * 5)); // header + 5 rows
+
+    &.expanded {
+      height: auto;
+    }
+  }
+
   .expand_button {
     display: flex;
     justify-content: center;