cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-02-22 00:00:56 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(header): rewrite of server header

Browse source
This commit is contained in:
trashtemp 2021-12-27 15:10:02 +01:00
parent 7241498f87
commit 746d017142
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: D1F0DB65081B0FC6
2 changed files with 84 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,8 +17,31 @@ interface Props {
server: Server; server: Server;
} }
const ServerName = styled.div` const ServerBanner = styled.div`
flex-grow: 1; background-color: var(--primary-background);
//height: 120px; //USE IF SERVER BANNER IS APPLIED
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: end;
.title {
height: 48px;
display: flex;
align-items: center;
padding: 10px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 8px;
.test {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`; `;
export default observer(({ server }: Props) => { export default observer(({ server }: Props) => {
@ -26,45 +49,64 @@ export default observer(({ server }: Props) => {
return ( return (
<div> <div>
{server.flags && server.flags & 1 ? ( <ServerBanner>
<Tooltip <div className="title">
content={<Text id="app.special.server-badges.official" />} <div>
placement={"bottom-start"}> {server.flags && server.flags & 1 ? (
<svg width="20" height="20"> <Tooltip
<image content={
xlinkHref="/assets/badges/verified.svg" <Text id="app.special.server-badges.official" />
height="20" }
width="20" placement={"bottom-start"}>
/> <svg width="20" height="20">
<image <image
xlinkHref="/assets/badges/revolt_r.svg" xlinkHref="/assets/badges/verified.svg"
height="15" height="20"
width="15" width="20"
x="2" />
y="3" <image
style={ xlinkHref="/assets/badges/revolt_r.svg"
"justify-content: center; align-items: center; filter: brightness(0);" height="15"
} width="15"
/> x="2"
</svg> y="3"
</Tooltip> style={
) : undefined} "justify-content: center; align-items: center; filter: brightness(0);"
{server.flags && server.flags & 2 ? ( }
<Tooltip />
content={<Text id="app.special.server-badges.verified" />} </svg>
placement={"bottom-start"}> </Tooltip>
<svg width="20" height="20"> ) : undefined}
<image {server.flags && server.flags & 2 ? (
xlinkHref="/assets/badges/verified.svg" <Tooltip
height="20" content={
width="20" <Text id="app.special.server-badges.verified" />
/> }
<foreignObject x="2" y="2" width="15" height="15"> placement={"bottom-start"}>
<Check size={15} color="black" strokeWidth={8} /> <svg width="20" height="20">
</foreignObject> <image
</svg> xlinkHref="/assets/badges/verified.svg"
</Tooltip> height="20"
) : undefined} 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="test">{server.name}</div>
</div>
</ServerBanner>
</div> </div>
/*<Header /*<Header
borders borders

30
src/components/navigation/left/ServerSidebar.tsx
View file

@ -49,28 +49,6 @@ const ServerList = styled.div`
} }
`; `;
const ServerBanner = styled.div`
background-color: var(--primary-background);
.title {
height: 48px;
display: flex;
align-items: center;
padding: 10px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 8px;
.test {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
interface Props { interface Props {
server: Server; server: Server;
} }
@ -164,13 +142,7 @@ export default observer(() => {
return ( return (
<ServerBase> <ServerBase>
<ServerBanner> <ServerHeader server={server} />
<div className="title">
<ServerHeader server={server} />
<div className="test">{server.name}</div>
</div>
</ServerBanner>
<ConnectionStatus /> <ConnectionStatus />
<ServerList <ServerList
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {