cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(header): header rewrite complete

Browse source
This commit is contained in:
trashtemp 2021-12-27 15:38:49 +01:00
parent a396e511ec
commit 93925834cc
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 91 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
src/components/common/ServerHeader.tsx
View file

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { ServerPermission } from "revolt.js/dist/api/permissions";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
@ -17,14 +17,30 @@ interface Props {
server: Server;
}
const ServerBanner = styled.div`
interface Props {
background?: boolean;
}
const ServerBanner = styled.div<Props>`
background-color: var(--secondary-header);
//height: 120px; //USE IF SERVER BANNER IS APPLIED
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: end;
${(props) =>
props.background &&
css`
height: 120px;
.container {
background: linear-gradient(
0deg,
var(--secondary-background),
transparent
);
}
`}
.container {
height: 48px;
display: flex;
@ -49,76 +65,80 @@ export default observer(({ server }: Props) => {
const bannerURL = server.generateBannerURL({ width: 480 });
return (
<div>
<ServerBanner>
<div className="container">
<div>
{server.flags && server.flags & 1 ? (
<Tooltip
content={
<Text id="app.special.server-badges.official" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
<ServerBanner
background={typeof bannerURL !== "undefined"}
style={{
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}>
<div className="container">
<div>
{server.flags && server.flags & 1 ? (
<Tooltip
content={
<Text id="app.special.server-badges.official" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
/>
<image
xlinkHref="/assets/badges/revolt_r.svg"
height="15"
width="15"
x="2"
y="3"
style={
"justify-content: center; align-items: center; filter: brightness(0);"
}
/>
</svg>
</Tooltip>
) : undefined}
{server.flags && server.flags & 2 ? (
<Tooltip
content={
<Text id="app.special.server-badges.verified" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
/>
<foreignObject
x="2"
y="2"
width="15"
height="15">
<Check
size={15}
color="black"
strokeWidth={8}
/>
<image
xlinkHref="/assets/badges/revolt_r.svg"
height="15"
width="15"
x="2"
y="3"
style={
"justify-content: center; align-items: center; filter: brightness(0);"
}
/>
</svg>
</Tooltip>
) : undefined}
{server.flags && server.flags & 2 ? (
<Tooltip
content={
<Text id="app.special.server-badges.verified" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
/>
<foreignObject
x="2"
y="2"
width="15"
height="15">
<Check
size={15}
color="black"
strokeWidth={8}
/>
</foreignObject>
</svg>
</Tooltip>
) : undefined}
</div>
<div className="title">{server.name}</div>
{(server.permission & ServerPermission.ManageServer) >
0 && (
<div className="actions">
<Link to={`/server/${server._id}/settings`}>
<IconButton>
<Cog size={20} />
</IconButton>
</Link>
</div>
)}
</foreignObject>
</svg>
</Tooltip>
) : undefined}
</div>
</ServerBanner>
</div>
<div className="title">{server.name}</div>
{(server.permission & ServerPermission.ManageServer) > 0 && (
<div className="actions">
<Link to={`/server/${server._id}/settings`}>
<IconButton>
<Cog size={20} />
</IconButton>
</Link>
</div>
)}
</div>
</ServerBanner>
/*<Header
borders
placement="secondary"