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

add copy link function

Browse Source
This commit is contained in:
Spectralitree 2021-01-06 13:10:26 +01:00
parent a980b160b2
commit d193a5cf71
5 changed files with 100 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Components/MemberCard.js
View File

@ -12,10 +12,12 @@ import Twemoji from 'react-twemoji';
import API_URL from "../Constants/constants.js"; import API_URL from "../Constants/constants.js";
import defaultAvatar from '../default_discord_avatar.png' import defaultAvatar from '../default_discord_avatar.png'
import { FaUser, FaTrashAlt } from "react-icons/fa"; import { FaLink, FaLock, FaTrashAlt } from "react-icons/fa";
export default function MemberCard(props) { export default function MemberCard(props) {
const system = JSON.parse(localStorage.getItem('user'));
const sysID = system.id;
const [member, setMember] = useState(props.member); const [member, setMember] = useState(props.member);
const [ displayName, setDisplayName ] = useState(""); const [ displayName, setDisplayName ] = useState("");
@ -200,13 +202,32 @@ export default function MemberCard(props) {
}); });
} }
function copyLink() {
var link = `https://spectralitree.github.io/pk-webs/profile/${sysID}/${member.id}`
var textField = document.createElement('textarea')
textField.innerText = link
document.body.appendChild(textField);
textField.select();
textField.setSelectionRange(0, 99999);
document.execCommand('copy');
document.body.removeChild(textField);
}
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> : 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}> <LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <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 className="mr-3" variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> :
<BS.Button className="mr-3" variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
{ localStorage.getItem('pagesonly') ? { localStorage.getItem('pagesonly') ?
<Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button></Link> <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} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>} : <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> { 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 => ( {close => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>

23
src/Components/MemberPage.js
View File

@ -12,11 +12,13 @@ import API_URL from "../Constants/constants.js";
import history from "../History.js"; import history from "../History.js";
import defaultAvatar from '../default_discord_avatar.png' import defaultAvatar from '../default_discord_avatar.png'
import { FaUser, FaTrashAlt } from "react-icons/fa"; import { FaLink, FaLock, FaTrashAlt } from "react-icons/fa";
export default function MemberPage(props) { export default function MemberPage(props) {
const [ member, setMember] = useState(props.member); const [ member, setMember] = useState(props.member);
const system = JSON.parse(localStorage.getItem('user'));
const sysID = system.id;
const [ displayName, setDisplayName ] = useState(""); const [ displayName, setDisplayName ] = useState("");
const [ birthday, setBirthday ] = useState(""); const [ birthday, setBirthday ] = useState("");
@ -200,6 +202,19 @@ export default function MemberPage(props) {
}); });
} }
function copyLink() {
var link = `https://spectralitree.github.io/pk-webs/profile/${sysID}/${member.id}`
var textField = document.createElement('textarea')
textField.innerText = link
document.body.appendChild(textField);
textField.select();
textField.setSelectionRange(0, 99999);
document.execCommand('copy');
document.body.removeChild(textField);
}
return ( return (
memberDeleted ? <BS.Card className="mb-5"><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> memberDeleted ? <BS.Card className="mb-5"><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>
<BS.Card.Body> <BS.Card.Body>
@ -211,7 +226,11 @@ export default function MemberPage(props) {
<div className="backdrop-overlay"/></> : "" } <div className="backdrop-overlay"/></> : "" }
<BS.Card className="mb-5"> <BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button> <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> }<BS.Button variant="link" ><b>{member.name}</b> ({member.id})</BS.Button> </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> { 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 => ( {close => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>

24
src/Components/ProfileCard.js
View File

@ -9,7 +9,7 @@ import LazyLoad from 'react-lazyload';
import Twemoji from 'react-twemoji'; import Twemoji from 'react-twemoji';
import defaultAvatar from '../default_discord_avatar.png' import defaultAvatar from '../default_discord_avatar.png'
import { FaUser } from "react-icons/fa"; import { FaLink } from "react-icons/fa";
export default function MemberCard(props) { export default function MemberCard(props) {
const { sysID } = useParams(); const { sysID } = useParams();
@ -66,12 +66,30 @@ export default function MemberCard(props) {
} else setDesc("(no description)"); } else setDesc("(no description)");
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]); }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]);
function copyLink() {
var link = `https://spectralitree.github.io/pk-webs/profile/${sysID}/${member.id}`
var textField = document.createElement('textarea')
textField.innerText = link
document.body.appendChild(textField);
textField.select();
textField.setSelectionRange(0, 99999);
document.execCommand('copy');
document.body.removeChild(textField);
}
return ( return (
<LazyLoad offset={100}> <LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <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 className="mr-3" variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
{ localStorage.getItem('pagesonly') ? { localStorage.getItem('pagesonly') ?
<Link to={`${sysID}/${member.id}`}><BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button></Link> <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} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>} : <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> { 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 => ( {close => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>

22
src/Components/ProfilePage.js
View File

@ -8,7 +8,7 @@ import autosize from 'autosize';
import Twemoji from 'react-twemoji'; import Twemoji from 'react-twemoji';
import defaultAvatar from '../default_discord_avatar.png' import defaultAvatar from '../default_discord_avatar.png'
import { FaUser } from "react-icons/fa"; import { FaLink } from "react-icons/fa";
export default function ProfilePage(props) { export default function ProfilePage(props) {
@ -66,6 +66,19 @@ export default function ProfilePage(props) {
} else setDesc("(no description)"); } else setDesc("(no description)");
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]); }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]);
function copyLink() {
var link = `https://spectralitree.github.io${location.pathname}`
var textField = document.createElement('textarea')
textField.innerText = link
document.body.appendChild(textField);
textField.select();
textField.setSelectionRange(0, 99999);
document.execCommand('copy');
document.body.removeChild(textField);
}
return ( return (
<> <>
{ localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/> { localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
@ -73,7 +86,12 @@ export default function ProfilePage(props) {
<BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert> <BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert>
<BS.Card className="mb-5"> <BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button> <div> <BS.OverlayTrigger placement="left" overlay={
<BS.Tooltip>
Copy link
</BS.Tooltip>
}><BS.Button className="mr-3" variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
<BS.Button variant="link" ><b>{member.name}</b> ({member.id})</BS.Button></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> { 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 => ( {close => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>

20
src/Custom.scss
View File

@ -13,7 +13,17 @@ html {
} }
body { body {
padding-bottom: 60px; position: relative;
}
.contents {
display: flex;
flex-flow: column;
height: 100vh
}
.content {
flex: 1;
} }
.opendyslexic { .opendyslexic {
@ -159,7 +169,7 @@ body {
code { code {
color: black !important; color: black !important;
background-color: $gray-300; background-color: $gray-300;
padding: 5px 7px; padding: 3px 7px;
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
display: inline-block; display: inline-block;
@ -251,9 +261,7 @@ blockquote {
} }
.footer { .footer {
position: absolute !important;
width: 100% !important; width: 100% !important;
bottom: 0px !important;
} }
.dark-mode .page-item:not(.active) .page-link { .dark-mode .page-item:not(.active) .page-link {
@ -289,7 +297,7 @@ blockquote {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -4; z-index: -4;
opacity: 0.6; opacity: 1;
} }
.backdrop-overlay { .backdrop-overlay {
@ -307,7 +315,7 @@ blockquote {
} }
.dark-mode .backdrop-overlay { .dark-mode .backdrop-overlay {
background: linear-gradient(to bottom, rgba(52, 58, 64, 1) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, rgba(52, 58, 64, 1) 0%, rgba(52, 58, 64, 0) 100%);
} }
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";