move settings to own file
This commit is contained in:
Spectralitree
parent
69dd14dc0d
commit
9d01a83f17
95
src/App.js
95
src/App.js
@ -7,13 +7,14 @@ import useDarkMode from 'use-dark-mode';
|
|||||||
import './App.scss';
|
import './App.scss';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import "react-toggle/style.css"
|
import "react-toggle/style.css"
|
||||||
import { FaCog, FaSun, FaMoon } from "react-icons/fa";
|
import { FaSun, FaMoon } from "react-icons/fa";
|
||||||
|
|
||||||
import Dash from './Pages/Dash.js'
|
import Dash from './Pages/Dash.js'
|
||||||
import history from "./History.js";
|
import history from "./History.js";
|
||||||
import Footer from './Components/Footer.js'
|
import Footer from './Components/Footer.js'
|
||||||
import Public from './Pages/Public.js'
|
import Public from './Pages/Public.js'
|
||||||
import Home from './Pages/Home.js'
|
import Home from './Pages/Home.js'
|
||||||
|
import Settings from './Pages/Settings.js'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
@ -68,97 +69,7 @@ export default function App() {
|
|||||||
<Public />
|
<Public />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/pk-webs/settings">
|
<Route path="/pk-webs/settings">
|
||||||
<BS.Card>
|
<Settings forceUpdate={forceUpdate}/>
|
||||||
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
|
||||||
<BS.Card.Title><FaCog className="mr-3" />Settings</BS.Card.Title>
|
|
||||||
</BS.Card.Header>
|
|
||||||
<BS.Card.Body>
|
|
||||||
<p>Change how you view and use pk-webs here, changes will be saved after refreshing. You will have to apply them again in different browsers and on different devices.</p>
|
|
||||||
<hr/>
|
|
||||||
<BS.Row>
|
|
||||||
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
||||||
{ localStorage.getItem('opendyslexic') ?
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={true}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.removeItem('opendyslexic');
|
|
||||||
forceUpdate()}} /> :
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={false}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.setItem('opendyslexic', 'true')
|
|
||||||
forceUpdate()}} /> }
|
|
||||||
Use opendyslexic?
|
|
||||||
</BS.Col>
|
|
||||||
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
||||||
{ localStorage.getItem('twemoji') ?
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={true}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.removeItem('twemoji');
|
|
||||||
forceUpdate()}} /> :
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={false}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.setItem('twemoji', 'true')
|
|
||||||
forceUpdate()}} /> }
|
|
||||||
Use twemoji?
|
|
||||||
</BS.Col>
|
|
||||||
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
||||||
{ localStorage.getItem('pagesonly') ?
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={true}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.removeItem('pagesonly');
|
|
||||||
forceUpdate()}} /> :
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={false}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.setItem('pagesonly', 'true')
|
|
||||||
forceUpdate()}} /> }
|
|
||||||
Use only member pages?
|
|
||||||
</BS.Col>
|
|
||||||
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
||||||
{ localStorage.getItem('colorbg') ?
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={true}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.removeItem('colorbg');
|
|
||||||
forceUpdate()}} /> :
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={false}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.setItem('colorbg', 'false')
|
|
||||||
forceUpdate()}} /> }
|
|
||||||
Hide colored backgrounds?
|
|
||||||
</BS.Col>
|
|
||||||
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
|
||||||
{ localStorage.getItem('expandcards') ?
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={true}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.removeItem('expandcards');
|
|
||||||
forceUpdate()}} /> :
|
|
||||||
<Toggle className="mr-2"
|
|
||||||
defaultChecked={false}
|
|
||||||
icons={false}
|
|
||||||
onChange={() => {
|
|
||||||
localStorage.setItem('expandcards', 'true')
|
|
||||||
forceUpdate()}} /> }
|
|
||||||
Expand member cards on default?
|
|
||||||
</BS.Col>
|
|
||||||
</BS.Row>
|
|
||||||
</BS.Card.Body>
|
|
||||||
</BS.Card>
|
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
</BS.Container>
|
</BS.Container>
|
||||||
|
|||||||
104
src/Pages/Settings.js
Normal file
104
src/Pages/Settings.js
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import * as BS from "react-bootstrap";
|
||||||
|
import { FaCog } from "react-icons/fa";
|
||||||
|
import Toggle from 'react-toggle'
|
||||||
|
|
||||||
|
const Settings = ({forceUpdate}) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BS.Card>
|
||||||
|
<BS.Card.Header className="d-flex align-items-center justify-content-between">
|
||||||
|
<BS.Card.Title><FaCog className="mr-3" />Settings</BS.Card.Title>
|
||||||
|
</BS.Card.Header>
|
||||||
|
<BS.Card.Body>
|
||||||
|
<p>Change how you view and use pk-webs here, changes will be saved after refreshing. You will have to apply them again in different browsers and on different devices.</p>
|
||||||
|
<hr/>
|
||||||
|
<BS.Row>
|
||||||
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
||||||
|
{ localStorage.getItem('opendyslexic') ?
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={true}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.removeItem('opendyslexic');
|
||||||
|
forceUpdate()}} /> :
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={false}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.setItem('opendyslexic', 'true')
|
||||||
|
forceUpdate()}} /> }
|
||||||
|
Use opendyslexic?
|
||||||
|
</BS.Col>
|
||||||
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
||||||
|
{ localStorage.getItem('twemoji') ?
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={true}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.removeItem('twemoji');
|
||||||
|
forceUpdate()}} /> :
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={false}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.setItem('twemoji', 'true')
|
||||||
|
forceUpdate()}} /> }
|
||||||
|
Use twemoji?
|
||||||
|
</BS.Col>
|
||||||
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
||||||
|
{ localStorage.getItem('pagesonly') ?
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={true}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.removeItem('pagesonly');
|
||||||
|
forceUpdate()}} /> :
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={false}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.setItem('pagesonly', 'true')
|
||||||
|
forceUpdate()}} /> }
|
||||||
|
Use only member pages?
|
||||||
|
</BS.Col>
|
||||||
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
||||||
|
{ localStorage.getItem('colorbg') ?
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={true}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.removeItem('colorbg');
|
||||||
|
forceUpdate()}} /> :
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={false}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.setItem('colorbg', 'false')
|
||||||
|
forceUpdate()}} /> }
|
||||||
|
Hide colored backgrounds?
|
||||||
|
</BS.Col>
|
||||||
|
<BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
|
||||||
|
{ localStorage.getItem('expandcards') ?
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={true}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.removeItem('expandcards');
|
||||||
|
forceUpdate()}} /> :
|
||||||
|
<Toggle className="mr-2"
|
||||||
|
defaultChecked={false}
|
||||||
|
icons={false}
|
||||||
|
onChange={() => {
|
||||||
|
localStorage.setItem('expandcards', 'true')
|
||||||
|
forceUpdate()}} /> }
|
||||||
|
Expand member cards on default?
|
||||||
|
</BS.Col>
|
||||||
|
</BS.Row>
|
||||||
|
</BS.Card.Body>
|
||||||
|
</BS.Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Settings;
|
||||||
Loading…
x
Reference in New Issue
Block a user