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

add toggle for default expanded member cards

Browse Source
This commit is contained in:
Spectralitree 2021-03-11 10:08:42 +01:00
parent 8cc454bc12
commit dd3a381a7c
5 changed files with 84 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.js
View File

@ -232,6 +232,22 @@ export default function App() {
forceUpdate()}} /> } forceUpdate()}} /> }
Hide colored backgrounds? Hide colored backgrounds?
</BS.Col> </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.Row>
</BS.Card.Body> </BS.Card.Body>
</BS.Card> </BS.Card>

56
src/Components/MemberCard.js
View File

@ -219,31 +219,8 @@ export default function MemberCard(props) {
document.body.removeChild(textField); document.body.removeChild(textField);
} }
function renderCard() {
return ( return (
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
<BS.Tooltip>
Copy public link
</BS.Tooltip>
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> :
<BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
{ localStorage.getItem('pagesonly') ?
<Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
{ 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()}>
<div className="m-auto" style={{maxWidth: '640px'}}>
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
</div>
</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}` }}> <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
{ errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" } { errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
{ editMode ? { editMode ?
@ -414,7 +391,36 @@ export default function MemberCard(props) {
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>} { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> } { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
</> } </BS.Card.Body> </> } </BS.Card.Body>
</BS.Accordion.Collapse> )
}
return (
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
<BS.Tooltip>
Copy public link
</BS.Tooltip>
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> :
<BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
{ localStorage.getItem('pagesonly') ?
<Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
{ 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()}>
<div className="m-auto" style={{maxWidth: '640px'}}>
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
</div>
</div>
)}
</Popup> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
</BS.Card.Header>
{localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
{renderCard()}
</BS.Accordion.Collapse>}
</LazyLoad> </LazyLoad>
) )

6
src/Components/Memberlist.js
View File

@ -47,7 +47,7 @@ export default function Memberlist() {
const fetchMembers = useCallback( () => { const fetchMembers = useCallback( () => {
setIsLoading(true); setIsLoading(true);
setIsError(false); setIsError(false);
setMembersPerPage(25); setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
fetch(`${API_URL}s/${userId}/members`,{ fetch(`${API_URL}s/${userId}/members`,{
method: 'GET', method: 'GET',
@ -135,7 +135,7 @@ export default function Memberlist() {
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember); sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
} }
const memberList = sortMembers.map((member) => <BS.Card key={member.id}> const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
<MemberCard <MemberCard
member={member} member={member}
edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))} edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}
@ -179,7 +179,7 @@ export default function Memberlist() {
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Page length:'/> <BS.Form.Control disabled placeholder='Page length:'/>
<BS.Form.Control as="select" defaultValue="25" onChange={e => { <BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
setMembersPerPage(e.target.value); setMembersPerPage(e.target.value);
setCurrentPage(1); setCurrentPage(1);
}}> }}>

52
src/Components/ProfileCard.js
View File

@ -78,29 +78,8 @@ export default function MemberCard(props) {
document.body.removeChild(textField); document.body.removeChild(textField);
} }
function renderCard() {
return ( return (
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> <BS.OverlayTrigger placement="left" overlay={
<BS.Tooltip>
Copy link
</BS.Tooltip>
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
{ localStorage.getItem('pagesonly') ?
<Link to={`${sysID}/${member.id}`}><BS.Button variant="link"> <b>{member.name}</b> ({member.id})</BS.Button></Link>
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id} > <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
{ 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()}>
<div className="m-auto" style={{maxWidth: '640px'}}>
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
</div>
</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}` }}> <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
<BS.Row> <BS.Row>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
@ -123,7 +102,34 @@ export default function MemberCard(props) {
<p><b>Description:</b></p> <p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>} { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
<BS.Row><BS.Col><Link to={`${sysID}/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></BS.Col></BS.Row> </BS.Card.Body> <BS.Row><BS.Col><Link to={`${sysID}/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></BS.Col></BS.Row> </BS.Card.Body>
</BS.Accordion.Collapse> )
}
return (
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> <BS.OverlayTrigger placement="left" overlay={
<BS.Tooltip>
Copy link
</BS.Tooltip>
}><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
{ localStorage.getItem('pagesonly') ?
<Link to={`${sysID}/${member.id}`}><BS.Button variant="link"> <b>{member.name}</b> ({member.id})</BS.Button></Link>
: <BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id} > <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
{ 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()}>
<div className="m-auto" style={{maxWidth: '640px'}}>
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
</div>
</div>
)}
</Popup> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
</BS.Card.Header>
{localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
{renderCard()}
</BS.Accordion.Collapse>}
</LazyLoad> </LazyLoad>
) )

6
src/Components/ProfileList.js
View File

@ -29,7 +29,7 @@ export default function Memberlist() {
const fetchMembers = useCallback( () => { const fetchMembers = useCallback( () => {
setIsLoading(true); setIsLoading(true);
setIsError(false); setIsError(false);
setMembersPerPage(25); setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
fetch(`${API_URL}s/${sysID}/members`,{ fetch(`${API_URL}s/${sysID}/members`,{
method: 'GET', method: 'GET',
@ -102,7 +102,7 @@ export default function Memberlist() {
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember); sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
} }
const memberList = sortMembers.map((member) => <BS.Card key={member.id}> const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
<ProfileCard <ProfileCard
member={member} member={member}
/> />
@ -118,7 +118,7 @@ export default function Memberlist() {
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Page length:'/> <BS.Form.Control disabled placeholder='Page length:'/>
<BS.Form.Control as="select" defaultValue="25" onChange={e => { <BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
setMembersPerPage(e.target.value); setMembersPerPage(e.target.value);
setCurrentPage(1); setCurrentPage(1);
}}> }}>