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

add banners

Browse Source
This commit is contained in:
Spectralitree 2021-08-06 12:16:31 +02:00
parent 86b57dcbd0
commit a33b595d86
9 changed files with 141 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Components/Private/Edit/EditSystem.js
View File

@ -12,6 +12,7 @@ const EditSystem = ({
tag,
timezone,
avatar,
banner,
editDesc,
setEditMode,
setErrorAlert,
@ -103,11 +104,21 @@ const EditSystem = ({
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Avatar url:</BS.Form.Label>
<BS.Form.Control
type="url"
name="avatar_url"
{...registerEdit("avatar_url")}
defaultValue={avatar}
/>
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Banner url:</BS.Form.Label>
<BS.Form.Control
type="url"
name="banner"
{...registerEdit("banner")}
defaultValue={banner}
/>
</BS.Col>
</BS.Form.Row>
<BS.Form.Group className="mt-3">
<BS.Form.Label>Description:</BS.Form.Label>

11
src/Components/Private/MemberCard.js
View File

@ -27,6 +27,7 @@ export default function MemberCard(props) {
const [ pronouns, setPronouns ] = useState("");
const [ editPronouns, setEditPronouns ] = useState("");
const [ avatar, setAvatar ] = useState("");
const [ banner, setBanner ] = useState("");
const [ color, setColor ] = useState("");
const [ desc, setDesc ] = useState("");
const [ editDesc, setEditDesc ] = useState("");
@ -109,13 +110,17 @@ export default function MemberCard(props) {
setColor(member.color);
} else setColor('');
if (member.banner) {
setBanner(member.banner);
} else setBanner("");
if (member.description) {
setDesc(toHTML(member.description));
setEditDesc(member.description);
} else { setDesc("(no description)");
setEditDesc("");
}
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created]);
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
const submitEdit = data => {
props.edit(Object.assign(member, data));
@ -253,6 +258,10 @@ export default function MemberCard(props) {
<BS.Form.Label>Avatar url:</BS.Form.Label>
<BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Banner url:</BS.Form.Label>
<BS.Form.Control type="url" name="banner" {...registerEdit("banner")} defaultValue={banner} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Color:</BS.Form.Label>
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />

16
src/Components/Private/MemberPage.js
View File

@ -27,6 +27,7 @@ export default function MemberPage(props) {
const [ pronouns, setPronouns ] = useState("");
const [ editPronouns, setEditPronouns ] = useState("");
const [ avatar, setAvatar ] = useState("");
const [ banner, setBanner ] = useState("");
const [ color, setColor ] = useState("");
const [ desc, setDesc ] = useState("");
const [ editDesc, setEditDesc ] = useState("");
@ -105,6 +106,10 @@ export default function MemberPage(props) {
var avatarsmall = member.avatar_url.replace('&format=jpeg', '');
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
} else setAvatar('')
if (member.banner) {
setBanner(member.banner);
} else setBanner("");
if (member.color) {
setColor(member.color);
@ -116,7 +121,7 @@ export default function MemberPage(props) {
} else { setDesc("(no description)");
setEditDesc("");
}
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created]);
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
const submitEdit = data => {
props.edit(Object.assign(member, data));
@ -232,8 +237,9 @@ export default function MemberPage(props) {
<BS.Button variant="primary" className="float-right" onClick={() => history.push("/dash/reload")}>Back</BS.Button>
</BS.Card.Body></BS.Card> :
<>
{ localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
<div className="backdrop-overlay"/></> : "" }
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
{ localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
{ !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
<BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
@ -279,6 +285,10 @@ export default function MemberPage(props) {
<BS.Form.Label>Avatar url:</BS.Form.Label>
<BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Banner url:</BS.Form.Label>
<BS.Form.Control type="url" name="banner" {...registerEdit("banner")} defaultValue={banner} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Color:</BS.Form.Label>
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />

4
src/Components/Private/Memberlist.js
View File

@ -323,6 +323,10 @@ export default function Memberlist() {
<BS.Form.Label>Avatar url:</BS.Form.Label>
<BS.Form.Control type="url" name="avatar_url" {...register("avatar_url")} defaultValue={''} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Banner url:</BS.Form.Label>
<BS.Form.Control type="url" name="banner" {...register("banner")} defaultValue={''} />
</BS.Col>
<BS.Col className="mb-lg-2" xs={12} lg={3}>
<BS.Form.Label>Color:</BS.Form.Label>
<BS.Form.Control pattern="[A-Fa-f0-9]{6}" name="color" {...register("color")} defaultValue={''} />

11
src/Components/Private/System.js
View File

@ -24,6 +24,7 @@ export default function System(props) {
const [tag, setTag] = useState("");
const [timezone, setTimezone] = useState("");
const [avatar, setAvatar] = useState("");
const [banner, setBanner] = useState("");
const [desc, setDesc] = useState("");
const [editDesc, setEditDesc] = useState("");
@ -61,6 +62,10 @@ export default function System(props) {
setAvatar(avatarsmall.replace("?width=256&height=256", ""));
} else setAvatar("");
if (user.banner) {
setBanner(user.banner);
} else setBanner("");
// same as above, but with descriptions
// two description variables! one is just the plain description, the other is parsed and converted to html
if (user.description) {
@ -70,7 +75,7 @@ export default function System(props) {
setDesc("(no description)");
setEditDesc("");
}
}, [user.description, user.tag, user.avatar_url, user.tz, user.name]);
}, [user.description, user.tag, user.avatar_url, user.tz, user.name, user.banner]);
// this just resizes the textarea when filled with larger amounts of text
useEffect(() => {
@ -80,6 +85,8 @@ export default function System(props) {
if (match) return null;
return (
<>
{ user.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${user.banner})`}} alt=""/> : ""}
<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">
@ -133,6 +140,7 @@ export default function System(props) {
tag={tag}
timezone={timezone}
avatar={avatar}
banner={banner}
setErrorAlert={setErrorAlert}
user={user}
setUser={setUser}
@ -240,5 +248,6 @@ export default function System(props) {
)}
</BS.Card.Body>
</BS.Card>
</>
);
}

10
src/Components/Public/Profile.js
View File

@ -22,6 +22,7 @@ export default function Profile () {
const [ timezone, setTimezone ] = useState("");
const [ desc, setDesc ] = useState("");
const [ avatar, setAvatar ] = useState('');
const [ banner, setBanner ] = useState("");
const [ isLoading, setIsLoading ] = useState(true);
const [ isError, setIsError ] = useState(false);
@ -53,6 +54,10 @@ export default function Profile () {
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
} else setAvatar('')
if (system.banner) {
setBanner(system.banner);
} else setBanner("");
if (system.tag) {
setTag(system.tag);
} else setTag('');
@ -64,11 +69,12 @@ export default function Profile () {
if (system.description) {
setDesc(toHTML(system.description));
} else setDesc("(no description)");
}, [system.description, system.tag, system.avatar_url, system.tz, system.name]);
}, [system.description, system.tag, system.avatar_url, system.tz, system.name, system.banner]);
return (match ? <ProfileList sysID={sysID} /> :
<>{ isLoading ? <Loading /> : isError ? <BS.Alert variant="danger">Something went wrong, either the system doesn't exist, or there was an error fetching data.</BS.Alert> :
<><BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
<>{ system.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
<BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
<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-4 float-left" /> {name} ({system.id})</BS.Card.Title>

12
src/Components/Public/ProfilePage.js
View File

@ -16,6 +16,7 @@ export default function ProfilePage(props) {
const member = props.member;
const [ avatar, setAvatar ] = useState('')
const [ banner, setBanner ] = useState("");
const [ displayName, setDisplayName ] = useState("");
const [ birthday, setBirthday ] = useState("");
const [ pronouns, setPronouns ] = useState("");
@ -60,10 +61,14 @@ export default function ProfilePage(props) {
setColor(member.color);
} else setColor('');
if (member.banner) {
setBanner(member.banner);
} else setBanner("");
if (member.description) {
setDesc(toHTML(member.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, member.banner]);
function copyLink() {
var link = `https://spectralitree.github.io${location.pathname}`
@ -80,8 +85,9 @@ export default function ProfilePage(props) {
return (
<>
{ localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
<div className="backdrop-overlay"/></> : "" }
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
{ localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
{ !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
<BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert>
<BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between">

19
src/Custom.scss
View File

@ -324,3 +324,22 @@ textarea {
resize: none !important;
}
@import "~bootstrap/scss/bootstrap";
.banner {
position: absolute;
top: 3.125rem;
left: 0;
width: 100%;
height: 30vh;
background-size: cover;
background-position: center;
z-index: -1;
box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;;
}
@media only screen and (min-width: 992px) {
.banner {
height: 50vh;
}
}

58
src/Pages/Settings.js
View File

@ -107,6 +107,34 @@ const Settings = ({ 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("fullbg") ? (
<Toggle
className="mr-2"
defaultChecked={true}
icons={false}
onChange={() => {
localStorage.removeItem("fullbg");
forceUpdate();
}}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false}
icons={false}
onChange={() => {
localStorage.setItem("fullbg", "true");
forceUpdate();
}}
/>
)}
Remove gradient from background color?
</BS.Col>
<BS.Col
xs={12}
lg={4}
@ -133,7 +161,7 @@ const Settings = ({ forceUpdate }) => {
}}
/>
)}
Hide colored backgrounds?
Hide colored backgrounds altogether?
</BS.Col>
<BS.Col
xs={12}
@ -163,6 +191,34 @@ const Settings = ({ forceUpdate }) => {
)}
Expand member cards on default?
</BS.Col>
<BS.Col
xs={12}
lg={4}
className="mx-1 mb-4 d-flex align-items-center row"
>
{localStorage.getItem("hidebanners") ? (
<Toggle
className="mr-2"
defaultChecked={true}
icons={false}
onChange={() => {
localStorage.removeItem("hidebanners");
forceUpdate();
}}
/>
) : (
<Toggle
className="mr-2"
defaultChecked={false}
icons={false}
onChange={() => {
localStorage.setItem("hidebanners", "true");
forceUpdate();
}}
/>
)}
Hide system and member banners?
</BS.Col>
</BS.Row>
</BS.Card.Body>
</BS.Card>