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

Add settings

Browse Source
This commit is contained in:
Spectralitree 2020-12-13 23:38:10 +01:00
parent 5cb90ba2c3
commit 56c7c219a9
8 changed files with 116 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

45
src/App.js
View File

@ -1,18 +1,22 @@
import React, {useEffect, useState} from 'react';
import React, {useEffect, useState, useCallback} from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';
import * as BS from 'react-bootstrap'
import { useForm } from "react-hook-form";
import * as fetch from 'node-fetch';
import Toggle from 'react-toggle'
import './App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import { FaLock } from "react-icons/fa";
import { FaCog } from "react-icons/fa";
import Dash from './Components/Dash.js'
import history from "./History.js";
import Loading from "./Components/Loading.js";
import Navigation from "./Components/Navigation.js";
import Footer from './Components/Footer.js'
import Profile from './Components/Profile.js'
import API_URL from "./Constants/constants.js";
@ -21,6 +25,8 @@ export default function App() {
const [isLoading, setIsLoading ] = useState(false);
const [isSubmit, setIsSubmit ] = useState(false);
const [isInvalid, setIsInvalid] = useState(false);
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const { register, handleSubmit } = useForm();
@ -35,6 +41,7 @@ export default function App() {
logIn();
};
function logIn() {
setIsInvalid(false);
setIsLoading(true);
@ -61,11 +68,12 @@ export default function App() {
return (
<div className={localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}>
<Router history={history} basename="/pk-webs">
<Navigation/>
<BS.Container>
<Switch>
<Route path="/pk-webs/dash" >
<Route exact path="/pk-webs/dash" >
{ !localStorage.getItem('token') || isInvalid ? <Redirect to="/pk-webs"/> : <Dash />
}
</Route>
@ -97,9 +105,42 @@ export default function App() {
</BS.Card>
}
</Route>
<Route exact path="/pk-webs/profile">
<Profile />
</Route>
<Route exact 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-lg-2 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.Row>
</BS.Card.Body>
</BS.Card>
</Route>
</Switch>
</BS.Container>
<Footer />
</Router>
</div>
);
}

10
src/Components/MemberCard.js
View File

@ -198,8 +198,14 @@ export default function MemberCard(props) {
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
{ member.avatar_url ? <BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
{ member.avatar_url ? <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />} className="avatar" modal>
{close => (
<div className="text-center w-100 m-0" onClick={() => close()}>
<BS.Image src={`${member.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
</div>
)}
</Popup> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />}
</BS.Card.Header>
<BS.Accordion.Collapse eventKey={member.id}>
<BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>

15
src/Components/Memberlist.js
View File

@ -101,12 +101,6 @@ export default function Memberlist(props) {
const active = currentPage;
const pageAmount = Math.ceil(members.length / membersPerPage);
const pageNumbers = [];
for ( let i = currentPage; (i <= currentPage + 1) && (i < pageAmount); i++ ) {
pageNumbers.push(
<BS.Pagination.Item key={i} onClick={() => setCurrentPage(i)} active={i === active}>{i}</BS.Pagination.Item>
);
}
const memberList = currentMembers.map((member, index) => <BS.Card key={member.id}>
<MemberCard
@ -150,10 +144,11 @@ export default function Memberlist(props) {
<BS.Pagination className="ml-auto mr-auto">
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
<BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>
<BS.Pagination.Ellipsis />
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)} active={currentPage - 1 === active}>{currentPage - 1}</BS.Pagination.Item> : "" }
{pageNumbers}
<BS.Pagination.Ellipsis />
<BS.Pagination.Ellipsis disabled />
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
<BS.Pagination.Item onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
{ currentPage < pageAmount ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
<BS.Pagination.Ellipsis disabled />
<BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
</BS.Pagination>

21
src/Components/Navigation.js
View File

@ -1,3 +1,4 @@
import { useState, useCallback } from 'react';
import * as BS from 'react-bootstrap'
import useDarkMode from 'use-dark-mode';
import Toggle from 'react-toggle'
@ -7,6 +8,9 @@ import "react-toggle/style.css"
import history from "../History.js";
export default function Navigation() {
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const darkMode = useDarkMode(false);
@ -14,13 +18,21 @@ export default function Navigation() {
localStorage.removeItem("token");
localStorage.removeItem("user");
history.push('/pk-webs');
forceUpdate();
}
return (
<BS.Navbar className="mb-5 align-items-center justify-content-between">
<BS.Navbar.Brand>
pk-web
<BS.Navbar className="mb-5 align-items-center">
<BS.Navbar.Brand href="/pk-webs">
pk-webs
</BS.Navbar.Brand>
<BS.NavDropdown id="menu" className="mr-auto" title="Menu">
{ localStorage.getItem('token') ? <BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item> : "" }
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
<BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
</BS.NavDropdown>
<BS.Nav className="mr-lg-2 d-flex align-items-center row">
<Toggle
defaultChecked={true}
@ -28,9 +40,6 @@ export default function Navigation() {
onChange={darkMode.toggle} />
{darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
</BS.Nav>
<BS.Form inline>
{ localStorage.getItem('token') ? <BS.Button className=" mr-lg-2" variant="primary" onClick={logOut}>Log Out</BS.Button> : "" }
</BS.Form>
</BS.Navbar>
)
}

15
src/Components/Profile.js Normal file
View File

@ -0,0 +1,15 @@
import * as BS from 'react-bootstrap';
import { FaStar } from "react-icons/fa";
export default function Profile () {
return (
<BS.Card>
<BS.Card.Header>
<BS.Card.Title><FaStar className="mr-3" />Profile</BS.Card.Title>
</BS.Card.Header>
<BS.Card.Body>
WIP. Public profiles coming soon here!
</BS.Card.Body>
</BS.Card>
)
}

9
src/Components/System.js
View File

@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
import autosize from 'autosize';
import moment from 'moment';
import 'moment-timezone';
import Popup from 'reactjs-popup';
import API_URL from "../Constants/constants.js";
@ -107,7 +108,13 @@ const submitPrivacy = data => {
<BS.Card className="mb-3 mt-3 w-100" >
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Card.Title className="float-left"><FaAddressCard className="mr-3" /> {user.name}</BS.Card.Title>
{ user.avatar_url ? <BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> :
{ user.avatar_url ? <Popup trigger={<BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />} className="avatar" modal>
{close => (
<div className="text-center w-100 m-0" onClick={() => close()}>
<BS.Image src={`${user.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
</div>
)}
</Popup> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
</BS.Card.Header>
<BS.Card.Body>

21
src/Custom.scss
View File

@ -1,3 +1,8 @@
@font-face {
font-family: 'openDyslexic';
src: url('https://dl.dropboxusercontent.com/s/qfpakpjedhsrdb9/OpenDyslexicAlta-Regular.ttf');
}
html {
position: relative;
min-height: 100vh;
@ -7,6 +12,10 @@ body {
padding-bottom: 60px;
}
.opendyslexic {
font-family: "OpenDyslexic";
}
.dark-mode {
background-color: $gray-800;
transition: background-color 0.3s ease;
@ -233,5 +242,17 @@ blockquote {
border-color: #191c1f !important;
}
.toggles {
position: absolute !important;
right: 50%;
margin-right: -100px; ;
}
.d-emoji {
height: 25px;
width: auto;
image-rendering: crisp-edges;
}
@import "~bootstrap/scss/bootstrap";