blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add config for resizable vs flexGrow columns

master
jeffvli 3 years ago
parent
8f2ede75ef
commit
817f382832
2 changed files with 62 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  2. 64
      src/components/settings/ListViewColumns.ts

26
src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
View File

@ -16,19 +16,25 @@ import { setTheme, setFont, setDynamicBackground } from '../../../redux/miscSlic
import { import {
songColumnPicker, songColumnPicker,
songColumnList, songColumnList,
songColumnListAuto,
albumColumnPicker, albumColumnPicker,
albumColumnList, albumColumnList,
albumColumnListAuto,
playlistColumnPicker, playlistColumnPicker,
playlistColumnList, playlistColumnList,
playlistColumnListAuto,
artistColumnPicker, artistColumnPicker,
artistColumnList, artistColumnList,
artistColumnListAuto,
genreColumnPicker, genreColumnPicker,
genreColumnList, genreColumnList,
genreColumnListAuto,
} from '../ListViewColumns'; } from '../ListViewColumns';
const LookAndFeelConfig = () => { const LookAndFeelConfig = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [currentLAFTab, setCurrentLAFTab] = useState('songList'); const [currentLAFTab, setCurrentLAFTab] = useState('songList');
const [resizableColumn, setResizableColumn] = useState(false);
const songCols: any = settings.getSync('musicListColumns'); const songCols: any = settings.getSync('musicListColumns');
const albumCols: any = settings.getSync('albumListColumns'); const albumCols: any = settings.getSync('albumListColumns');
@ -87,6 +93,14 @@ const LookAndFeelConfig = () => {
<br /> <br />
<ConfigPanel header="List-View" bordered> <ConfigPanel header="List-View" bordered>
<p>Select the columns you want displayed on pages with a list-view.</p> <p>Select the columns you want displayed on pages with a list-view.</p>
<StyledCheckbox
defaultChecked={resizableColumn}
onChange={() => {
setResizableColumn(!resizableColumn);
}}
>
Use resizable columns (check/uncheck this before selecting columns)
</StyledCheckbox>
<Nav <Nav
style={{ paddingTop: '10px' }} style={{ paddingTop: '10px' }}
activeKey={currentLAFTab} activeKey={currentLAFTab}
@ -104,7 +118,7 @@ const LookAndFeelConfig = () => {
title="Song List" title="Song List"
defaultColumns={currentSongColumns} defaultColumns={currentSongColumns}
columnPicker={songColumnPicker} columnPicker={songColumnPicker}
columnList={songColumnList} columnList={resizableColumn ? songColumnList : songColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'musicListColumns', columnList: 'musicListColumns',
rowHeight: 'musicListRowHeight', rowHeight: 'musicListRowHeight',
@ -118,7 +132,7 @@ const LookAndFeelConfig = () => {
title="Album List" title="Album List"
defaultColumns={currentAlbumColumns} defaultColumns={currentAlbumColumns}
columnPicker={albumColumnPicker} columnPicker={albumColumnPicker}
columnList={albumColumnList} columnList={resizableColumn ? albumColumnList : albumColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'albumListColumns', columnList: 'albumListColumns',
rowHeight: 'albumListRowHeight', rowHeight: 'albumListRowHeight',
@ -132,7 +146,7 @@ const LookAndFeelConfig = () => {
title="Playlist List" title="Playlist List"
defaultColumns={currentPlaylistColumns} defaultColumns={currentPlaylistColumns}
columnPicker={playlistColumnPicker} columnPicker={playlistColumnPicker}
columnList={playlistColumnList} columnList={resizableColumn ? playlistColumnList : playlistColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'playlistListColumns', columnList: 'playlistListColumns',
rowHeight: 'playlistListRowHeight', rowHeight: 'playlistListRowHeight',
@ -146,7 +160,7 @@ const LookAndFeelConfig = () => {
title="Artist List" title="Artist List"
defaultColumns={currentArtistColumns} defaultColumns={currentArtistColumns}
columnPicker={artistColumnPicker} columnPicker={artistColumnPicker}
columnList={artistColumnList} columnList={resizableColumn ? artistColumnList : artistColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'artistListColumns', columnList: 'artistListColumns',
rowHeight: 'artistListRowHeight', rowHeight: 'artistListRowHeight',
@ -160,7 +174,7 @@ const LookAndFeelConfig = () => {
title="Genre List" title="Genre List"
defaultColumns={currentGenreColumns} defaultColumns={currentGenreColumns}
columnPicker={genreColumnPicker} columnPicker={genreColumnPicker}
columnList={genreColumnList} columnList={resizableColumn ? genreColumnList : genreColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'genreListColumns', columnList: 'genreListColumns',
rowHeight: 'genreListRowHeight', rowHeight: 'genreListRowHeight',
@ -174,7 +188,7 @@ const LookAndFeelConfig = () => {
title="Miniplayer List" title="Miniplayer List"
defaultColumns={currentMiniColumns} defaultColumns={currentMiniColumns}
columnPicker={songColumnPicker} columnPicker={songColumnPicker}
columnList={songColumnList} columnList={resizableColumn ? songColumnList : songColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'miniListColumns', columnList: 'miniListColumns',
rowHeight: 'miniListRowHeight', rowHeight: 'miniListRowHeight',

64
src/components/settings/ListViewColumns.ts
View File

@ -145,7 +145,7 @@ export const songColumnList = [
{ {
label: 'Track', label: 'Track',
value: { value: {
id: 'Track', id: 'Track #',
dataKey: 'track', dataKey: 'track',
alignment: 'left', alignment: 'left',
resizable: true, resizable: true,
@ -188,13 +188,15 @@ export const songColumnList = [
}, },
]; ];
export const songColumnAuto = [ export const songColumnListAuto = [
{ {
label: '# (Drag/Drop)', label: '# (Drag/Drop)',
value: { value: {
id: '#', id: '#',
dataKey: 'index', dataKey: 'index',
alignment: 'center', alignment: 'center',
resizable: true,
width: 50,
label: '# (Drag/Drop)', label: '# (Drag/Drop)',
}, },
}, },
@ -204,6 +206,7 @@ export const songColumnAuto = [
id: 'Album', id: 'Album',
dataKey: 'album', dataKey: 'album',
alignment: 'left', alignment: 'left',
flexGrow: 3,
label: 'Album', label: 'Album',
}, },
}, },
@ -213,6 +216,7 @@ export const songColumnAuto = [
id: 'Artist', id: 'Artist',
dataKey: 'artist', dataKey: 'artist',
alignment: 'left', alignment: 'left',
flexGrow: 3,
label: 'Artist', label: 'Artist',
}, },
}, },
@ -222,6 +226,7 @@ export const songColumnAuto = [
id: 'Bitrate', id: 'Bitrate',
dataKey: 'bitRate', dataKey: 'bitRate',
alignment: 'left', alignment: 'left',
flexGrow: 1,
label: 'Bitrate', label: 'Bitrate',
}, },
}, },
@ -231,6 +236,8 @@ export const songColumnAuto = [
id: 'Art', id: 'Art',
dataKey: 'coverart', dataKey: 'coverart',
alignment: 'center', alignment: 'center',
resizable: true,
width: 100,
label: 'CoverArt', label: 'CoverArt',
}, },
}, },
@ -240,6 +247,7 @@ export const songColumnAuto = [
id: 'Created', id: 'Created',
dataKey: 'created', dataKey: 'created',
alignment: 'left', alignment: 'left',
flexGrow: 2,
label: 'Created', label: 'Created',
}, },
}, },
@ -249,6 +257,7 @@ export const songColumnAuto = [
id: 'Duration', id: 'Duration',
dataKey: 'duration', dataKey: 'duration',
alignment: 'center', alignment: 'center',
flexGrow: 2,
label: 'Duration', label: 'Duration',
}, },
}, },
@ -258,6 +267,7 @@ export const songColumnAuto = [
id: 'Fav', id: 'Fav',
dataKey: 'starred', dataKey: 'starred',
alignment: 'center', alignment: 'center',
flexGrow: 1,
label: 'Favorite', label: 'Favorite',
}, },
}, },
@ -267,6 +277,7 @@ export const songColumnAuto = [
id: 'Path', id: 'Path',
dataKey: 'path', dataKey: 'path',
alignment: 'left', alignment: 'left',
flexGrow: 3,
label: 'Path', label: 'Path',
}, },
}, },
@ -276,6 +287,7 @@ export const songColumnAuto = [
id: 'Plays', id: 'Plays',
dataKey: 'playCount', dataKey: 'playCount',
alignment: 'center', alignment: 'center',
flexGrow: 1,
label: 'Play Count', label: 'Play Count',
}, },
}, },
@ -285,15 +297,17 @@ export const songColumnAuto = [
id: 'Rate', id: 'Rate',
dataKey: 'userRating', dataKey: 'userRating',
alignment: 'center', alignment: 'center',
flexGrow: 2,
label: 'Rating', label: 'Rating',
}, },
}, },
{ {
label: 'Track', label: 'Track',
value: { value: {
id: 'Track', id: 'Track #',
dataKey: 'track', dataKey: 'track',
alignment: 'left', alignment: 'left',
flexGrow: 1,
label: 'Track', label: 'Track',
}, },
}, },
@ -303,6 +317,7 @@ export const songColumnAuto = [
id: 'Title', id: 'Title',
dataKey: 'title', dataKey: 'title',
alignment: 'left', alignment: 'left',
flexGrow: 5,
label: 'Title', label: 'Title',
}, },
}, },
@ -312,8 +327,7 @@ export const songColumnAuto = [
id: 'Title', id: 'Title',
dataKey: 'combinedtitle', dataKey: 'combinedtitle',
alignment: 'left', alignment: 'left',
resizable: true, flexGrow: 5,
width: 300,
label: 'Title (Combined)', label: 'Title (Combined)',
}, },
}, },
@ -323,8 +337,7 @@ export const songColumnAuto = [
id: 'Year', id: 'Year',
dataKey: 'year', dataKey: 'year',
alignment: 'left', alignment: 'left',
resizable: true, flexGrow: 1,
width: 60,
label: 'Year', label: 'Year',
}, },
}, },
@ -481,7 +494,8 @@ export const albumColumnListAuto = [
id: '#', id: '#',
dataKey: 'index', dataKey: 'index',
alignment: 'center', alignment: 'center',
flexGrow: 1, resizable: true,
width: 50,
label: '#', label: '#',
}, },
}, },
@ -501,7 +515,8 @@ export const albumColumnListAuto = [
id: 'Art', id: 'Art',
dataKey: 'coverart', dataKey: 'coverart',
alignment: 'center', alignment: 'center',
flexGrow: 2, resizable: true,
width: 100,
label: 'CoverArt', label: 'CoverArt',
}, },
}, },
@ -744,7 +759,8 @@ export const playlistColumnListAuto = [
id: '#', id: '#',
dataKey: 'index', dataKey: 'index',
alignment: 'center', alignment: 'center',
flexGrow: 1, resizable: true,
width: 50,
label: '#', label: '#',
}, },
}, },
@ -754,7 +770,8 @@ export const playlistColumnListAuto = [
id: 'Art', id: 'Art',
dataKey: 'coverart', dataKey: 'coverart',
alignment: 'center', alignment: 'center',
flexGrow: 2, resizable: true,
width: 100,
label: 'CoverArt', label: 'CoverArt',
}, },
}, },
@ -938,7 +955,8 @@ export const artistColumnListAuto = [
id: '#', id: '#',
dataKey: 'index', dataKey: 'index',
alignment: 'center', alignment: 'center',
flexGrow: 1, resizable: true,
width: 50,
label: '#', label: '#',
}, },
}, },
@ -958,7 +976,8 @@ export const artistColumnListAuto = [
id: 'Art', id: 'Art',
dataKey: 'coverart', dataKey: 'coverart',
alignment: 'center', alignment: 'center',
flexGrow: 2, resizable: true,
width: 100,
label: 'CoverArt', label: 'CoverArt',
}, },
}, },
@ -996,7 +1015,7 @@ export const genreColumnPicker = [
{ label: '#' }, { label: '#' },
{ label: 'Album Count' }, { label: 'Album Count' },
{ label: 'Name' }, { label: 'Name' },
{ label: 'Song Count' }, { label: 'Track Count' },
]; ];
export const genreColumnList = [ export const genreColumnList = [
@ -1027,21 +1046,21 @@ export const genreColumnList = [
value: { value: {
id: 'Name', id: 'Name',
dataKey: 'name', dataKey: 'name',
alignment: 'center', alignment: 'left',
resizable: true, resizable: true,
width: 300, width: 300,
label: 'Name', label: 'Name',
}, },
}, },
{ {
label: 'Song Count', label: 'Track Count',
value: { value: {
id: 'Song Count', id: 'Tracks',
dataKey: 'songCount', dataKey: 'songCount',
alignment: 'center', alignment: 'center',
resizable: true, resizable: true,
width: 100, width: 100,
label: 'Song Count', label: 'Track Count',
}, },
}, },
]; ];
@ -1053,14 +1072,15 @@ export const genreColumnListAuto = [
id: '#', id: '#',
dataKey: 'index', dataKey: 'index',
alignment: 'center', alignment: 'center',
flexGrow: 1, resizable: true,
width: 50,
label: '#', label: '#',
}, },
}, },
{ {
label: 'Album Count', label: 'Album Count',
value: { value: {
id: 'Album Count', id: 'Albums',
dataKey: 'albumCount', dataKey: 'albumCount',
alignment: 'left', alignment: 'left',
flexGrow: 1, flexGrow: 1,
@ -1072,13 +1092,13 @@ export const genreColumnListAuto = [
value: { value: {
id: 'Name', id: 'Name',
dataKey: 'name', dataKey: 'name',
alignment: 'center', alignment: 'left',
flexGrow: 5, flexGrow: 5,
label: 'Name', label: 'Name',
}, },
}, },
{ {
label: 'Track Count', label: 'Tracks',
value: { value: {
id: 'Tracks', id: 'Tracks',
dataKey: 'songCount', dataKey: 'songCount',

Write Preview
Loading…
Cancel
Save