Browse Source

Split grid/list view configs into separate components

master
jeffvli 3 years ago
committed by Jeff
parent
commit
5898f77abf
  1. 354
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

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

@ -38,28 +38,21 @@ import {
setGridGapSize, setGridGapSize,
} from '../../../redux/configSlice'; } from '../../../redux/configSlice';
const LookAndFeelConfig = () => { export const ListViewConfigPanel = ({ bordered }: any) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const config = useAppSelector((state) => state.config); const config = useAppSelector((state) => state.config);
const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
Boolean(settings.getSync('dynamicBackground'))
);
const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState( const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
Boolean(settings.getSync('highlightOnRowHover')) Boolean(settings.getSync('highlightOnRowHover'))
); );
const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
const themePickerContainerRef = useRef(null);
const fontPickerContainerRef = useRef(null);
const titleBarPickerContainerRef = useRef(null);
const [themeList, setThemeList] = useState(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
);
const songCols: any = settings.getSync('musicListColumns'); const songCols: any = settings.getSync('musicListColumns');
const albumCols: any = settings.getSync('albumListColumns'); const albumCols: any = settings.getSync('albumListColumns');
const playlistCols: any = settings.getSync('playlistListColumns'); const playlistCols: any = settings.getSync('playlistListColumns');
const artistCols: any = settings.getSync('artistListColumns'); const artistCols: any = settings.getSync('artistListColumns');
const miniCols: any = settings.getSync('miniListColumns'); const miniCols: any = settings.getSync('miniListColumns');
const genreCols: any = settings.getSync('genreListColumns'); const genreCols: any = settings.getSync('genreListColumns');
const currentSongColumns = songCols?.map((column: any) => column.label) || []; const currentSongColumns = songCols?.map((column: any) => column.label) || [];
const currentAlbumColumns = albumCols?.map((column: any) => column.label) || []; const currentAlbumColumns = albumCols?.map((column: any) => column.label) || [];
const currentPlaylistColumns = playlistCols?.map((column: any) => column.label) || []; const currentPlaylistColumns = playlistCols?.map((column: any) => column.label) || [];
@ -67,6 +60,188 @@ const LookAndFeelConfig = () => {
const currentMiniColumns = miniCols?.map((column: any) => column.label) || []; const currentMiniColumns = miniCols?.map((column: any) => column.label) || [];
const currentGenreColumns = genreCols?.map((column: any) => column.label) || []; const currentGenreColumns = genreCols?.map((column: any) => column.label) || [];
return (
<ConfigPanel header="List-View" bordered={bordered}>
<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>
{config.active.columnSelectorTab === 'music' && (
<ListViewConfig
title="Song List"
defaultColumns={currentSongColumns}
columnPicker={songColumnPicker}
columnList={songColumnListAuto}
settingsConfig={{
columnList: 'musicListColumns',
rowHeight: 'musicListRowHeight',
fontSize: 'musicListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'album' && (
<ListViewConfig
title="Album List"
defaultColumns={currentAlbumColumns}
columnPicker={albumColumnPicker}
columnList={albumColumnListAuto}
settingsConfig={{
columnList: 'albumListColumns',
rowHeight: 'albumListRowHeight',
fontSize: 'albumListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'playlist' && (
<ListViewConfig
title="Playlist List"
defaultColumns={currentPlaylistColumns}
columnPicker={playlistColumnPicker}
columnList={playlistColumnListAuto}
settingsConfig={{
columnList: 'playlistListColumns',
rowHeight: 'playlistListRowHeight',
fontSize: 'playlistListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'artist' && (
<ListViewConfig
title="Artist List"
defaultColumns={currentArtistColumns}
columnPicker={artistColumnPicker}
columnList={artistColumnListAuto}
settingsConfig={{
columnList: 'artistListColumns',
rowHeight: 'artistListRowHeight',
fontSize: 'artistListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'genre' && (
<ListViewConfig
title="Genre List"
defaultColumns={currentGenreColumns}
columnPicker={genreColumnPicker}
columnList={genreColumnListAuto}
settingsConfig={{
columnList: 'genreListColumns',
rowHeight: 'genreListRowHeight',
fontSize: 'genreListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'mini' && (
<ListViewConfig
title="Miniplayer List"
defaultColumns={currentMiniColumns}
columnPicker={songColumnPicker}
columnList={songColumnListAuto}
settingsConfig={{
columnList: 'miniListColumns',
rowHeight: 'miniListRowHeight',
fontSize: 'miniListFontSize',
}}
/>
)}
<br />
<StyledCheckbox
defaultChecked={highlightOnRowHoverChk}
checked={highlightOnRowHoverChk}
onChange={(_v: any, e: boolean) => {
settings.setSync('highlightOnRowHover', e);
dispatch(
setMiscSetting({
setting: 'highlightOnRowHover',
value: e,
})
);
setHighlightOnRowHoverChk(e);
}}
>
Show highlight on row hover
</StyledCheckbox>
</ConfigPanel>
);
};
export const GridViewConfigPanel = ({ bordered }: any) => {
const dispatch = useAppDispatch();
const config = useAppSelector((state) => state.config);
return (
<ConfigPanel header="Grid-View" bordered={bordered}>
<ControlLabel>Card size (px)</ControlLabel>
<StyledInputNumber
defaultValue={config.lookAndFeel.gridView.cardSize}
step={1}
min={100}
max={350}
width={150}
onChange={(e: any) => {
settings.setSync('gridCardSize', Number(e));
dispatch(setGridCardSize({ size: Number(e) }));
}}
/>
<br />
<ControlLabel>Gap size (px)</ControlLabel>
<StyledInputNumber
defaultValue={config.lookAndFeel.gridView.gapSize}
step={1}
min={0}
max={100}
width={150}
onChange={(e: any) => {
settings.setSync('gridGapSize', Number(e));
dispatch(setGridGapSize({ size: Number(e) }));
}}
/>
<br />
<ControlLabel>Grid alignment</ControlLabel>
<RadioGroup
name="gridAlignemntRadioList"
appearance="default"
defaultValue={config.lookAndFeel.gridView.alignment}
value={config.lookAndFeel.gridView.alignment}
onChange={(e: string) => {
dispatch(setGridAlignment({ alignment: e }));
settings.setSync('gridAlignment', e);
}}
>
<StyledRadio value="flex-start">Left</StyledRadio>
<StyledRadio value="center">Center</StyledRadio>
</RadioGroup>
</ConfigPanel>
);
};
const LookAndFeelConfig = () => {
const dispatch = useAppDispatch();
const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
Boolean(settings.getSync('dynamicBackground'))
);
const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
const themePickerContainerRef = useRef(null);
const fontPickerContainerRef = useRef(null);
const titleBarPickerContainerRef = useRef(null);
const [themeList, setThemeList] = useState(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
);
return ( return (
<> <>
<ConfigPanel header="Look & Feel" bordered> <ConfigPanel header="Look & Feel" bordered>
@ -161,162 +336,9 @@ const LookAndFeelConfig = () => {
Enable dynamic background Enable dynamic background
</StyledCheckbox> </StyledCheckbox>
</ConfigPanel> </ConfigPanel>
<ConfigPanel header="List-View" bordered>
<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>
{config.active.columnSelectorTab === 'music' && (
<ListViewConfig
title="Song List"
defaultColumns={currentSongColumns}
columnPicker={songColumnPicker}
columnList={songColumnListAuto}
settingsConfig={{
columnList: 'musicListColumns',
rowHeight: 'musicListRowHeight',
fontSize: 'musicListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'album' && (
<ListViewConfig
title="Album List"
defaultColumns={currentAlbumColumns}
columnPicker={albumColumnPicker}
columnList={albumColumnListAuto}
settingsConfig={{
columnList: 'albumListColumns',
rowHeight: 'albumListRowHeight',
fontSize: 'albumListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'playlist' && (
<ListViewConfig
title="Playlist List"
defaultColumns={currentPlaylistColumns}
columnPicker={playlistColumnPicker}
columnList={playlistColumnListAuto}
settingsConfig={{
columnList: 'playlistListColumns',
rowHeight: 'playlistListRowHeight',
fontSize: 'playlistListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'artist' && (
<ListViewConfig
title="Artist List"
defaultColumns={currentArtistColumns}
columnPicker={artistColumnPicker}
columnList={artistColumnListAuto}
settingsConfig={{
columnList: 'artistListColumns',
rowHeight: 'artistListRowHeight',
fontSize: 'artistListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'genre' && ( <ListViewConfigPanel bordered />
<ListViewConfig <GridViewConfigPanel bordered />
title="Genre List"
defaultColumns={currentGenreColumns}
columnPicker={genreColumnPicker}
columnList={genreColumnListAuto}
settingsConfig={{
columnList: 'genreListColumns',
rowHeight: 'genreListRowHeight',
fontSize: 'genreListFontSize',
}}
/>
)}
{config.active.columnSelectorTab === 'mini' && (
<ListViewConfig
title="Miniplayer List"
defaultColumns={currentMiniColumns}
columnPicker={songColumnPicker}
columnList={songColumnListAuto}
settingsConfig={{
columnList: 'miniListColumns',
rowHeight: 'miniListRowHeight',
fontSize: 'miniListFontSize',
}}
/>
)}
<br />
<StyledCheckbox
defaultChecked={highlightOnRowHoverChk}
checked={highlightOnRowHoverChk}
onChange={(_v: any, e: boolean) => {
settings.setSync('highlightOnRowHover', e);
dispatch(
setMiscSetting({
setting: 'highlightOnRowHover',
value: e,
})
);
setHighlightOnRowHoverChk(e);
}}
>
Show highlight on row hover
</StyledCheckbox>
</ConfigPanel>
<ConfigPanel header="Grid-View" bordered>
<ControlLabel>Card size (px)</ControlLabel>
<StyledInputNumber
defaultValue={config.lookAndFeel.gridView.cardSize}
step={1}
min={100}
max={350}
width={150}
onChange={(e: any) => {
settings.setSync('gridCardSize', Number(e));
dispatch(setGridCardSize({ size: Number(e) }));
}}
/>
<br />
<ControlLabel>Gap size (px)</ControlLabel>
<StyledInputNumber
defaultValue={config.lookAndFeel.gridView.gapSize}
step={1}
min={0}
max={100}
width={150}
onChange={(e: any) => {
settings.setSync('gridGapSize', Number(e));
dispatch(setGridGapSize({ size: Number(e) }));
}}
/>
<br />
<ControlLabel>Grid alignment</ControlLabel>
<RadioGroup
name="gridAlignemntRadioList"
appearance="default"
defaultValue={config.lookAndFeel.gridView.alignment}
value={config.lookAndFeel.gridView.alignment}
onChange={(e: string) => {
dispatch(setGridAlignment({ alignment: e }));
settings.setSync('gridAlignment', e);
}}
>
<StyledRadio value="flex-start">Left</StyledRadio>
<StyledRadio value="center">Center</StyledRadio>
</RadioGroup>
</ConfigPanel>
</> </>
); );
}; };

Loading…
Cancel
Save