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
Download Patch File Download Diff File Expand all files Collapse all files

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>