liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move settings to own file

Browse Source
This commit is contained in:
Spectralitree 2021-06-26 20:12:56 +02:00
parent 69dd14dc0d
commit 9d01a83f17
2 changed files with 107 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/App.js
View File

@ -7,13 +7,14 @@ import useDarkMode from 'use-dark-mode';
import './App.scss';
import 'bootstrap/dist/css/bootstrap.min.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 history from "./History.js";
import Footer from './Components/Footer.js'
import Public from './Pages/Public.js'
import Home from './Pages/Home.js'
import Settings from './Pages/Settings.js'
export default function App() {
const [isLoading, setIsLoading] = useState(false);
@ -68,97 +69,7 @@ export default function App() {
<Public />
</Route>
<Route path="/pk-webs/settings">
<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>
<Settings forceUpdate={forceUpdate}/>
</Route>
</Switch>
</BS.Container>

104
src/Pages/Settings.js Normal file
View 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;