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

Add default themes to settings

master
jeffvli 3 years ago
committed by Jeff
parent
31bba837ca
commit
20e52e5f58
4 changed files with 325 additions and 27 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. 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
View File

@ -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
View File

@ -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
View File

@ -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
View File

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

Write Preview
Loading…
Cancel
Save