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