Browse Source

Add default themes to settings

master
jeffvli 3 years ago
committed by Jeff
parent
commit
20e52e5f58
  1. 21
      src/App.tsx
  2. 40
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  3. 287
      src/shared/mockSettings.ts
  4. 4
      src/shared/utils.ts

21
src/App.tsx

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import settings from 'electron-settings';
import { ThemeProvider } from 'styled-components'; import { ThemeProvider } from 'styled-components';
import { HashRouter as Router, Switch, Route } from 'react-router-dom'; import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import './styles/App.global.css'; import './styles/App.global.css';
@ -17,30 +18,26 @@ import AlbumList from './components/library/AlbumList';
import ArtistList from './components/library/ArtistList'; import ArtistList from './components/library/ArtistList';
import GenreList from './components/library/GenreList'; import GenreList from './components/library/GenreList';
import { MockFooter } from './components/settings/styled'; import { MockFooter } from './components/settings/styled';
import { defaultDark, defaultLight } from './styles/styledTheme';
import { useAppSelector } from './redux/hooks'; import { useAppSelector } from './redux/hooks';
import PageModal from './components/modal/PageModal'; import PageModal from './components/modal/PageModal';
import NowPlayingMiniView from './components/player/NowPlayingMiniView'; import NowPlayingMiniView from './components/player/NowPlayingMiniView';
import { GlobalContextMenu } from './components/shared/ContextMenu'; import { GlobalContextMenu } from './components/shared/ContextMenu';
import SearchView from './components/search/SearchView'; import SearchView from './components/search/SearchView';
import FolderList from './components/library/FolderList'; import FolderList from './components/library/FolderList';
import { getTheme } from './shared/utils';
import { defaultDark } from './styles/styledTheme';
import { mockSettings } from './shared/mockSettings';
const themes: any =
process.env.NODE_ENV === 'test' ? mockSettings.themes : settings.getSync('themes');
const App = () => { const App = () => {
const [theme, setTheme] = useState<any>(defaultDark); const [theme, setTheme] = useState<any>(defaultDark);
const [font, setFont] = useState('Poppins'); const [font, setFont] = useState('Poppins');
const misc = useAppSelector((state) => state.misc); const misc = useAppSelector((state) => state.misc);
useEffect(() => { useEffect(() => {
switch (misc.theme) { setTheme(getTheme(themes, misc.theme) || defaultDark);
case 'defaultDark':
setTheme(defaultDark);
break;
case 'defaultLight':
setTheme(defaultLight);
break;
default:
setTheme(defaultDark);
break;
}
}, [misc.theme]); }, [misc.theme]);
useEffect(() => { useEffect(() => {

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

@ -1,14 +1,15 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { shell } from 'electron';
import settings from 'electron-settings'; import settings from 'electron-settings';
import { RadioGroup, ControlLabel, Nav } from 'rsuite'; import { ControlLabel, Nav, Icon } from 'rsuite';
import { ConfigPanel } from '../styled'; import { ConfigPanel } from '../styled';
import { import {
StyledRadio,
StyledInputPicker, StyledInputPicker,
StyledNavItem, StyledNavItem,
StyledInputNumber, StyledInputNumber,
StyledCheckbox, StyledCheckbox,
StyledInputPickerContainer, StyledInputPickerContainer,
StyledLink,
} from '../../shared/styled'; } from '../../shared/styled';
import ListViewConfig from './ListViewConfig'; import ListViewConfig from './ListViewConfig';
import { Fonts } from '../Fonts'; import { Fonts } from '../Fonts';
@ -37,9 +38,10 @@ const LookAndFeelConfig = () => {
const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState( const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
Boolean(settings.getSync('highlightOnRowHover')) Boolean(settings.getSync('highlightOnRowHover'))
); );
const themePickerContainerRef = useRef(null);
const fontPickerContainerRef = useRef(null); const fontPickerContainerRef = useRef(null);
const titleBarPickerContainerRef = useRef(null); const titleBarPickerContainerRef = useRef(null);
const themes: any = settings.getSync('themes');
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');
@ -56,23 +58,31 @@ const LookAndFeelConfig = () => {
return ( return (
<> <>
<ConfigPanel header="Look & Feel" bordered> <ConfigPanel header="Look & Feel" bordered>
<div style={{ width: '300px' }}> <p>
<p>Select the main application theme.</p> <StyledLink
<RadioGroup onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
name="themeRadioList" >
appearance="default" Check out the theming documentation! <Icon icon="external-link" />
</StyledLink>
</p>
<br />
<StyledInputPickerContainer ref={themePickerContainerRef}>
<ControlLabel>Application theme</ControlLabel>
<br />
<StyledInputPicker
container={() => themePickerContainerRef.current}
data={themes}
labelKey="label"
valueKey="value"
cleanable={false}
defaultValue={String(settings.getSync('theme'))} defaultValue={String(settings.getSync('theme'))}
onChange={(e) => { onChange={(e: string) => {
settings.setSync('theme', e); settings.setSync('theme', e);
dispatch(setTheme(e)); dispatch(setTheme(e));
}} }}
> />
<StyledRadio value="defaultDark">Default Dark</StyledRadio> </StyledInputPickerContainer>
<StyledRadio value="defaultLight">Default Light</StyledRadio>
</RadioGroup>
</div>
<br /> <br />
<StyledInputPickerContainer ref={fontPickerContainerRef}> <StyledInputPickerContainer ref={fontPickerContainerRef}>
<ControlLabel>Font</ControlLabel> <ControlLabel>Font</ControlLabel>
<br /> <br />

287
src/shared/mockSettings.ts

@ -304,4 +304,291 @@ export const mockSettings = {
windowMaximize: false, windowMaximize: false,
highlightOnRowHover: false, highlightOnRowHover: false,
titleBarStyle: 'windows', titleBarStyle: 'windows',
themes: [
{
label: 'Default Dark',
value: 'defaultDark',
fonts: {
size: {
page: '14px',
pageTitle: '40px',
panelTitle: '20px',
button: '14px',
},
},
colors: {
primary: '#2196F3',
layout: {
page: {
color: '#D8D8D8',
colorSecondary: '#888e94',
background: '#181A1F',
},
playerBar: {
color: '#D8D8D8',
colorSecondary: '#888e94',
background: '#101010',
button: {
color: 'rgba(240, 240, 240, 0.8)',
colorHover: '#FFFFFF',
},
},
sideBar: {
background: '#101010',
button: {
color: '#D8D8D8',
colorHover: '#FFFFFF',
},
},
titleBar: {
color: '#FFFFFF',
background: '#101010',
},
},
button: {
default: {
color: '#D8D8D8',
colorHover: '#FFFFFF',
background: '#292D33',
backgroundHover: '#3C3F43',
},
primary: {
color: '#FFFFFF',
colorHover: '#FFFFFF',
backgroundHover: '#3B89EC',
},
subtle: {
color: '#D8D8D8',
colorHover: '#D8D8D8',
backgroundHover: 'transparent',
},
link: {
color: '#2196F3',
colorHover: '#3B89EC',
},
},
card: {
overlayButton: {
color: '#FFFFFF',
background: '#000000',
opacity: 0.8,
},
},
contextMenu: {
color: '#D8D8D8',
colorDisabled: '#6A6F76',
background: '#1E2125',
backgroundHover: '#292D33',
},
input: {
color: '#D8D8D8',
background: '#25292E',
backgroundHover: '#353A45',
backgroundActive: 'rgba(240, 240, 240, .2)',
},
nav: {
color: '#D8D8D8',
},
popover: {
color: '#D8D8D8',
background: '#1E2125',
},
slider: {
background: '#3C3F43',
progressBar: '#888E94',
},
spinner: {
background: 'rgba(233, 235, 240, 0.3)',
foreground: '#2196F3',
},
table: {
selectedRow: '#4D5156',
},
tag: {
background: '#3C3F43',
text: '#E2E4E9',
},
tooltip: {
color: '#D8D8D8',
background: '#1E2125',
},
},
other: {
button: {
borderRadius: '0px',
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
card: {
borderRadius: '0px',
},
input: {
borderRadius: '0px',
},
miniPlayer: {
height: '450px',
opacity: 0.95,
},
panel: {
borderRadius: '0px',
},
playerBar: {
borderTop: '1px solid rgba(240, 240, 240, .15)',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
filter: 'none',
},
tag: {
borderRadius: '0px',
},
tooltip: {
border: '1px #3c3f43 solid',
borderRadius: '0px',
},
},
},
{
label: 'Default Light',
value: 'defaultLight',
fonts: {
size: {
page: '14px',
pageTitle: '30px',
panelTitle: '20px',
},
},
colors: {
primary: '#285DA0',
layout: {
page: {
color: '#000000',
colorSecondary: '#888e94',
background: '#FFFFFF',
},
playerBar: {
color: '#FFFFFF',
colorSecondary: '#888e94',
background: '#161B22',
button: {
color: 'rgba(240, 240, 240, 0.8)',
colorHover: '#FFFFFF',
},
},
sideBar: {
background: '#161B22',
button: {
color: '#D8D8D8',
colorHover: '#FFFFFF',
},
},
titleBar: {
color: '#FFFFFF',
background: '#161B22',
},
},
button: {
default: {
color: '#575757',
colorHover: '#000000',
background: '#DFDFE2',
backgroundHover: '#D2D2D6',
},
primary: {
color: '#FFFFFF',
colorHover: '#FFFFFF',
backgroundHover: '#347AD3',
},
subtle: {
color: '#575757',
colorHover: '#575757',
backgroundHover: 'transparent',
},
link: {
color: '#575757',
colorHover: '#575757',
},
},
card: {
overlayButton: {
color: '#FFFFFF',
colorHover: '#FFFFFF',
background: '#000000',
backgroundHover: '#285DA0',
opacity: 0.8,
},
},
contextMenu: {
color: '#575757',
colorDisabled: '#BABABA',
background: '#FFFFFF',
backgroundHover: '#D2D2D6',
},
input: {
color: '#000000',
background: '#FFFFFF',
backgroundHover: '#E5E5EA',
backgroundActive: 'rgba(0, 0, 0, .2)',
},
nav: {
color: '#000000',
},
popover: {
color: '#000000',
background: '#FFFFFF',
},
slider: {
background: '#3C3F43',
progressBar: '#888E94',
},
spinner: {
background: 'rgba(0, 0, 0, 0.3)',
foreground: '#285DA0',
},
table: {
selectedRow: '#CCCCCC',
},
tag: {
background: '#DFDFE2',
text: '#000000',
},
tooltip: {
color: '#000000',
background: '#FFFFFF',
},
},
other: {
button: {
borderRadius: '0px',
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
card: {
borderRadius: '0px',
},
input: {
borderRadius: '0px',
},
miniPlayer: {
height: '450px',
opacity: 0.95,
},
panel: {
borderRadius: '0px',
},
playerBar: {
borderTop: '1px solid rgba(240, 240, 240, .15)',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
filter: 'none',
},
tag: {
borderRadius: '0px',
},
tooltip: {
border: '1px #3c3f43 solid',
borderRadius: '0px',
},
},
},
],
}; };

4
src/shared/utils.ts

@ -423,3 +423,7 @@ export const getCurrentEntryList = (playQueue: any) => {
return 'entry'; return 'entry';
}; };
export const getTheme = (themes: any[], value: string) => {
return themes.find((theme) => theme.value === value);
};

Loading…
Cancel
Save