Browse Source

Add selected column picker tab to state

master
jeffvli 3 years ago
committed by Jeff
parent
commit
2c10de91e8
  1. 5
      src/components/settings/Config.tsx
  2. 52
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  3. 7
      src/redux/configSlice.ts

5
src/components/settings/Config.tsx

@ -79,7 +79,10 @@ const Config = () => {
title="Config" title="Config"
subtitle={ subtitle={
<> <>
<Nav activeKey={config.active.tab} onSelect={(e) => dispatch(setActive({ tab: e }))}> <Nav
activeKey={config.active.tab}
onSelect={(e) => dispatch(setActive({ ...config.active, tab: e }))}
>
<StyledNavItem eventKey="playback">Playback</StyledNavItem> <StyledNavItem eventKey="playback">Playback</StyledNavItem>
<StyledNavItem eventKey="lookandfeel">Look & Feel</StyledNavItem> <StyledNavItem eventKey="lookandfeel">Look & Feel</StyledNavItem>
<StyledNavItem eventKey="other">Other</StyledNavItem> <StyledNavItem eventKey="other">Other</StyledNavItem>

52
src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@ -11,30 +11,25 @@ import {
} from '../../shared/styled'; } from '../../shared/styled';
import ListViewConfig from './ListViewConfig'; import ListViewConfig from './ListViewConfig';
import { Fonts } from '../Fonts'; import { Fonts } from '../Fonts';
import { useAppDispatch } from '../../../redux/hooks'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { setTheme, setFont, setDynamicBackground, setMiscSetting } from '../../../redux/miscSlice'; import { setTheme, setFont, setDynamicBackground, setMiscSetting } from '../../../redux/miscSlice';
import { import {
songColumnPicker, songColumnPicker,
songColumnList,
songColumnListAuto, songColumnListAuto,
albumColumnPicker, albumColumnPicker,
albumColumnList,
albumColumnListAuto, albumColumnListAuto,
playlistColumnPicker, playlistColumnPicker,
playlistColumnList,
playlistColumnListAuto, playlistColumnListAuto,
artistColumnPicker, artistColumnPicker,
artistColumnList,
artistColumnListAuto, artistColumnListAuto,
genreColumnPicker, genreColumnPicker,
genreColumnList,
genreColumnListAuto, genreColumnListAuto,
} from '../ListViewColumns'; } from '../ListViewColumns';
import { setActive } from '../../../redux/configSlice';
const LookAndFeelConfig = () => { const LookAndFeelConfig = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [currentLAFTab, setCurrentLAFTab] = useState('songList'); const config = useAppSelector((state) => state.config);
const [resizableColumn, setResizableColumn] = useState(false);
const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState( const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
Boolean(settings.getSync('dynamicBackground')) Boolean(settings.getSync('dynamicBackground'))
); );
@ -123,20 +118,23 @@ const LookAndFeelConfig = () => {
</StyledCheckbox> </StyledCheckbox>
</ConfigPanel> </ConfigPanel>
<ConfigPanel header="List-View" bordered> <ConfigPanel header="List-View" bordered>
<Nav activeKey={currentLAFTab} onSelect={(e) => setCurrentLAFTab(e)}> <Nav
<StyledNavItem eventKey="songList">Songs</StyledNavItem> activeKey={config.active.columnSelectorTab}
<StyledNavItem eventKey="albumList">Albums</StyledNavItem> onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
<StyledNavItem eventKey="playlistList">Playlists</StyledNavItem> >
<StyledNavItem eventKey="artistList">Artists</StyledNavItem> <StyledNavItem eventKey="music">Songs</StyledNavItem>
<StyledNavItem eventKey="genreList">Genres</StyledNavItem> <StyledNavItem eventKey="album">Albums</StyledNavItem>
<StyledNavItem eventKey="miniList">Miniplayer</StyledNavItem> <StyledNavItem eventKey="playlist">Playlists</StyledNavItem>
<StyledNavItem eventKey="artist">Artists</StyledNavItem>
<StyledNavItem eventKey="genre">Genres</StyledNavItem>
<StyledNavItem eventKey="mini">Miniplayer</StyledNavItem>
</Nav> </Nav>
{currentLAFTab === 'songList' && ( {config.active.columnSelectorTab === 'music' && (
<ListViewConfig <ListViewConfig
title="Song List" title="Song List"
defaultColumns={currentSongColumns} defaultColumns={currentSongColumns}
columnPicker={songColumnPicker} columnPicker={songColumnPicker}
columnList={resizableColumn ? songColumnList : songColumnListAuto} columnList={songColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'musicListColumns', columnList: 'musicListColumns',
rowHeight: 'musicListRowHeight', rowHeight: 'musicListRowHeight',
@ -145,12 +143,12 @@ const LookAndFeelConfig = () => {
/> />
)} )}
{currentLAFTab === 'albumList' && ( {config.active.columnSelectorTab === 'album' && (
<ListViewConfig <ListViewConfig
title="Album List" title="Album List"
defaultColumns={currentAlbumColumns} defaultColumns={currentAlbumColumns}
columnPicker={albumColumnPicker} columnPicker={albumColumnPicker}
columnList={resizableColumn ? albumColumnList : albumColumnListAuto} columnList={albumColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'albumListColumns', columnList: 'albumListColumns',
rowHeight: 'albumListRowHeight', rowHeight: 'albumListRowHeight',
@ -159,12 +157,12 @@ const LookAndFeelConfig = () => {
/> />
)} )}
{currentLAFTab === 'playlistList' && ( {config.active.columnSelectorTab === 'playlist' && (
<ListViewConfig <ListViewConfig
title="Playlist List" title="Playlist List"
defaultColumns={currentPlaylistColumns} defaultColumns={currentPlaylistColumns}
columnPicker={playlistColumnPicker} columnPicker={playlistColumnPicker}
columnList={resizableColumn ? playlistColumnList : playlistColumnListAuto} columnList={playlistColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'playlistListColumns', columnList: 'playlistListColumns',
rowHeight: 'playlistListRowHeight', rowHeight: 'playlistListRowHeight',
@ -173,12 +171,12 @@ const LookAndFeelConfig = () => {
/> />
)} )}
{currentLAFTab === 'artistList' && ( {config.active.columnSelectorTab === 'artist' && (
<ListViewConfig <ListViewConfig
title="Artist List" title="Artist List"
defaultColumns={currentArtistColumns} defaultColumns={currentArtistColumns}
columnPicker={artistColumnPicker} columnPicker={artistColumnPicker}
columnList={resizableColumn ? artistColumnList : artistColumnListAuto} columnList={artistColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'artistListColumns', columnList: 'artistListColumns',
rowHeight: 'artistListRowHeight', rowHeight: 'artistListRowHeight',
@ -187,12 +185,12 @@ const LookAndFeelConfig = () => {
/> />
)} )}
{currentLAFTab === 'genreList' && ( {config.active.columnSelectorTab === 'genre' && (
<ListViewConfig <ListViewConfig
title="Genre List" title="Genre List"
defaultColumns={currentGenreColumns} defaultColumns={currentGenreColumns}
columnPicker={genreColumnPicker} columnPicker={genreColumnPicker}
columnList={resizableColumn ? genreColumnList : genreColumnListAuto} columnList={genreColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'genreListColumns', columnList: 'genreListColumns',
rowHeight: 'genreListRowHeight', rowHeight: 'genreListRowHeight',
@ -201,12 +199,12 @@ const LookAndFeelConfig = () => {
/> />
)} )}
{currentLAFTab === 'miniList' && ( {config.active.columnSelectorTab === 'mini' && (
<ListViewConfig <ListViewConfig
title="Miniplayer List" title="Miniplayer List"
defaultColumns={currentMiniColumns} defaultColumns={currentMiniColumns}
columnPicker={songColumnPicker} columnPicker={songColumnPicker}
columnList={resizableColumn ? songColumnList : songColumnListAuto} columnList={songColumnListAuto}
settingsConfig={{ settingsConfig={{
columnList: 'miniListColumns', columnList: 'miniListColumns',
rowHeight: 'miniListRowHeight', rowHeight: 'miniListRowHeight',

7
src/redux/configSlice.ts

@ -1,5 +1,4 @@
import { nanoid } from 'nanoid/non-secure'; import { nanoid } from 'nanoid/non-secure';
import _ from 'lodash';
import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import settings from 'electron-settings'; import settings from 'electron-settings';
import { mockSettings } from '../shared/mockSettings'; import { mockSettings } from '../shared/mockSettings';
@ -10,6 +9,7 @@ const parsedSettings: any = process.env.NODE_ENV === 'test' ? mockSettings : set
export interface ConfigPage { export interface ConfigPage {
active: { active: {
tab: string; tab: string;
columnSelectorTab: string;
}; };
lookAndFeel: { lookAndFeel: {
listView: { listView: {
@ -28,6 +28,7 @@ export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | '
const initialState: ConfigPage = { const initialState: ConfigPage = {
active: { active: {
tab: 'playback', tab: 'playback',
columnSelectorTab: 'music',
}, },
lookAndFeel: { lookAndFeel: {
listView: { listView: {
@ -81,8 +82,8 @@ const configSlice = createSlice({
name: 'config', name: 'config',
initialState, initialState,
reducers: { reducers: {
setActive: (state, action: PayloadAction<{ tab: string }>) => { setActive: (state, action: PayloadAction<any>) => {
state.active.tab = action.payload.tab; state.active = action.payload;
}, },
setColumnList: (state, action: PayloadAction<{ listType: ColumnList; entries: any }>) => { setColumnList: (state, action: PayloadAction<{ listType: ColumnList; entries: any }>) => {

Loading…
Cancel
Save