cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 09:37:13 -04: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
No known key found for this signature in database
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;
}
const ServerName = styled.div`
flex-grow: 1;
const ServerBanner = styled.div`
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) => {
@ -26,45 +49,64 @@ export default observer(({ server }: Props) => {
return (
<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} />
</foreignObject>
</svg>
</Tooltip>
) : undefined}
<ServerBanner>
<div className="title">
<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}
/>
</foreignObject>
</svg>
</Tooltip>
) : undefined}
</div>
<div className="test">{server.name}</div>
</div>
</ServerBanner>
</div>
/*<Header
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 {
server: Server;
}
@ -164,13 +142,7 @@ export default observer(() => {
return (
<ServerBase>
<ServerBanner>
<div className="title">
<ServerHeader server={server} />
<div className="test">{server.name}</div>
</div>
</ServerBanner>
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList
onContextMenu={attachContextMenu("Menu", {