Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Showing
with 983 additions and 353 deletions
/* eslint-disable react-hooks/rules-of-hooks */
import { observer } from "mobx-react-lite";
import { Link, useParams } from "react-router-dom";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { User } from "revolt.js";
import Category from "../../ui/Category";
import { useParams } from "react-router";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import Button from "../../ui/Button";
import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg";
import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
interface Props {
ctx: HookContext
}
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
export default function MemberSidebar(props: { channel?: Channels.Channel }) {
const ctx = useForceUpdate();
const { channel: cid } = useParams<{ channel: string }>();
const channel = props.channel ?? useChannel(cid, ctx);
export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
const { channel: channel_id } = useParams<{ channel: string }>();
const client = useClient();
const channel = obj ?? client.channels.get(channel_id);
switch (channel?.channel_type) {
case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />;
case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />;
default: return null;
case "Group":
return <GroupMemberSidebar channel={channel} />;
case "TextChannel":
return <ServerMemberSidebar channel={channel} />;
default:
return null;
}
}
export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
const users = useUsers(undefined, ctx);
let members = channel.recipients
.map(x => users.find(y => y?._id === x))
.filter(x => typeof x !== "undefined") as User[];
export const GroupMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const { openScreen } = useIntermediate();
/*const voice = useContext(VoiceContext);
const members = channel.recipients?.filter(
(x) => typeof x !== "undefined",
);
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = [];
......@@ -51,28 +66,34 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/
members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l = ((a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let r = ((b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
members?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a!.online && a!.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b!.online && b!.status?.presence !== Presence.Invisible) ??
false
) | 0;
let n = r - l;
if (n !== 0) {
return n;
}
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return a!.username.localeCompare(b!.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
{/*voiceActive && voiceParticipants.length !== 0 && (
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment>
<Category
type="members"
......@@ -97,110 +118,203 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
)}
</Fragment>
)*/}
{!(members.length === 0 /*&& voiceActive*/) && (
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
{channel.recipients.length}
</span>
}
/>
)}
{members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />}
{members.map(
user =>
user && (
// <LinkProfile user_id={user._id}>
<UserButton
key={user._id}
user={user}
context={channel}
/>
// </LinkProfile>
)
)}
</GenericSidebarList>
</GenericSidebarBase>
);
}
<CollapsibleSection
sticky
id="members"
defaultValue
summary={
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
{channel.recipients?.length ?? 0}
</span>
}
/>
}>
{members?.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{members?.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel!}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
export const ServerMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const client = useClient();
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
const status = useContext(StatusContext);
const client = useContext(AppContext);
useEffect(() => {
if (status === ClientStatus.ONLINE && typeof members === 'undefined') {
client.servers.members.fetchMembers(channel.server)
.then(members => setMembers(members))
}
}, [ status ]);
// ! FIXME: temporary code
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (!members) return;
if (packet.type === 'ServerMemberJoin') {
if (packet.id !== channel.server) return;
setMembers([ ...members, { _id: { server: packet.id, user: packet.user } } ]);
} else if (packet.type === 'ServerMemberLeave') {
if (packet.id !== channel.server) return;
setMembers(members.filter(x => !(x._id.user === packet.user && x._id.server === packet.id)));
useEffect(() => {
if (status === ClientStatus.ONLINE) {
channel.server!.fetchMembers();
}
}
client.addListener('packet', onPacket);
return () => client.removeListener('packet', onPacket);
}, [ members ]);
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l = ((a.online &&
a.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let r = ((b.online &&
b.status?.presence !== Users.Presence.Invisible) ??
false) as any | 0;
let n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
}, [status, channel.server]);
const users = [...client.members.keys()]
.map((x) => JSON.parse(x))
.filter((x) => x.server === channel.server_id)
.map((y) => client.users.get(y.user)!)
.filter((z) => typeof z !== "undefined");
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
<div>{users.length === 0 && <Preloader type="ring" />}</div>
{users.length > 0 && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
id="members"
defaultValue
summary={
<span>
<Text id="app.main.categories.members" />{" "}
{users?.length ?? 0}
</span>
}>
{users.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
function Search({ channel }: { channel: Channel }) {
if (!getState().experiments.enabled?.includes("search")) return null;
type Sort = "Relevance" | "Latest" | "Oldest";
const [sort, setSort] = useState<Sort>("Relevance");
const [query, setV] = useState("");
const [results, setResults] = useState<Message[]>([]);
async function search() {
const data = await channel.searchWithUsers({ query, sort });
setResults(data.messages);
}
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
{users.length}
</span>
<CollapsibleSection
sticky
id="search"
defaultValue={false}
summary={
<>
<Text id="app.main.channel.search.title" /> (BETA)
</>
}>
<div style={{ display: "flex" }}>
{["Relevance", "Latest", "Oldest"].map((key) => (
<Button
key={key}
style={{ flex: 1, minWidth: 0 }}
compact
error={sort === key}
onClick={() => setSort(key as Sort)}>
<Text
id={`app.main.channel.search.sort.${key.toLowerCase()}`}
/>
</Button>
))}
</div>
<InputBox
style={{ width: "100%" }}
onKeyDown={(e) => e.key === "Enter" && search()}
value={query}
onChange={(e) => setV(e.currentTarget.value)}
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "4px",
marginTop: "8px",
}}>
{results.map((message) => {
let href = "";
if (channel?.channel_type === "TextChannel") {
href += `/server/${channel.server_id}`;
}
/>
{users.length === 0 && <img src={placeholderSVG} />}
{users.map(
user =>
user && (
// <LinkProfile user_id={user._id}>
<UserButton
key={user._id}
user={user}
context={channel}
/>
// </LinkProfile>
)
)}
</GenericSidebarList>
</GenericSidebarBase>
href += `/channel/${message.channel_id}/${message._id}`;
return (
<Link to={href} key={message._id}>
<div
style={{
margin: "2px",
padding: "6px",
background: "var(--primary-background)",
}}>
<b>@{message.author?.username}</b>
<br />
{message.content}
</div>
</Link>
);
})}
</div>
</CollapsibleSection>
);
}
import styled, { css } from "styled-components";
interface Props {
readonly compact?: boolean;
readonly accent?: boolean;
readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean;
readonly gold?: boolean;
readonly iconbutton?: boolean;
}
export type ButtonProps = Props &
Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
export default styled.button<Props>`
z-index: 1;
padding: 8px;
font-size: 16px;
text-align: center;
font-family: 'Open Sans', sans-serif;
display: flex;
height: 38px;
min-width: 96px;
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.875rem;
font-family: inherit;
font-weight: 500;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;
......@@ -18,7 +31,7 @@ export default styled.button<Props>`
background: var(--primary-background);
color: var(--foreground);
border-radius: 6px;
border-radius: var(--border-radius);
cursor: pointer;
border: none;
......@@ -27,6 +40,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--primary-background);
}
......@@ -34,6 +48,47 @@ export default styled.button<Props>`
background: var(--secondary-background);
}
${(props) =>
props.compact &&
css`
height: 32px !important;
padding: 2px 12px !important;
font-size: 13px;
`}
${(props) =>
props.iconbutton &&
css`
height: 38px !important;
width: 38px !important;
min-width: unset !important;
`}
${(props) =>
props.accent &&
css`
background: var(--accent) !important;
`}
${(props) =>
props.plain &&
css`
background: transparent !important;
&:hover {
text-decoration: underline;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
&:active {
background: var(--secondary-background);
}
`}
${(props) =>
props.contrast &&
css`
......@@ -45,6 +100,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--secondary-header);
}
......@@ -57,14 +113,35 @@ export default styled.button<Props>`
props.error &&
css`
color: white;
font-weight: 600;
background: var(--error);
&:hover {
filter: brightness(1.2);
background: var(--error);
}
&:disabled {
cursor: not-allowed;
background: var(--error);
}
`}
${(props) =>
props.gold &&
css`
color: black;
font-weight: 600;
background: goldenrod;
&:hover {
filter: brightness(1.2);
background: goldenrod;
}
&:disabled {
cursor: not-allowed;
background: goldenrod;
}
`}
`;
import { Plus } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
import { Plus } from "@styled-icons/boxicons-regular";
const CategoryBase = styled.div<Pick<Props, 'variant'>>`
const CategoryBase = styled.div<Pick<Props, "variant">>`
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
......@@ -11,7 +12,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
padding: 6px 0;
margin-bottom: 4px;
white-space: nowrap;
display: flex;
align-items: center;
flex-direction: row;
......@@ -26,24 +27,29 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
padding-top: 0;
}
${ props => props.variant === 'uniform' && css`
padding-top: 6px;
` }
${(props) =>
props.variant === "uniform" &&
css`
padding-top: 6px;
`}
`;
interface Props {
type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "action"
> & {
text: Children;
action?: () => void;
variant?: 'default' | 'uniform';
}
variant?: "default" | "uniform";
};
export default function Category(props: Props) {
const { text, action, ...otherProps } = props;
return (
<CategoryBase>
{props.text}
{props.action && (
<Plus size={16} onClick={props.action} />
)}
<CategoryBase {...otherProps}>
{text}
{action && <Plus size={16} onClick={action} />}
</CategoryBase>
);
};
}
import { Check } from "@styled-icons/boxicons-regular";
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
const CheckboxBase = styled.label`
gap: 4px;
z-index: 1;
padding: 4px;
display: flex;
border-radius: 4px;
margin-top: 20px;
align-items: center;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 18px;
......@@ -16,33 +17,36 @@ const CheckboxBase = styled.label`
transition: 0.2s ease all;
p {
margin: 0;
}
input {
display: none;
}
&:hover {
background: var(--secondary-background);
.check {
background: var(--background);
}
}
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
&:hover {
background: unset;
}
}
`;
const CheckboxContent = styled.span`
flex-grow: 1;
display: flex;
flex-grow: 1;
font-size: 1rem;
font-weight: 600;
flex-direction: column;
`;
const CheckboxDescription = styled.span`
font-size: 0.8em;
font-size: 0.75rem;
font-weight: 400;
color: var(--secondary-foreground);
`;
......@@ -52,9 +56,10 @@ const Checkmark = styled.div<{ checked: boolean }>`
width: 24px;
height: 24px;
display: grid;
border-radius: 4px;
flex-shrink: 0;
place-items: center;
transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background);
svg {
......
import { useRef } from "preact/hooks";
import { Check, Pencil } from "@styled-icons/boxicons-regular";
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components";
import { RefObject } from "preact";
import { useRef } from "preact/hooks";
interface Props {
value: string;
onChange: (value: string) => void;
......@@ -31,21 +34,40 @@ const presets = [
];
const SwatchesBase = styled.div`
gap: 8px;
/*gap: 8px;*/
display: flex;
input {
width: 0;
height: 0;
top: 72px;
opacity: 0;
margin-top: 44px;
position: absolute;
padding: 0;
border: 0;
position: relative;
pointer-events: none;
}
.overlay {
position: relative;
width: 0;
div {
width: 8px;
height: 68px;
background: linear-gradient(
to right,
var(--primary-background),
transparent
);
}
}
`;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
border-radius: var(--border-radius);
background-color: ${(props) => props.colour};
display: grid;
......@@ -80,32 +102,39 @@ const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
overflow: auto;
padding-bottom: 4px;
> div {
gap: 8px;
display: flex;
flex-direction: row;
padding-inline-start: 8px;
}
`;
export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>();
const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
return (
<SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}
>
<Pencil size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Swatch
colour={value}
type="large"
onClick={() => ref.current?.click()}>
<Palette size={32} />
</Swatch>
<div class="overlay">
<div />
</div>
<Rows>
{presets.map((row, i) => (
<div key={i}>
......@@ -114,11 +143,8 @@ export default function ColourSwatches({ value, onChange }: Props) {
colour={swatch}
type="small"
key={i}
onClick={() => onChange(swatch)}
>
{swatch === value && (
<Check size={18} />
)}
onClick={() => onChange(swatch)}>
{swatch === value && <Check size={22} />}
</Swatch>
))}
</div>
......
import styled from "styled-components";
export default styled.select`
padding: 8px;
border-radius: 2px;
width: 100%;
padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground);
background: var(--secondary-background);
border: none;
outline: 2px solid transparent;
transition: box-shadow 0.2s ease-in-out;
transition: outline-color 0.2s ease-in-out;
&:focus {
outline-color: var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
`;
import dayjs from "dayjs";
import styled, { css } from "styled-components";
import { dayjs } from "../../context/Locale";
const Base = styled.div<{ unread?: boolean }>`
height: 0;
display: flex;
......@@ -11,16 +12,19 @@ const Base = styled.div<{ unread?: boolean }>`
time {
margin-top: -2px;
font-size: .6875rem;
line-height: .6875rem;
padding: 2px 5px 2px 0;
font-size: 0.6875rem;
line-height: 0.6875rem;
padding: 2px 0 2px 0;
padding-inline-end: 5px;
color: var(--tertiary-foreground);
background: var(--primary-background);
}
${ props => props.unread && css`
border-top: thin solid var(--accent);
` }
${(props) =>
props.unread &&
css`
border-top: thin solid var(--accent);
`}
`;
const Unread = styled.div`
......@@ -39,10 +43,8 @@ interface Props {
export default function DateDivider(props: Props) {
return (
<Base unread={props.unread}>
{ props.unread && <Unread>NEW</Unread> }
<time>
{ dayjs(props.date).format("LL") }
</time>
{props.unread && <Unread>NEW</Unread>}
<time>{dayjs(props.date).format("LL")}</time>
</Base>
);
}
import styled, { css } from "styled-components";
export default styled.details<{ sticky?: boolean; large?: boolean }>`
summary {
${(props) =>
props.sticky &&
css`
top: -1px;
z-index: 10;
position: sticky;
`}
${(props) =>
props.large &&
css`
/*padding: 5px 0;*/
background: var(--primary-background);
color: var(--secondary-foreground);
.padding {
/*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
display: flex;
align-items: center;
padding: 5px 0;
margin: 0.8em 0px 0.4em;
cursor: pointer;
}
`}
outline: none;
cursor: pointer;
list-style: none;
user-select: none;
align-items: center;
transition: 0.2s opacity;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
&::marker,
&::-webkit-details-marker {
display: none;
}
.title {
flex-grow: 1;
margin-top: 1px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.padding {
display: flex;
align-items: center;
> svg {
flex-shrink: 0;
margin-inline-end: 4px;
transition: 0.2s ease transform;
}
}
}
&:not([open]) {
summary {
opacity: 0.7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
`;
......@@ -3,37 +3,60 @@ import styled, { css } from "styled-components";
interface Props {
borders?: boolean;
background?: boolean;
placement: 'primary' | 'secondary'
placement: "primary" | "secondary";
}
export default styled.div<Props>`
height: 56px;
font-weight: 600;
user-select: none;
gap: 10px;
gap: 6px;
height: 48px;
flex: 0 auto;
display: flex;
padding: 20px;
flex-shrink: 0;
padding: 0 16px;
font-weight: 600;
user-select: none;
align-items: center;
background-color: var(--primary-header);
background-size: cover !important;
background-position: center !important;
background-color: var(--primary-header);
svg {
flex-shrink: 0;
}
.menu {
margin-inline-end: 8px;
color: var(--secondary-foreground);
}
/*@media only screen and (max-width: 768px) {
padding: 0 12px;
}*/
@media (pointer: coarse) {
height: 56px;
}
${(props) =>
props.background &&
css`
height: 120px !important;
align-items: flex-end;
${ props => props.background && css`
height: 120px;
align-items: flex-end;
` }
text-shadow: 0px 0px 1px black;
`}
${ props => props.placement === 'secondary' && css`
background-color: var(--secondary-header);
padding: 14px;
` }
${(props) =>
props.placement === "secondary" &&
css`
background-color: var(--secondary-header);
padding: 14px;
`}
${ props => props.borders && css`
border-start-start-radius: 8px;
border-end-start-radius: 8px;
` }
${(props) =>
props.borders &&
css`
border-start-start-radius: 8px;
`}
`;
import styled, { css } from "styled-components";
interface Props {
type?: 'default' | 'circle'
rotate?: string;
type?: "default" | "circle";
}
const normal = `var(--secondary-foreground)`;
......@@ -12,6 +13,7 @@ export default styled.div<Props>`
display: grid;
cursor: pointer;
place-items: center;
transition: 0.1s ease background-color;
fill: ${normal};
color: ${normal};
......@@ -21,6 +23,10 @@ export default styled.div<Props>`
color: ${normal};
}
svg {
transition: 0.2s ease transform;
}
&:hover {
fill: ${hover};
color: ${hover};
......@@ -31,13 +37,23 @@ export default styled.div<Props>`
}
}
${ props => props.type === 'circle' && css`
padding: 4px;
border-radius: 50%;
background-color: var(--secondary-header);
&:hover {
background-color: var(--primary-header);
}
` }
${(props) =>
props.type === "circle" &&
css`
padding: 4px;
border-radius: 50%;
background-color: var(--secondary-header);
&:hover {
background-color: var(--primary-header);
}
`}
${(props) =>
props.rotate &&
css`
svg {
transform: rotateZ(${props.rotate});
}
`}
`;
......@@ -6,23 +6,26 @@ interface Props {
export default styled.input<Props>`
z-index: 1;
font-size: 1rem;
padding: 8px 16px;
border-radius: 6px;
border-radius: var(--border-radius);
font-family: inherit;
color: var(--foreground);
background: var(--primary-background);
transition: 0.2s ease background-color;
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
&:hover {
background: var(--secondary-background);
}
&:focus {
outline: 2px solid var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
${(props) =>
......
// This file must be imported and used at least once for SVG masks.
export default function Masks() {
return (
<svg width={0} height={0} style={{ position: "fixed" }}>
<defs>
<mask id="server">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="5" r="7" fill={"black"} />
</mask>
<mask id="user">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="27" r="7" fill={"black"} />
</mask>
<mask id="session">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="26" cy="28" r="10" fill={"black"} />
</mask>
<mask id="overlap">
<rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="32" cy="16" r="18" fill={"black"} />
</mask>
</defs>
</svg>
);
}
import Button from "./Button";
import classNames from "classnames";
import { Children } from "../../types/Preact";
import { createPortal, useEffect } from "preact/compat";
/* eslint-disable react-hooks/rules-of-hooks */
import styled, { css, keyframes } from "styled-components";
import { createPortal, useCallback, useEffect, useState } from "preact/compat";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Children } from "../../types/Preact";
import Button, { ButtonProps } from "./Button";
const open = keyframes`
0% {opacity: 0;}
70% {opacity: 0;}
100% {opacity: 1;}
`;
const close = keyframes`
0% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
`;
const zoomIn = keyframes`
0% {transform: scale(0.5);}
98% {transform: scale(1.01);}
100% {transform: scale(1);}
`;
const zoomOut = keyframes`
0% {transform: scale(1);}
100% {transform: scale(0.5);}
`;
const ModalBase = styled.div`
top: 0;
left: 0;
......@@ -35,42 +50,65 @@ const ModalBase = styled.div`
color: var(--foreground);
background: rgba(0, 0, 0, 0.8);
&.closing {
animation-name: ${close};
}
&.closing > div {
animation-name: ${zoomOut};
}
`;
const ModalContainer = styled.div`
overflow: hidden;
border-radius: 8px;
max-width: calc(100vw - 20px);
border-radius: var(--border-radius);
animation-name: ${zoomIn};
animation-duration: 0.25s;
animation-timing-function: cubic-bezier(.3,.3,.18,1.1);
animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
`;
const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'border' | 'padding']?: boolean }>`
border-radius: 8px;
const ModalContent = styled.div<
{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>`
text-overflow: ellipsis;
border-radius: var(--border-radius);
h3 {
margin-top: 0;
}
${ props => !props.noBackground && css`
background: var(--secondary-header);
` }
${ props => props.padding && css`
padding: 1.5em;
` }
${ props => props.attachment && css`
border-radius: 8px 8px 0 0;
` }
form {
display: flex;
flex-direction: column;
}
${ props => props.border && css`
border-radius: 10px;
border: 2px solid var(--secondary-background);
` }
${(props) =>
!props.noBackground &&
css`
background: var(--secondary-header);
`}
${(props) =>
props.padding &&
css`
padding: 1.5em;
`}
${(props) =>
props.attachment &&
css`
border-radius: var(--border-radius) var(--border-radius) 0 0;
`}
${(props) =>
props.border &&
css`
border-radius: var(--border-radius);
border: 2px solid var(--secondary-background);
`}
`;
const ModalActions = styled.div`
......@@ -83,13 +121,10 @@ const ModalActions = styled.div`
background: var(--secondary-background);
`;
export interface Action {
text: Children;
onClick: () => void;
export type Action = Omit<ButtonProps, "onClick"> & {
confirmation?: boolean;
contrast?: boolean;
error?: boolean;
}
onClick: () => void;
};
interface Props {
children?: Children;
......@@ -100,17 +135,19 @@ interface Props {
dontModal?: boolean;
padding?: boolean;
onClose: () => void;
onClose?: () => void;
actions?: Action[];
disabled?: boolean;
border?: boolean;
visible: boolean;
}
export let isModalClosing = false;
export default function Modal(props: Props) {
if (!props.visible) return null;
let content = (
const content = (
<ModalContent
attachment={!!props.actions}
noBackground={props.noBackground}
......@@ -125,24 +162,36 @@ export default function Modal(props: Props) {
return content;
}
const [animateClose, setAnimateClose] = useState(false);
isModalClosing = animateClose;
const onClose = useCallback(() => {
setAnimateClose(true);
setTimeout(() => props.onClose?.(), 2e2);
}, [setAnimateClose, props]);
useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
useEffect(() => {
if (props.disallowClosing) return;
function keyDown(e: KeyboardEvent) {
if (e.key === "Escape") {
props.onClose();
onClose();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [ props.disallowClosing, props.onClose ]);
}, [props.disallowClosing, onClose]);
const confirmationAction = props.actions?.find(
(action) => action.confirmation,
);
let confirmationAction = props.actions?.find(action => action.confirmation);
useEffect(() => {
if (!confirmationAction) return;
// ! FIXME: this may be done better if we
// ! TODO: this may be done better if we
// ! can focus the button although that
// ! doesn't seem to work...
function keyDown(e: KeyboardEvent) {
......@@ -153,27 +202,27 @@ export default function Modal(props: Props) {
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [ confirmationAction ]);
}, [confirmationAction]);
return createPortal(
<ModalBase onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={e => (e.cancelBubble = true)}>
<ModalBase
className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content}
{props.actions && (
<ModalActions>
{props.actions.map(x => (
{props.actions.map((x, index) => (
<Button
contrast={x.contrast ?? true}
error={x.error ?? false}
onClick={x.onClick}
disabled={props.disabled}>
{x.text}
</Button>
key={index}
{...x}
disabled={props.disabled}
/>
))}
</ModalActions>
)}
</ModalContainer>
</ModalBase>,
document.body
document.body,
);
}
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact";
import { Text } from 'preact-i18n';
interface Props {
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string;
block?: boolean;
spaced?: boolean;
noMargin?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
}
};
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
margin: 0.4em 0;
margin-top: 0.8em;
${(props) =>
!props.noMargin &&
css`
margin: 0.4em 0;
`}
${(props) =>
props.spaced &&
css`
margin-top: 0.8em;
`}
font-size: 14px;
font-weight: 600;
......@@ -46,9 +60,11 @@ export default function Overline(props: Props) {
<OverlineBase {...props}>
{props.children}
{props.children && props.error && <> &middot; </>}
{props.error && <Overline type="error">
<Text id={`error.${props.error}`}>{props.error}</Text>
</Overline>}
{props.error && (
<Overline type="error">
<Text id={`error.${props.error}`}>{props.error}</Text>
</Overline>
)}
</OverlineBase>
);
}
......@@ -87,7 +87,7 @@ const PreloaderBase = styled.div`
`;
interface Props {
type: 'spinner' | 'ring'
type: "spinner" | "ring";
}
export default function Preloader({ type }: Props) {
......
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { Circle } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
interface Props {
children: Children;
......@@ -26,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
font-size: 1rem;
font-weight: 600;
user-select: none;
border-radius: 4px;
transition: 0.2s ease all;
border-radius: var(--border-radius);
&:hover {
background: var(--hover);
......@@ -92,8 +93,7 @@ export default function Radio(props: Props) {
disabled={props.disabled}
onClick={() =>
!props.disabled && props.onSelect && props.onSelect()
}
>
}>
<div>
<Circle size={12} />
</div>
......
.container {
font-size: 0.875rem;
font-size: .875rem;
line-height: 20px;
position: relative;
}
......
// import classNames from "classnames";
// import { memo } from "preact/compat";
// import styles from "./TextArea.module.scss";
// import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
import styled, { css } from "styled-components";
export interface TextAreaProps {
code?: boolean;
padding?: number;
lineHeight?: number;
padding?: string;
lineHeight?: string;
hideBorder?: boolean;
}
......@@ -21,30 +17,42 @@ export default styled.textarea<TextAreaProps>`
display: block;
color: var(--foreground);
background: var(--secondary-background);
padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px;
line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px;
${ props => props.hideBorder && css`
border: none;
` }
${ props => !props.hideBorder && css`
border-radius: 4px;
transition: border-color .2s ease-in-out;
border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
` }
padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
line-height: ${(props) =>
props.lineHeight ?? "var(--textarea-line-height)"};
${(props) =>
props.hideBorder &&
css`
border: none;
`}
${(props) =>
!props.hideBorder &&
css`
border-radius: var(--border-radius);
transition: border-color 0.2s ease-in-out;
border: var(--input-border-width) solid transparent;
`}
&:focus {
outline: none;
${ props => !props.hideBorder && css`
border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
` }
${(props) =>
!props.hideBorder &&
css`
border: var(--input-border-width) solid var(--accent);
`}
}
${ props => props.code ? css`
font-family: 'Fira Mono', 'Courier New', Courier, monospace;
` : css`
font-family: 'Open Sans', sans-serif;
` }
${(props) =>
props.code
? css`
font-family: var(--monospace-font), monospace;
`
: css`
font-family: inherit;
`}
font-variant-ligatures: var(--ligatures);
`;
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { InfoCircle } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
interface Props {
warning?: boolean
error?: boolean
warning?: boolean;
error?: boolean;
}
export const Separator = styled.div<Props>`
height: 1px;
width: calc(100% - 10px);
background: var(--secondary-header);
margin: 18px auto;
`;
export const TipBase = styled.div<Props>`
display: flex;
padding: 12px;
......@@ -14,8 +22,8 @@ export const TipBase = styled.div<Props>`
align-items: center;
font-size: 14px;
border-radius: 7px;
background: var(--primary-header);
border-radius: var(--border-radius);
border: 2px solid var(--secondary-header);
a {
......@@ -30,25 +38,34 @@ export const TipBase = styled.div<Props>`
margin-inline-end: 10px;
}
${ props => props.warning && css`
color: var(--warning);
border: 2px solid var(--warning);
background: var(--secondary-header);
` }
${ props => props.error && css`
color: var(--error);
border: 2px solid var(--error);
background: var(--secondary-header);
` }
${(props) =>
props.warning &&
css`
color: var(--warning);
border: 2px solid var(--warning);
background: var(--secondary-header);
`}
${(props) =>
props.error &&
css`
color: var(--error);
border: 2px solid var(--error);
background: var(--secondary-header);
`}
`;
export default function Tip(props: Props & { children: Children }) {
const { children, ...tipProps } = props;
export default function Tip(
props: Props & { children: Children; hideSeparator?: boolean },
) {
const { children, hideSeparator, ...tipProps } = props;
return (
<TipBase {...tipProps}>
<InfoCircle size={20} />
<span>{props.children}</span>
</TipBase>
<>
{!hideSeparator && <Separator />}
<TipBase {...tipProps}>
<InfoCircle size={20} />
<span>{children}</span>
</TipBase>
</>
);
}
import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
interface BaseProps {
readonly hover?: boolean;
readonly account?: boolean;
readonly disabled?: boolean;
readonly largeDescription?: boolean;
}
const CategoryBase = styled.div<BaseProps>`
/*height: 54px;*/
padding: 9.8px 12px;
border-radius: 6px;
margin-bottom: 10px;
color: var(--foreground);
background: var(--secondary-header);
gap: 12px;
display: flex;
align-items: center;
flex-direction: row;
> svg {
flex-shrink: 0;
}
.content {
display: flex;
flex-grow: 1;
flex-direction: column;
font-weight: 600;
font-size: 14px;
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.description {
${(props) =>
props.largeDescription
? css`
font-size: 14px;
`
: css`
font-size: 11px;
`}
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
a:hover {
text-decoration: underline;
}
}
}
${(props) =>
props.hover &&
css`
cursor: pointer;
opacity: 1;
transition: 0.1s ease background-color;
&:hover {
background: var(--secondary-background);
}
`}
${(props) =>
props.disabled &&
css`
opacity: 0.4;
/*.content,
.action {
color: var(--tertiary-foreground);
}*/
.action {
font-size: 14px;
}
`}
${(props) =>
props.account &&
css`
height: 54px;
.content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.title {
text-transform: uppercase;
font-size: 12px;
color: var(--secondary-foreground);
}
.description {
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
`}
`;
interface Props extends BaseProps {
icon?: Children;
children?: Children;
description?: Children;
onClick?: () => void;
action?: "chevron" | "external" | Children;
}
export default function CategoryButton({
icon,
children,
description,
account,
disabled,
onClick,
hover,
action,
}: Props) {
return (
<CategoryBase
hover={hover || typeof onClick !== "undefined"}
onClick={onClick}
disabled={disabled}
account={account}>
{icon}
<div class="content">
<div className="title">{children}</div>
<div className="description">{description}</div>
</div>
<div class="action">
{typeof action === "string" ? (
action === "chevron" ? (
<ChevronRight size={24} />
) : (
<LinkExternal size={20} />
)
) : (
action
)}
</div>
</CategoryBase>
);
}