forked from abner/for-legacy-web
chore: merge branch 'ui/glass-header'
This commit is contained in:
Paul Makles
@@ -4,84 +4,135 @@ 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";
|
||||
|
||||
import Header from "../ui/Header";
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
||||
import IconButton from "../ui/IconButton";
|
||||
|
||||
import Tooltip from "./Tooltip";
|
||||
|
||||
interface Props {
|
||||
server: Server;
|
||||
background?: boolean;
|
||||
}
|
||||
|
||||
const ServerName = styled.div`
|
||||
flex-grow: 1;
|
||||
const ServerBanner = styled.div<Omit<Props, "server">>`
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
|
||||
background-size: cover;
|
||||
background-repeat: norepeat;
|
||||
background-position: center center;
|
||||
|
||||
${(props) =>
|
||||
props.background
|
||||
? css`
|
||||
height: 120px;
|
||||
|
||||
.container {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
var(--secondary-background),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
`
|
||||
: css`
|
||||
background-color: var(--secondary-header);
|
||||
`}
|
||||
|
||||
.container {
|
||||
height: var(--header-height);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
gap: 8px;
|
||||
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default observer(({ server }: Props) => {
|
||||
const bannerURL = server.generateBannerURL({ width: 480 });
|
||||
|
||||
return (
|
||||
<Header
|
||||
borders
|
||||
placement="secondary"
|
||||
<ServerBanner
|
||||
background={typeof bannerURL !== "undefined"}
|
||||
style={{
|
||||
background: bannerURL ? `url('${bannerURL}')` : undefined,
|
||||
backgroundImage: bannerURL ? `url('${bannerURL}')` : undefined,
|
||||
}}>
|
||||
{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}
|
||||
|
||||
<ServerName>{server.name}</ServerName>
|
||||
{(server.permission & ServerPermission.ManageServer) > 0 && (
|
||||
<div className="actions">
|
||||
<div className="container">
|
||||
{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 className="title">{server.name}</div>
|
||||
{(server.permission & ServerPermission.ManageServer) > 0 && (
|
||||
<Link to={`/server/${server._id}/settings`}>
|
||||
<IconButton>
|
||||
<Cog size={24} />
|
||||
<Cog size={20} />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</Header>
|
||||
)}
|
||||
</div>
|
||||
</ServerBanner>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -80,7 +80,7 @@ const Blocked = styled.div`
|
||||
color: var(--tertiary-foreground);
|
||||
|
||||
.text {
|
||||
padding: 14px 14px 14px 0;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -89,13 +89,17 @@ const Blocked = styled.div`
|
||||
`;
|
||||
|
||||
const Action = styled.div`
|
||||
display: flex;
|
||||
place-items: center;
|
||||
|
||||
> div {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
padding: 12px;
|
||||
width: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
/*padding: 14px 0 14px 14px;*/
|
||||
}
|
||||
|
||||
.mobile {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
${() =>
|
||||
|
||||
@@ -13,19 +13,25 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
${(props) =>
|
||||
props.position === "top" &&
|
||||
css`
|
||||
top: 0;
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.position === "bottom" &&
|
||||
css`
|
||||
top: 65px;
|
||||
|
||||
${() =>
|
||||
isTouchscreenDevice &&
|
||||
css`
|
||||
top: -90px;
|
||||
`}
|
||||
`}
|
||||
|
||||
> div {
|
||||
${(props) =>
|
||||
props.position === "bottom" &&
|
||||
css`
|
||||
top: -26px;
|
||||
|
||||
${() =>
|
||||
isTouchscreenDevice &&
|
||||
css`
|
||||
top: -32px;
|
||||
`}
|
||||
`}
|
||||
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@@ -52,6 +58,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||
${(props) =>
|
||||
props.position === "top"
|
||||
? css`
|
||||
top: 48px;
|
||||
border-radius: 0 0 var(--border-radius)
|
||||
var(--border-radius);
|
||||
`
|
||||
@@ -60,6 +67,12 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||
0;
|
||||
`}
|
||||
|
||||
${() =>
|
||||
isTouchscreenDevice &&
|
||||
css`
|
||||
top: 56px;
|
||||
`}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -49,8 +49,12 @@ export default observer(
|
||||
}
|
||||
}}>
|
||||
<div>
|
||||
New messages since{" "}
|
||||
{dayjs(decodeTime(last_id)).fromNow()}
|
||||
<Text
|
||||
id="app.main.channel.misc.new_messages"
|
||||
fields={{
|
||||
time_ago: dayjs(decodeTime(last_id)).fromNow(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text id="app.main.channel.misc.jump_beginning" />
|
||||
|
||||
@@ -25,7 +25,11 @@ const Base = styled.div`
|
||||
flex-direction: row;
|
||||
width: calc(100% - var(--scrollbar-thickness));
|
||||
color: var(--secondary-foreground);
|
||||
background: var(--secondary-background);
|
||||
background-color: rgba(
|
||||
var(--secondary-background-rgb),
|
||||
max(var(--min-opacity), 0.75)
|
||||
);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.avatars {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { Group } from "@styled-icons/boxicons-solid";
|
||||
import { autorun } from "mobx";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useHistory } from "react-router-dom";
|
||||
@@ -47,7 +48,7 @@ const EmbedInviteBase = styled.div`
|
||||
|
||||
const EmbedInviteDetails = styled.div`
|
||||
flex-grow: 1;
|
||||
padding-left: 12px;
|
||||
padding-inline-start: 12px;
|
||||
${() =>
|
||||
isTouchscreenDevice &&
|
||||
css`
|
||||
@@ -63,7 +64,14 @@ const EmbedInviteName = styled.div`
|
||||
`;
|
||||
|
||||
const EmbedInviteMemberCount = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 0.8em;
|
||||
|
||||
> svg {
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
@@ -119,6 +127,7 @@ export function EmbedInvite({ code }: Props) {
|
||||
<EmbedInviteDetails>
|
||||
<EmbedInviteName>{invite.server_name}</EmbedInviteName>
|
||||
<EmbedInviteMemberCount>
|
||||
<Group size={12} />
|
||||
{invite.member_count.toLocaleString()}{" "}
|
||||
{invite.member_count === 1 ? "member" : "members"}
|
||||
</EmbedInviteMemberCount>
|
||||
|
||||
Reference in New Issue
Block a user