Browse Source

Add config for resizable vs flexGrow columns

master
jeffvli 3 years ago
parent
commit
817f382832
  1. 26
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  2. 64
      src/components/settings/ListViewColumns.ts

26
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 = () => {
<br />
<ConfigPanel header="List-View" bordered>
<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
style={{ paddingTop: '10px' }}
activeKey={currentLAFTab}
@ -104,7 +118,7 @@ const LookAndFeelConfig = () => {
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',

64
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',

Loading…
Cancel
Save