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"
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="lookandfeel">Look & Feel</StyledNavItem>
<StyledNavItem eventKey="other">Other</StyledNavItem>

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

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

7
src/redux/configSlice.ts

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

Loading…
Cancel
Save