cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04:00
Code Issues Projects Releases Packages Wiki Activity

invite embed tweaks

Browse source
This commit is contained in:
TaiAurori 2021-09-21 14:02:38 -04:00
parent ce0749d9e8
commit 3d5c7ab9ce
1 changed files with 86 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/common/messaging/embed/EmbedInvite.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { RetrievedInvite } from "revolt-api/types/Invites"; import { RetrievedInvite } from "revolt-api/types/Invites";
import { Message } from "revolt.js/dist/maps/Messages"; import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components"; import styled, { css } from "styled-components";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
@ -21,7 +21,8 @@ import { takeError } from "../../../../context/revoltjs/util";
import ServerIcon from "../../../../components/common/ServerIcon"; import ServerIcon from "../../../../components/common/ServerIcon";
import Button from "../../../../components/ui/Button"; import Button from "../../../../components/ui/Button";
import Preloader from "../../../ui/Preloader"; import Preloader from "../../../ui/Preloader";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
import Overline from "../../../ui/Overline";
const EmbedInviteBase = styled.div` const EmbedInviteBase = styled.div`
width: 400px; width: 400px;
height: 80px; height: 80px;
@ -31,15 +32,37 @@ const EmbedInviteBase = styled.div`
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
margin-top: 2px; margin-top: 2px;
${() =>
isTouchscreenDevice &&
css`
flex-wrap: wrap;
height: 130px;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
> button {
width: 100%;
}
`
}
`; `;
const EmbedInviteDetails = styled.div` const EmbedInviteDetails = styled.div`
flex-grow: 1; flex-grow: 1;
padding-left: 12px; padding-left: 12px;
${() =>
isTouchscreenDevice &&
css`
width: calc(100% - 55px);
`
}
`; `;
const EmbedInviteName = styled.div` const EmbedInviteName = styled.div`
font-weight: bold; font-weight: bold;
line-height: 1rem;
max-height: 2rem;
overflow: hidden;
`; `;
const EmbedInviteMemberCount = styled.div` const EmbedInviteMemberCount = styled.div`
@ -57,6 +80,7 @@ export function EmbedInvite(props: Props) {
const code = props.code; const code = props.code;
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const [joinError, setJoinError] = useState<string | undefined>(undefined);
const [invite, setInvite] = useState<RetrievedInvite | undefined>( const [invite, setInvite] = useState<RetrievedInvite | undefined>(
undefined, undefined,
); );
@ -89,6 +113,7 @@ export function EmbedInvite(props: Props) {
} }
return ( return (
<>
<EmbedInviteBase> <EmbedInviteBase>
<ServerIcon <ServerIcon
attachment={invite.server_icon} attachment={invite.server_icon}
@ -141,9 +166,8 @@ export function EmbedInvite(props: Props) {
} }
await client.joinInvite(code); await client.joinInvite(code);
setProcessing(false);
} catch (err) { } catch (err) {
setError(takeError(err)); setJoinError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}}> }}>
@ -151,6 +175,8 @@ export function EmbedInvite(props: Props) {
</Button> </Button>
)} )}
</EmbedInviteBase> </EmbedInviteBase>
{joinError && <Overline type="error" error={joinError} />}
</>
); );
} }