Browse Source

Split grid/list view configs into separate components

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

234
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) || [];
@ -68,100 +61,7 @@ const LookAndFeelConfig = () => {
const currentGenreColumns = genreCols?.map((column: any) => column.label) || []; const currentGenreColumns = genreCols?.map((column: any) => column.label) || [];
return ( return (
<> <ConfigPanel header="List-View" bordered={bordered}>
<ConfigPanel header="Look & Feel" bordered>
<p>
<StyledLink
onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
>
Check out the theming documentation! <Icon icon="external-link" />
</StyledLink>
</p>
<br />
<StyledInputPickerContainer ref={themePickerContainerRef}>
<ControlLabel>Theme</ControlLabel>
<br />
<StyledInputGroup>
<StyledInputPicker
container={() => themePickerContainerRef.current}
data={themeList}
labelKey="label"
valueKey="value"
cleanable={false}
defaultValue={selectedTheme}
onChange={(e: string) => {
settings.setSync('theme', e);
setSelectedTheme(e);
dispatch(setTheme(e));
}}
/>
<StyledInputGroupButton
onClick={() => {
dispatch(setTheme('defaultDark'));
dispatch(setTheme(selectedTheme));
setThemeList(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
);
}}
>
<Icon icon="refresh" />
</StyledInputGroupButton>
</StyledInputGroup>
</StyledInputPickerContainer>
<br />
<StyledInputPickerContainer ref={fontPickerContainerRef}>
<ControlLabel>Font</ControlLabel>
<br />
<StyledInputPicker
container={() => fontPickerContainerRef.current}
data={Fonts}
groupBy="role"
cleanable={false}
defaultValue={String(settings.getSync('font'))}
onChange={(e: string) => {
settings.setSync('font', e);
dispatch(setFont(e));
}}
/>
</StyledInputPickerContainer>
<br />
<StyledInputPickerContainer ref={titleBarPickerContainerRef}>
<ControlLabel>Titlebar style (requires app restart)</ControlLabel>
<br />
<StyledInputPicker
container={() => titleBarPickerContainerRef.current}
data={[
{
label: 'macOS',
value: 'mac',
},
{
label: 'Windows',
value: 'windows',
},
]}
cleanable={false}
defaultValue={String(settings.getSync('titleBarStyle'))}
onChange={(e: string) => {
settings.setSync('titleBarStyle', e);
dispatch(setMiscSetting({ setting: 'titleBar', value: e }));
}}
/>
</StyledInputPickerContainer>
<br />
<StyledCheckbox
defaultChecked={dynamicBackgroundChk}
checked={dynamicBackgroundChk}
onChange={(_v: any, e: boolean) => {
settings.setSync('dynamicBackground', e);
dispatch(setDynamicBackground(e));
setDynamicBackgroundChk(e);
}}
>
Enable dynamic background
</StyledCheckbox>
</ConfigPanel>
<ConfigPanel header="List-View" bordered>
<Nav <Nav
activeKey={config.active.columnSelectorTab} activeKey={config.active.columnSelectorTab}
onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))} onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
@ -275,7 +175,15 @@ const LookAndFeelConfig = () => {
Show highlight on row hover Show highlight on row hover
</StyledCheckbox> </StyledCheckbox>
</ConfigPanel> </ConfigPanel>
<ConfigPanel header="Grid-View" bordered> );
};
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> <ControlLabel>Card size (px)</ControlLabel>
<StyledInputNumber <StyledInputNumber
defaultValue={config.lookAndFeel.gridView.cardSize} defaultValue={config.lookAndFeel.gridView.cardSize}
@ -317,6 +225,120 @@ const LookAndFeelConfig = () => {
<StyledRadio value="center">Center</StyledRadio> <StyledRadio value="center">Center</StyledRadio>
</RadioGroup> </RadioGroup>
</ConfigPanel> </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 (
<>
<ConfigPanel header="Look & Feel" bordered>
<p>
<StyledLink
onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
>
Check out the theming documentation! <Icon icon="external-link" />
</StyledLink>
</p>
<br />
<StyledInputPickerContainer ref={themePickerContainerRef}>
<ControlLabel>Theme</ControlLabel>
<br />
<StyledInputGroup>
<StyledInputPicker
container={() => themePickerContainerRef.current}
data={themeList}
labelKey="label"
valueKey="value"
cleanable={false}
defaultValue={selectedTheme}
onChange={(e: string) => {
settings.setSync('theme', e);
setSelectedTheme(e);
dispatch(setTheme(e));
}}
/>
<StyledInputGroupButton
onClick={() => {
dispatch(setTheme('defaultDark'));
dispatch(setTheme(selectedTheme));
setThemeList(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
);
}}
>
<Icon icon="refresh" />
</StyledInputGroupButton>
</StyledInputGroup>
</StyledInputPickerContainer>
<br />
<StyledInputPickerContainer ref={fontPickerContainerRef}>
<ControlLabel>Font</ControlLabel>
<br />
<StyledInputPicker
container={() => fontPickerContainerRef.current}
data={Fonts}
groupBy="role"
cleanable={false}
defaultValue={String(settings.getSync('font'))}
onChange={(e: string) => {
settings.setSync('font', e);
dispatch(setFont(e));
}}
/>
</StyledInputPickerContainer>
<br />
<StyledInputPickerContainer ref={titleBarPickerContainerRef}>
<ControlLabel>Titlebar style (requires app restart)</ControlLabel>
<br />
<StyledInputPicker
container={() => titleBarPickerContainerRef.current}
data={[
{
label: 'macOS',
value: 'mac',
},
{
label: 'Windows',
value: 'windows',
},
]}
cleanable={false}
defaultValue={String(settings.getSync('titleBarStyle'))}
onChange={(e: string) => {
settings.setSync('titleBarStyle', e);
dispatch(setMiscSetting({ setting: 'titleBar', value: e }));
}}
/>
</StyledInputPickerContainer>
<br />
<StyledCheckbox
defaultChecked={dynamicBackgroundChk}
checked={dynamicBackgroundChk}
onChange={(_v: any, e: boolean) => {
settings.setSync('dynamicBackground', e);
dispatch(setDynamicBackground(e));
setDynamicBackgroundChk(e);
}}
>
Enable dynamic background
</StyledCheckbox>
</ConfigPanel>
<ListViewConfigPanel bordered />
<GridViewConfigPanel bordered />
</> </>
); );
}; };

Loading…
Cancel
Save