blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Split grid/list view configs into separate components

master
jeffvli 3 years ago
committed by Jeff
parent
7629af813a
commit
5898f77abf
1 changed files with 188 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 354
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

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

@ -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>
</> </>
); );
}; };

Write Preview
Loading…
Cancel
Save