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,
} from '../../../redux/configSlice';
const LookAndFeelConfig = () => {
export const ListViewConfigPanel = ({ bordered }: any) => {
const dispatch = useAppDispatch();
const config = useAppSelector((state) => state.config);
const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
Boolean(settings.getSync('dynamicBackground'))
);
const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
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 albumCols: any = settings.getSync('albumListColumns');
const playlistCols: any = settings.getSync('playlistListColumns');
const artistCols: any = settings.getSync('artistListColumns');
const miniCols: any = settings.getSync('miniListColumns');
const genreCols: any = settings.getSync('genreListColumns');
const currentSongColumns = songCols?.map((column: any) => column.label) || [];
const currentAlbumColumns = albumCols?.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) || [];
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>
<ConfigPanel header="List-View" bordered>
<ConfigPanel header="List-View" bordered={bordered}>
<Nav
activeKey={config.active.columnSelectorTab}
onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
@ -275,7 +175,15 @@ const LookAndFeelConfig = () => {
Show highlight on row hover
</StyledCheckbox>
</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>
<StyledInputNumber
defaultValue={config.lookAndFeel.gridView.cardSize}
@ -317,6 +225,120 @@ const LookAndFeelConfig = () => {
<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 (
<>
<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