diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx index 0d56f99..0148168 100644 --- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx +++ b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx @@ -16,19 +16,25 @@ import { setTheme, setFont, setDynamicBackground } from '../../../redux/miscSlic import { songColumnPicker, songColumnList, + songColumnListAuto, albumColumnPicker, albumColumnList, + albumColumnListAuto, playlistColumnPicker, playlistColumnList, + playlistColumnListAuto, artistColumnPicker, artistColumnList, + artistColumnListAuto, genreColumnPicker, genreColumnList, + genreColumnListAuto, } from '../ListViewColumns'; const LookAndFeelConfig = () => { const dispatch = useAppDispatch(); const [currentLAFTab, setCurrentLAFTab] = useState('songList'); + const [resizableColumn, setResizableColumn] = useState(false); const songCols: any = settings.getSync('musicListColumns'); const albumCols: any = settings.getSync('albumListColumns'); @@ -87,6 +93,14 @@ const LookAndFeelConfig = () => { Select the columns you want displayed on pages with a list-view. + { + setResizableColumn(!resizableColumn); + }} + > + Use resizable columns (check/uncheck this before selecting columns) + { title="Song List" defaultColumns={currentSongColumns} columnPicker={songColumnPicker} - columnList={songColumnList} + columnList={resizableColumn ? songColumnList : songColumnListAuto} settingsConfig={{ columnList: 'musicListColumns', rowHeight: 'musicListRowHeight', @@ -118,7 +132,7 @@ const LookAndFeelConfig = () => { title="Album List" defaultColumns={currentAlbumColumns} columnPicker={albumColumnPicker} - columnList={albumColumnList} + columnList={resizableColumn ? albumColumnList : albumColumnListAuto} settingsConfig={{ columnList: 'albumListColumns', rowHeight: 'albumListRowHeight', @@ -132,7 +146,7 @@ const LookAndFeelConfig = () => { title="Playlist List" defaultColumns={currentPlaylistColumns} columnPicker={playlistColumnPicker} - columnList={playlistColumnList} + columnList={resizableColumn ? playlistColumnList : playlistColumnListAuto} settingsConfig={{ columnList: 'playlistListColumns', rowHeight: 'playlistListRowHeight', @@ -146,7 +160,7 @@ const LookAndFeelConfig = () => { title="Artist List" defaultColumns={currentArtistColumns} columnPicker={artistColumnPicker} - columnList={artistColumnList} + columnList={resizableColumn ? artistColumnList : artistColumnListAuto} settingsConfig={{ columnList: 'artistListColumns', rowHeight: 'artistListRowHeight', @@ -160,7 +174,7 @@ const LookAndFeelConfig = () => { title="Genre List" defaultColumns={currentGenreColumns} columnPicker={genreColumnPicker} - columnList={genreColumnList} + columnList={resizableColumn ? genreColumnList : genreColumnListAuto} settingsConfig={{ columnList: 'genreListColumns', rowHeight: 'genreListRowHeight', @@ -174,7 +188,7 @@ const LookAndFeelConfig = () => { title="Miniplayer List" defaultColumns={currentMiniColumns} columnPicker={songColumnPicker} - columnList={songColumnList} + columnList={resizableColumn ? songColumnList : songColumnListAuto} settingsConfig={{ columnList: 'miniListColumns', rowHeight: 'miniListRowHeight', diff --git a/src/components/settings/ListViewColumns.ts b/src/components/settings/ListViewColumns.ts index 66887f5..22860aa 100644 --- a/src/components/settings/ListViewColumns.ts +++ b/src/components/settings/ListViewColumns.ts @@ -145,7 +145,7 @@ export const songColumnList = [ { label: 'Track', value: { - id: 'Track', + id: 'Track #', dataKey: 'track', alignment: 'left', resizable: true, @@ -188,13 +188,15 @@ export const songColumnList = [ }, ]; -export const songColumnAuto = [ +export const songColumnListAuto = [ { label: '# (Drag/Drop)', value: { id: '#', dataKey: 'index', alignment: 'center', + resizable: true, + width: 50, label: '# (Drag/Drop)', }, }, @@ -204,6 +206,7 @@ export const songColumnAuto = [ id: 'Album', dataKey: 'album', alignment: 'left', + flexGrow: 3, label: 'Album', }, }, @@ -213,6 +216,7 @@ export const songColumnAuto = [ id: 'Artist', dataKey: 'artist', alignment: 'left', + flexGrow: 3, label: 'Artist', }, }, @@ -222,6 +226,7 @@ export const songColumnAuto = [ id: 'Bitrate', dataKey: 'bitRate', alignment: 'left', + flexGrow: 1, label: 'Bitrate', }, }, @@ -231,6 +236,8 @@ export const songColumnAuto = [ id: 'Art', dataKey: 'coverart', alignment: 'center', + resizable: true, + width: 100, label: 'CoverArt', }, }, @@ -240,6 +247,7 @@ export const songColumnAuto = [ id: 'Created', dataKey: 'created', alignment: 'left', + flexGrow: 2, label: 'Created', }, }, @@ -249,6 +257,7 @@ export const songColumnAuto = [ id: 'Duration', dataKey: 'duration', alignment: 'center', + flexGrow: 2, label: 'Duration', }, }, @@ -258,6 +267,7 @@ export const songColumnAuto = [ id: 'Fav', dataKey: 'starred', alignment: 'center', + flexGrow: 1, label: 'Favorite', }, }, @@ -267,6 +277,7 @@ export const songColumnAuto = [ id: 'Path', dataKey: 'path', alignment: 'left', + flexGrow: 3, label: 'Path', }, }, @@ -276,6 +287,7 @@ export const songColumnAuto = [ id: 'Plays', dataKey: 'playCount', alignment: 'center', + flexGrow: 1, label: 'Play Count', }, }, @@ -285,15 +297,17 @@ export const songColumnAuto = [ id: 'Rate', dataKey: 'userRating', alignment: 'center', + flexGrow: 2, label: 'Rating', }, }, { label: 'Track', value: { - id: 'Track', + id: 'Track #', dataKey: 'track', alignment: 'left', + flexGrow: 1, label: 'Track', }, }, @@ -303,6 +317,7 @@ export const songColumnAuto = [ id: 'Title', dataKey: 'title', alignment: 'left', + flexGrow: 5, label: 'Title', }, }, @@ -312,8 +327,7 @@ export const songColumnAuto = [ id: 'Title', dataKey: 'combinedtitle', alignment: 'left', - resizable: true, - width: 300, + flexGrow: 5, label: 'Title (Combined)', }, }, @@ -323,8 +337,7 @@ export const songColumnAuto = [ id: 'Year', dataKey: 'year', alignment: 'left', - resizable: true, - width: 60, + flexGrow: 1, label: 'Year', }, }, @@ -481,7 +494,8 @@ export const albumColumnListAuto = [ id: '#', dataKey: 'index', alignment: 'center', - flexGrow: 1, + resizable: true, + width: 50, label: '#', }, }, @@ -501,7 +515,8 @@ export const albumColumnListAuto = [ id: 'Art', dataKey: 'coverart', alignment: 'center', - flexGrow: 2, + resizable: true, + width: 100, label: 'CoverArt', }, }, @@ -744,7 +759,8 @@ export const playlistColumnListAuto = [ id: '#', dataKey: 'index', alignment: 'center', - flexGrow: 1, + resizable: true, + width: 50, label: '#', }, }, @@ -754,7 +770,8 @@ export const playlistColumnListAuto = [ id: 'Art', dataKey: 'coverart', alignment: 'center', - flexGrow: 2, + resizable: true, + width: 100, label: 'CoverArt', }, }, @@ -938,7 +955,8 @@ export const artistColumnListAuto = [ id: '#', dataKey: 'index', alignment: 'center', - flexGrow: 1, + resizable: true, + width: 50, label: '#', }, }, @@ -958,7 +976,8 @@ export const artistColumnListAuto = [ id: 'Art', dataKey: 'coverart', alignment: 'center', - flexGrow: 2, + resizable: true, + width: 100, label: 'CoverArt', }, }, @@ -996,7 +1015,7 @@ export const genreColumnPicker = [ { label: '#' }, { label: 'Album Count' }, { label: 'Name' }, - { label: 'Song Count' }, + { label: 'Track Count' }, ]; export const genreColumnList = [ @@ -1027,21 +1046,21 @@ export const genreColumnList = [ value: { id: 'Name', dataKey: 'name', - alignment: 'center', + alignment: 'left', resizable: true, width: 300, label: 'Name', }, }, { - label: 'Song Count', + label: 'Track Count', value: { - id: 'Song Count', + id: 'Tracks', dataKey: 'songCount', alignment: 'center', resizable: true, width: 100, - label: 'Song Count', + label: 'Track Count', }, }, ]; @@ -1053,14 +1072,15 @@ export const genreColumnListAuto = [ id: '#', dataKey: 'index', alignment: 'center', - flexGrow: 1, + resizable: true, + width: 50, label: '#', }, }, { label: 'Album Count', value: { - id: 'Album Count', + id: 'Albums', dataKey: 'albumCount', alignment: 'left', flexGrow: 1, @@ -1072,13 +1092,13 @@ export const genreColumnListAuto = [ value: { id: 'Name', dataKey: 'name', - alignment: 'center', + alignment: 'left', flexGrow: 5, label: 'Name', }, }, { - label: 'Track Count', + label: 'Tracks', value: { id: 'Tracks', dataKey: 'songCount',
Select the columns you want displayed on pages with a list-view.