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
Hide whitespace changes
Inline Side-by-side
Showing
with 1409 additions and 616 deletions
src/components/navigation/left/HomeSidebar.tsx
View file @ 1ac5de17
import { Localizer, Text } from "preact-i18n"; import {
import { useContext } from "preact/hooks"; Home,
import { Home, Users, Tool, Save } from "@styled-icons/feather"; UserDetail,
Wrench,
Notepad,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import Category from '../../ui/Category'; import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
import UserHeader from "../../common/user/UserHeader"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { Channels } from "revolt.js/dist/api/objects";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector"; import { connectState } from "../../../redux/connector";
import ConnectionStatus from '../items/ConnectionStatus';
import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { mapChannelWithUnread, useUnreads } from "./common";
import { Users as UsersNS } from 'revolt.js/dist/api/objects'; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ButtonItem, { ChannelButton } from '../items/ButtonItem';
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { mapChannelWithUnread, useUnreads } from "./common";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { Link, Redirect, useLocation, useParams } from "react-router-dom"; import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import ConnectionStatus from "../items/ConnectionStatus";
import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
type Props = WithDispatcher & { type Props = {
unreads: Unreads; unreads: Unreads;
} };
function HomeSidebar(props: Props) { const HomeSidebar = observer((props: Props) => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const client = useContext(AppContext); const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>(); const { channel } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const ctx = useForceUpdate(); const channels = [...client.channels.values()]
const channels = useDMs(ctx); .filter(
(x) =>
x.channel_type === "DirectMessage" ||
x.channel_type === "Group",
)
.map((x) => mapChannelWithUnread(x, props.unreads));
const obj = channels.find(x => x?._id === channel); const obj = client.channels.get(channel);
if (channel && !obj) return <Redirect to="/" />; if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj }); if (obj) useUnreads({ ...props, channel: obj });
const channelsArr = channels useEffect(() => {
.filter(x => x.channel_type !== 'SavedMessages') if (!channel) return;
.map(x => mapChannelWithUnread(x, props.unreads));
const users = useUsers( dispatch({
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[]) type: "LAST_OPENED_SET",
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], []) parent: "home",
, ctx); child: channel,
});
}, [channel]);
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp)); channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return ( return (
<GenericSidebarBase> <GenericSidebarBase padding>
<UserHeader user={client.user!} />
<ConnectionStatus /> <ConnectionStatus />
<GenericSidebarList> <GenericSidebarList>
<ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span>
<Text id="app.navigation.tabs.home" />
</span>
</ButtonItem>
</ConditionalLink>
{!isTouchscreenDevice && ( {!isTouchscreenDevice && (
<> <>
<Link to="/"> <ConditionalLink
<ButtonItem active={pathname === "/"}> active={pathname === "/friends"}
<Home size={20} /> to="/friends">
<span><Text id="app.navigation.tabs.home" /></span>
</ButtonItem>
</Link>
<Link to="/friends">
<ButtonItem <ButtonItem
active={pathname === "/friends"} active={pathname === "/friends"}
alert={ alert={
typeof users.find( typeof [...client.users.values()].find(
user => (user) =>
user?.relationship === user?.relationship ===
UsersNS.Relationship.Incoming RelationshipStatus.Incoming,
) !== "undefined" ? 'unread' : undefined ) !== "undefined"
} ? "unread"
> : undefined
<Users size={20} /> }>
<span><Text id="app.navigation.tabs.friends" /></span> <UserDetail size={20} />
<span>
<Text id="app.navigation.tabs.friends" />
</span>
</ButtonItem> </ButtonItem>
</Link> </ConditionalLink>
</> </>
)} )}
<Link to="/open/saved"> <ConditionalLink
active={obj?.channel_type === "SavedMessages"}
to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}> <ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Save size={20} /> <Notepad size={20} />
<span><Text id="app.navigation.tabs.saved" /></span> <span>
<Text id="app.navigation.tabs.saved" />
</span>
</ButtonItem> </ButtonItem>
</Link> </ConditionalLink>
{import.meta.env.DEV && ( {import.meta.env.DEV && (
<Link to="/dev"> <Link to="/dev">
<ButtonItem active={pathname === "/dev"}> <ButtonItem active={pathname === "/dev"}>
<Tool size={20} /> <Wrench size={20} />
<span><Text id="app.navigation.tabs.dev" /></span> <span>
<Text id="app.navigation.tabs.dev" />
</span>
</ButtonItem> </ButtonItem>
</Link> </Link>
)} )}
<Localizer> <Category
<Category text={<Text id="app.main.categories.conversations" />}
text={ action={() =>
( openScreen({
<Text id="app.main.categories.conversations" /> id: "special_input",
) as any type: "create_group",
} })
action={() => openScreen({ id: "special_input", type: "create_group" })} }
/> />
</Localizer> {channels.length === 0 && (
{channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />} <img src={placeholderSVG} loading="eager" />
{channelsArr.map(x => { )}
{channels.map((x) => {
let user; let user;
if (x.channel_type === 'DirectMessage') { if (x.channel.channel_type === "DirectMessage") {
let recipient = client.channels.getRecipient(x._id); if (!x.channel.active) return null;
user = users.find(x => x?._id === recipient); user = x.channel.recipient;
if (!user) { if (!user) {
console.warn(`Skipped DM ${x._id} because user was missing.`); console.warn(
`Skipped DM ${x.channel._id} because user was missing.`,
);
return null; return null;
} }
} }
return ( return (
<Link to={`/channel/${x._id}`}> <ConditionalLink
key={x.channel._id}
active={x.channel._id === channel}
to={`/channel/${x.channel._id}`}>
<ChannelButton <ChannelButton
user={user} user={user}
channel={x} channel={x.channel}
alert={x.unread} alert={x.unread}
alertCount={x.alertCount} alertCount={x.alertCount}
active={x._id === channel} active={x.channel._id === channel}
/> />
</Link> </ConditionalLink>
); );
})} })}
<PaintCounter /> <PaintCounter />
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
}; });
export default connectState( export default connectState(
HomeSidebar, HomeSidebar,
state => { (state) => {
return { return {
unreads: state.unreads unreads: state.unreads,
}; };
}, },
true, true,
true
); );
src/components/navigation/left/ServerListSidebar.tsx
View file @ 1ac5de17
import LineDivider from "../../ui/LineDivider"; import { Plus } from "@styled-icons/boxicons-regular";
import { mapChannelWithUnread } from "./common"; import { observer } from "mobx-react-lite";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact"; import { attachContextMenu } from "preact-context-menu";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
import { attachContextMenu } from 'preact-context-menu'; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { connectState } from "../../../redux/connector"; import { connectState } from "../../../redux/connector";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { Channel, Servers } from "revolt.js/dist/api/objects";
import { Link, useLocation, useParams } from "react-router-dom";
import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
import logoSVG from '../../../assets/logo.svg'; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) { import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover";
import UserIcon from "../../common/user/UserIcon";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import { Children } from "../../../types/Preact";
function Icon({
children,
unread,
size,
}: {
children: Children;
unread?: "mention" | "unread";
size: number;
}) {
return ( return (
<svg <svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
width={size} <use href="#serverIndicator" />
height={size} <foreignObject
aria-hidden="true" x="0"
viewBox="0 0 32 32" y="0"
> width="32"
<foreignObject x="0" y="0" width="32" height="32"> height="32"
{ children } mask={unread ? "url(#server)" : undefined}>
{children}
</foreignObject> </foreignObject>
{unread === 'unread' && ( {unread === "unread" && (
<circle <circle cx="27" cy="5" r="5" fill={"white"} />
cx="27"
cy="27"
r="5"
fill={"white"}
/>
)} )}
{unread === 'mention' && ( {unread === "mention" && (
<circle <circle cx="27" cy="5" r="5" fill={"var(--error)"} />
cx="27"
cy="27"
r="5"
fill={"red"}
/>
)} )}
</svg> </svg>
) );
} }
const ServersBase = styled.div` const ServersBase = styled.div`
width: 52px; width: 56px;
height: 100%; height: 100%;
padding-left: 2px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`; `;
const ServerList = styled.div` const ServerList = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 48px; padding-bottom: 20px;
/*width: 58px;*/
flex-direction: column; flex-direction: column;
border-inline-end: 2px solid var(--sidebar-active);
scrollbar-width: none; scrollbar-width: none;
...@@ -68,149 +87,250 @@ const ServerList = styled.div` ...@@ -68,149 +87,250 @@ const ServerList = styled.div`
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0px; width: 0px;
} }
/*${isTouchscreenDevice &&
css`
width: 58px;
`}*/
`; `;
const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>` const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
height: 44px; height: 58px;
padding: 4px; display: flex;
margin: 2px 0 2px 4px; align-items: center;
:focus {
outline: 3px solid blue;
}
> div {
height: 42px;
padding-inline-start: 6px;
border-top-left-radius: 4px; display: grid;
border-bottom-left-radius: 4px; place-items: center;
img { border-start-start-radius: 50%;
width: 32px; border-end-start-radius: 50%;
height: 32px;
&:active {
transform: translateY(1px);
}
${(props) =>
props.active &&
css`
&:active {
transform: none;
}
`}
} }
${ props => props.active && css` > span {
background: var(--sidebar-active); width: 0;
` } display: relative;
${(props) =>
!props.active &&
css`
display: none;
`}
${ props => props.active && props.invert && css` svg {
img { margin-top: 5px;
filter: saturate(0) brightness(10); pointer-events: none;
// outline: 1px solid red;
} }
` } }
${(props) =>
(!props.active || props.home) &&
css`
cursor: pointer;
`}
`; `;
function Swoosh() {
return (
<span>
<svg
width="54"
height="106"
viewBox="0 0 54 106"
xmlns="http://www.w3.org/2000/svg">
<path
d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
fill="var(--sidebar-active)"
/>
<path
d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
fill="var(--sidebar-active)"
/>
<path
d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
fill="var(--sidebar-active)"
/>
</svg>
</span>
);
}
interface Props { interface Props {
unreads: Unreads; unreads: Unreads;
lastOpened: LastOpened;
} }
export function ServerListSidebar({ unreads }: Props) { export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
const ctx = useForceUpdate(); const client = useClient();
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[])
.map(x => mapChannelWithUnread(x, unreads));
const unreadChannels = channels.filter(x => x.unread)
.map(x => x._id);
const servers = activeServers.map(server => { const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? client.servers.get(server_id) : undefined;
const activeServers = [...client.servers.values()];
const channels = [...client.channels.values()].map((x) =>
mapChannelWithUnread(x, unreads),
);
const unreadChannels = channels
.filter((x) => x.unread)
.map((x) => x.channel?._id);
const servers = activeServers.map((server) => {
let alertCount = 0; let alertCount = 0;
for (let id of server.channels) { for (const id of server.channel_ids) {
let channel = channels.find(x => x._id === id); const channel = channels.find((x) => x.channel?._id === id);
if (channel?.alertCount) { if (channel?.alertCount) {
alertCount += channel.alertCount; alertCount += channel.alertCount;
} }
} }
return { return {
...server, server,
unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ? unread: (typeof server.channel_ids.find((x) =>
( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined, unreadChannels.includes(x),
alertCount ) !== "undefined"
} ? alertCount > 0
? "mention"
: "unread"
: undefined) as "mention" | "unread" | undefined,
alertCount,
};
}); });
const history = useHistory();
const path = useLocation().pathname; const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>(); const { openScreen } = useIntermediate();
const server = servers.find(x => x!._id == server_id);
// const { openScreen } = useContext(IntermediateContext); let homeUnread: "mention" | "unread" | undefined;
let homeUnread: 'mention' | 'unread' | undefined;
let alertCount = 0; let alertCount = 0;
for (let x of channels) { for (const x of channels) {
if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) { if (
homeUnread = 'unread'; (x.channel?.channel_type === "DirectMessage"
? x.channel?.active
: x.channel?.channel_type === "Group") &&
x.unread
) {
homeUnread = "unread";
alertCount += x.alertCount ?? 0; alertCount += x.alertCount ?? 0;
} }
} }
if (alertCount > 0) homeUnread = 'mention'; if (
[...client.users.values()].find(
(x) => x.relationship === RelationshipStatus.Incoming,
)
) {
alertCount++;
}
if (alertCount > 0) homeUnread = "mention";
const homeActive =
typeof server === "undefined" && !path.startsWith("/invite");
return ( return (
<ServersBase> <ServersBase>
<ServerList> <ServerList>
<Link to={`/`}> <ConditionalLink
<ServerEntry invert active={homeActive}
active={typeof server === 'undefined' && !path.startsWith('/invite')}> to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<Icon size={36} unread={homeUnread}> <ServerEntry home active={homeActive}>
<img src={logoSVG} /> <Swoosh />
</Icon> <div
onContextMenu={attachContextMenu("Status")}
onClick={() =>
homeActive && history.push("/settings")
}>
<UserHover user={client.user}>
<Icon size={42} unread={homeUnread}>
<UserIcon
target={client.user}
size={32}
status
hover
/>
</Icon>
</UserHover>
</div>
</ServerEntry> </ServerEntry>
</Link> </ConditionalLink>
<LineDivider /> <LineDivider />
{ {servers.map((entry) => {
servers.map(entry => const active = entry.server._id === server?._id;
<Link to={`/server/${entry!._id}`}> const id = lastOpened[entry.server._id];
return (
<ConditionalLink
key={entry.server._id}
active={active}
to={`/server/${entry.server._id}${
id ? `/channel/${id}` : ""
}`}>
<ServerEntry <ServerEntry
active={entry!._id === server?._id} active={active}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}> onContextMenu={attachContextMenu("Menu", {
<Icon size={36} unread={entry.unread}> server: entry.server._id,
<ServerIcon size={32} target={entry} /> })}>
</Icon> <Swoosh />
<Tooltip
content={entry.server.name}
placement="right">
<Icon size={42} unread={entry.unread}>
<ServerIcon
size={32}
target={entry.server}
/>
</Icon>
</Tooltip>
</ServerEntry> </ServerEntry>
</Link> </ConditionalLink>
) );
} })}
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Plus size={36} />
</IconButton>
{/*<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Compass size={36} />
</IconButton>*/}
<PaintCounter small /> <PaintCounter small />
</ServerList> </ServerList>
</ServersBase> </ServersBase>
// ! FIXME: add overlay back );
/*<div className={styles.servers}> });
<div className={styles.list}>
<Link to={`/`}>
<div className={styles.entry}
data-active={typeof server === 'undefined' && !path.startsWith('/invite')}>
<Icon size={36} unread={homeUnread} alertCount={alertCount}>
<div className={styles.logo} />
</Icon>
</div>
</Link>
<LineDivider className={styles.divider} />
{
servers.map(entry =>
<Link to={`/server/${entry!._id}`}>
<div className={styles.entry}
data-active={entry!._id === server?._id}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Icon size={36} unread={entry.unread}>
<ServerIcon id={entry!._id} size={32} />
</Icon>
</div>
</Link>
)
}
</div>
<div className={styles.overlay}>
<div className={styles.actions}>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
<PlusCircle size={36} />
</IconButton>
</div>
</div>
</div> */
)
}
export default connectState( export default connectState(ServerListSidebar, (state) => {
ServerListSidebar, return {
state => { unreads: state.unreads,
return { lastOpened: state.lastOpened,
unreads: state.unreads };
}; });
}
);
src/components/navigation/left/ServerSidebar.tsx
View file @ 1ac5de17
import { Link } from "react-router-dom"; import { observer } from "mobx-react-lite";
import { Settings } from "@styled-icons/feather";
import { Redirect, useParams } from "react-router"; import { Redirect, useParams } from "react-router";
import { ChannelButton } from "../items/ButtonItem"; import styled, { css } from "styled-components";
import { Channels } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions"; import { attachContextMenu } from "preact-context-menu";
import { useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { WithDispatcher } from "../../../redux/reducers";
import { useChannels, useForceUpdate, useServer, useServerPermission } from "../../../context/revoltjs/hooks"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import ServerHeader from "../../common/ServerHeader";
import Category from "../../ui/Category";
import { mapChannelWithUnread, useUnreads } from "./common"; import { mapChannelWithUnread, useUnreads } from "./common";
import Header from '../../ui/Header';
import ConnectionStatus from '../items/ConnectionStatus'; import { ChannelButton } from "../items/ButtonItem";
import { connectState } from "../../../redux/connector"; import ConnectionStatus from "../items/ConnectionStatus";
import PaintCounter from "../../../lib/PaintCounter";
import styled from "styled-components";
import { attachContextMenu } from 'preact-context-menu';
interface Props { interface Props {
unreads: Unreads; unreads: Unreads;
...@@ -26,6 +34,13 @@ const ServerBase = styled.div` ...@@ -26,6 +34,13 @@ const ServerBase = styled.div`
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-start-start-radius: 8px;
overflow: hidden;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`; `;
const ServerList = styled.div` const ServerList = styled.div`
...@@ -38,60 +53,93 @@ const ServerList = styled.div` ...@@ -38,60 +53,93 @@ const ServerList = styled.div`
} }
`; `;
function ServerSidebar(props: Props & WithDispatcher) { const ServerSidebar = observer((props: Props) => {
const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>(); const client = useClient();
const ctx = useForceUpdate(); const { server: server_id, channel: channel_id } =
useParams<{ server: string; channel?: string }>();
const server = useServer(server_id, ctx); const server = client.servers.get(server_id);
if (!server) return <Redirect to="/" />; if (!server) return <Redirect to="/" />;
const permissions = useServerPermission(server._id, ctx); const channel = channel_id ? client.channels.get(channel_id) : undefined;
const channels = (useChannels(server.channels, ctx) if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
.filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel>[]) if (channel) useUnreads({ ...props, channel });
.map(x => mapChannelWithUnread(x, props.unreads));
useEffect(() => {
const channel = channels.find(x => x?._id === channel_id); if (!channel_id) return;
if (channel) useUnreads({ ...props, channel }, ctx);
dispatch({
type: "LAST_OPENED_SET",
parent: server_id!,
child: channel_id!,
});
}, [channel_id, server_id]);
const uncategorised = new Set(server.channel_ids);
const elements = [];
function addChannel(id: string) {
const entry = client.channels.get(id);
if (!entry) return;
const active = channel?._id === entry._id;
return (
<ConditionalLink
key={entry._id}
active={active}
to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton
channel={entry}
active={active}
// ! FIXME: pull it out directly
alert={mapChannelWithUnread(entry, props.unreads).unread}
compact
/>
</ConditionalLink>
);
}
if (server.categories) {
for (const category of server.categories) {
const channels = [];
for (const id of category.channels) {
uncategorised.delete(id);
channels.push(addChannel(id));
}
elements.push(
<CollapsibleSection
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
{channels}
</CollapsibleSection>,
);
}
}
for (const id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}
return ( return (
<ServerBase> <ServerBase>
<Header placement="secondary" background style={{ background: `url('${ctx.client.servers.getBannerURL(server._id, { width: 480 }, true)}')` }}> <ServerHeader server={server} />
<div>
{ server.name }
</div>
{ (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
{/*<IconButton to={`/server/${server._id}/settings`}>*/}
<Settings size={24} />
{/*</IconButton>*/}
</div> }
</Header>
<ConnectionStatus /> <ConnectionStatus />
<ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}> <ServerList
{channels.map(entry => { onContextMenu={attachContextMenu("Menu", {
return ( server_list: server._id,
<Link to={`/server/${server._id}/channel/${entry._id}`}> })}>
<ChannelButton {elements}
key={entry._id}
channel={entry}
active={channel?._id === entry._id}
alert={entry.unread}
compact
/>
</Link>
);
})}
</ServerList> </ServerList>
<PaintCounter small /> <PaintCounter small />
</ServerBase> </ServerBase>
) );
}; });
export default connectState( export default connectState(ServerSidebar, (state) => {
ServerSidebar, return {
state => { unreads: state.unreads,
return { };
unreads: state.unreads });
};
},
true
);
src/components/navigation/left/common.ts
View file @ 1ac5de17
import { Channel } from "revolt.js"; import { reaction } from "mobx";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useLayoutEffect } from "preact/hooks"; import { useLayoutEffect } from "preact/hooks";
import { WithDispatcher } from "../../../redux/reducers";
import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = WithDispatcher & { type UnreadProps = {
channel: Channel; channel: Channel;
unreads: Unreads; unreads: Unreads;
} };
export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
const ctx = useForceUpdate(context);
export function useUnreads({ channel, unreads }: UnreadProps) {
useLayoutEffect(() => { useLayoutEffect(() => {
function checkUnread(target?: Channel) { function checkUnread(target: Channel) {
if (!target) return; if (!target) return;
if (target._id !== channel._id) return; if (target._id !== channel._id) return;
if (target?.channel_type === "SavedMessages") return; if (
target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel"
)
return;
const unread = unreads[channel._id]?.last_id; const unread = unreads[channel._id]?.last_id;
if (target.last_message) { if (target.last_message) {
const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id; const message =
typeof target.last_message === "string"
? target.last_message
: target.last_message._id;
if (!unread || (unread && message.localeCompare(unread) > 0)) { if (!unread || (unread && message.localeCompare(unread) > 0)) {
dispatcher({ dispatch({
type: "UNREADS_MARK_READ", type: "UNREADS_MARK_READ",
channel: channel._id, channel: channel._id,
message, message,
request: true
}); });
channel.ack(message);
} }
} }
} }
checkUnread(channel); checkUnread(channel);
return reaction(
ctx.client.channels.addListener("mutation", checkUnread); () => channel.last_message,
return () => ctx.client.channels.removeListener("mutation", checkUnread); () => checkUnread(channel),
);
}, [channel, unreads]); }, [channel, unreads]);
} }
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) { export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
let last_message_id; let last_message_id;
if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') { if (
last_message_id = channel.last_message?._id; channel.channel_type === "DirectMessage" ||
} else if (channel.channel_type === 'TextChannel') { channel.channel_type === "Group"
last_message_id = channel.last_message; ) {
last_message_id = (channel.last_message as { _id: string })?._id;
} else if (channel.channel_type === "TextChannel") {
last_message_id = channel.last_message as string;
} else { } else {
return { ...channel, unread: undefined, alertCount: undefined, timestamp: channel._id }; return {
channel,
unread: undefined,
alertCount: undefined,
timestamp: channel._id,
};
} }
let unread: 'mention' | 'unread' | undefined; let unread: "mention" | "unread" | undefined;
let alertCount: undefined | number; let alertCount: undefined | number;
if (last_message_id && unreads) { if (last_message_id && unreads) {
const u = unreads[channel._id]; const u = unreads[channel._id];
if (u) { if (u) {
if (u.mentions && u.mentions.length > 0) { if (u.mentions && u.mentions.length > 0) {
alertCount = u.mentions.length; alertCount = u.mentions.length;
unread = 'mention'; unread = "mention";
} else if (u.last_id && last_message_id.localeCompare(u.last_id) > 0) { } else if (
unread = 'unread'; u.last_id &&
(last_message_id as string).localeCompare(u.last_id) > 0
) {
unread = "unread";
} }
} else { } else {
unread = 'unread'; unread = "unread";
} }
} }
return { return {
...channel, channel,
timestamp: last_message_id ?? channel._id, timestamp: last_message_id ?? channel._id,
unread, unread,
alertCount alertCount,
}; };
} }
src/components/navigation/right/ChannelDebugInfo.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { useRenderState } from "../../../lib/renderer/Singleton"; import { useRenderState } from "../../../lib/renderer/Singleton";
interface Props { interface Props {
...@@ -6,7 +7,7 @@ interface Props { ...@@ -6,7 +7,7 @@ interface Props {
export function ChannelDebugInfo({ id }: Props) { export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null; if (process.env.NODE_ENV !== "development") return null;
let view = useRenderState(id); const view = useRenderState(id);
if (!view) return null; if (!view) return null;
return ( return (
...@@ -16,21 +17,24 @@ export function ChannelDebugInfo({ id }: Props) { ...@@ -16,21 +17,24 @@ export function ChannelDebugInfo({ id }: Props) {
display: "block", display: "block",
fontSize: "12px", fontSize: "12px",
textTransform: "uppercase", textTransform: "uppercase",
fontWeight: "600" fontWeight: "600",
}} }}>
>
Channel Info Channel Info
</span> </span>
<p style={{ fontSize: "10px", userSelect: "text" }}> <p style={{ fontSize: "10px", userSelect: "text" }}>
State: <b>{ view.type }</b> <br /> State: <b>{view.type}</b> <br />
{ view.type === 'RENDER' && view.messages.length > 0 && {view.type === "RENDER" && view.messages.length > 0 && (
<> <>
Start: <b>{view.messages[0]._id}</b> <br /> Start: <b>{view.messages[0]._id}</b> <br />
End: <b>{view.messages[view.messages.length - 1]._id}</b> <br /> End:{" "}
<b>
{view.messages[view.messages.length - 1]._id}
</b>{" "}
<br />
At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br /> At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b> At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
</> </>
} )}
</p> </p>
</span> </span>
); );
......
src/components/navigation/right/MemberSidebar.tsx
View file @ 1ac5de17
/* 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 { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { User } from "revolt.js"; import { getState } from "../../../redux";
import Category from "../../ui/Category";
import { useParams } from "react-router"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { UserButton } from "../items/ButtonItem"; import {
import { ChannelDebugInfo } from "./ChannelDebugInfo"; ClientStatus,
import { Channels, Servers, Users } from "revolt.js/dist/api/objects"; StatusContext,
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; useClient,
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"; } from "../../../context/revoltjs/RevoltClient";
import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
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 placeholderSVG from "../items/placeholder.svg";
import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
interface Props { import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
ctx: HookContext import { UserButton } from "../items/ButtonItem";
} import { ChannelDebugInfo } from "./ChannelDebugInfo";
export default function MemberSidebar(props: { channel?: Channels.Channel }) { export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
const ctx = useForceUpdate(); const { channel: channel_id } = useParams<{ channel: string }>();
const { channel: cid } = useParams<{ channel: string }>(); const client = useClient();
const channel = props.channel ?? useChannel(cid, ctx); const channel = obj ?? client.channels.get(channel_id);
switch (channel?.channel_type) { switch (channel?.channel_type) {
case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />; case "Group":
case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />; return <GroupMemberSidebar channel={channel} />;
default: return null; case "TextChannel":
return <ServerMemberSidebar channel={channel} />;
default:
return null;
} }
} }
export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) { export const GroupMemberSidebar = observer(
const users = useUsers(undefined, ctx); ({ channel }: { channel: Channel }) => {
let members = channel.recipients const { openScreen } = useIntermediate();
.map(x => users.find(y => y?._id === x))
.filter(x => typeof x !== "undefined") as User[];
/*const voice = useContext(VoiceContext); const members = channel.recipients?.filter(
(x) => typeof x !== "undefined",
);
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id; const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = []; let voiceParticipants: User[] = [];
...@@ -51,28 +66,34 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels ...@@ -51,28 +66,34 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username)); voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/ }*/
members.sort((a, b) => { members?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // ! FIXME: should probably rewrite all this code
let l = ((a.online && const l =
a.status?.presence !== Users.Presence.Invisible) ?? +(
false) as any | 0; (a!.online && a!.status?.presence !== Presence.Invisible) ??
let r = ((b.online && false
b.status?.presence !== Users.Presence.Invisible) ?? ) | 0;
false) as any | 0; const r =
+(
(b!.online && b!.status?.presence !== Presence.Invisible) ??
false
) | 0;
let n = r - l; const n = r - l;
if (n !== 0) { if (n !== 0) {
return n; return n;
} }
return a.username.localeCompare(b.username); return a!.username.localeCompare(b!.username);
}); });
return ( return (
<GenericSidebarBase> <GenericSidebarBase>
<GenericSidebarList> <GenericSidebarList>
<ChannelDebugInfo id={channel._id} /> <ChannelDebugInfo id={channel._id} />
{/*voiceActive && voiceParticipants.length !== 0 && ( <Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment> <Fragment>
<Category <Category
type="members" type="members"
...@@ -97,110 +118,203 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels ...@@ -97,110 +118,203 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
)} )}
</Fragment> </Fragment>
)*/} )*/}
{!(members.length === 0 /*&& voiceActive*/) && ( <CollapsibleSection
<Category sticky
variant="uniform" id="members"
text={ defaultValue
<span> summary={
<Text id="app.main.categories.members" /> —{" "} <Category
{channel.recipients.length} variant="uniform"
</span> text={
} <span>
/> <Text id="app.main.categories.members" />{" "}
)} — {channel.recipients?.length ?? 0}
{members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />} </span>
{members.map( }
user => />
user && ( }>
// <LinkProfile user_id={user._id}> {members?.length === 0 && (
<UserButton <img src={placeholderSVG} loading="eager" />
key={user._id} )}
user={user} {members?.map(
context={channel} (user) =>
/> user && (
// </LinkProfile> <UserButton
) key={user._id}
)} user={user}
</GenericSidebarList> context={channel!}
</GenericSidebarBase> 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 }) { useEffect(() => {
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined); if (status === ClientStatus.ONLINE) {
const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[]; channel.server!.fetchMembers();
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)));
} }
} }, [status, channel.server]);
client.addListener('packet', onPacket); const users = [...client.members.keys()]
return () => client.removeListener('packet', onPacket); .map((x) => JSON.parse(x))
}, [ members ]); .filter((x) => x.server === channel.server_id)
.map((y) => client.users.get(y.user)!)
// copy paste from above .filter((z) => typeof z !== "undefined");
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // copy paste from above
let l = ((a.online && users.sort((a, b) => {
a.status?.presence !== Users.Presence.Invisible) ?? // ! FIXME: should probably rewrite all this code
false) as any | 0; const l =
let r = ((b.online && +(
b.status?.presence !== Users.Presence.Invisible) ?? (a.online && a.status?.presence !== Presence.Invisible) ??
false) as any | 0; false
) | 0;
let n = r - l; const r =
if (n !== 0) { +(
return n; (b.online && b.status?.presence !== Presence.Invisible) ??
} false
) | 0;
return a.username.localeCompare(b.username);
}); 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 ( return (
<GenericSidebarBase> <CollapsibleSection
<GenericSidebarList> sticky
<ChannelDebugInfo id={channel._id} /> id="search"
<Category defaultValue={false}
variant="uniform" summary={
text={ <>
<span> <Text id="app.main.channel.search.title" /> (BETA)
<Text id="app.main.categories.members" /> —{" "} </>
{users.length} }>
</span> <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} />} href += `/channel/${message.channel_id}/${message._id}`;
{users.map(
user => return (
user && ( <Link to={href} key={message._id}>
// <LinkProfile user_id={user._id}> <div
<UserButton style={{
key={user._id} margin: "2px",
user={user} padding: "6px",
context={channel} background: "var(--primary-background)",
/> }}>
// </LinkProfile> <b>@{message.author?.username}</b>
) <br />
)} {message.content}
</GenericSidebarList> </div>
</GenericSidebarBase> </Link>
);
})}
</div>
</CollapsibleSection>
); );
} }
src/components/ui/Button.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
readonly compact?: boolean;
readonly accent?: boolean;
readonly contrast?: boolean; readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean; readonly error?: boolean;
readonly gold?: boolean;
readonly iconbutton?: boolean;
} }
export type ButtonProps = Props &
Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
export default styled.button<Props>` export default styled.button<Props>`
z-index: 1; z-index: 1;
padding: 8px; display: flex;
font-size: 16px; height: 38px;
text-align: center; 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 opacity;
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
...@@ -17,7 +31,7 @@ export default styled.button<Props>` ...@@ -17,7 +31,7 @@ export default styled.button<Props>`
background: var(--primary-background); background: var(--primary-background);
color: var(--foreground); color: var(--foreground);
border-radius: 6px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
border: none; border: none;
...@@ -26,6 +40,7 @@ export default styled.button<Props>` ...@@ -26,6 +40,7 @@ export default styled.button<Props>`
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--primary-background); background: var(--primary-background);
} }
...@@ -33,6 +48,47 @@ export default styled.button<Props>` ...@@ -33,6 +48,47 @@ export default styled.button<Props>`
background: var(--secondary-background); 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) =>
props.contrast && props.contrast &&
css` css`
...@@ -44,6 +100,7 @@ export default styled.button<Props>` ...@@ -44,6 +100,7 @@ export default styled.button<Props>`
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--secondary-header); background: var(--secondary-header);
} }
...@@ -56,14 +113,35 @@ export default styled.button<Props>` ...@@ -56,14 +113,35 @@ export default styled.button<Props>`
props.error && props.error &&
css` css`
color: white; color: white;
font-weight: 600;
background: var(--error); background: var(--error);
&:hover { &:hover {
filter: brightness(1.2); filter: brightness(1.2);
background: var(--error);
} }
&:disabled { &:disabled {
cursor: not-allowed;
background: var(--error); 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;
}
`}
`; `;
src/components/ui/Category.tsx
View file @ 1ac5de17
import { Plus } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Plus } from "@styled-icons/feather";
const CategoryBase = styled.div<Pick<Props, 'variant'>>` const CategoryBase = styled.div<Pick<Props, "variant">>`
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
margin-top: 4px; margin-top: 4px;
padding: 6px 10px; padding: 6px 0;
margin-bottom: 4px; margin-bottom: 4px;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
svg { svg {
stroke: var(--foreground);
cursor: pointer; cursor: pointer;
} }
${ props => props.variant === 'uniform' && css` &:first-child {
padding-top: 6px; margin-top: 0;
` } padding-top: 0;
}
${(props) =>
props.variant === "uniform" &&
css`
padding-top: 6px;
`}
`; `;
interface Props { type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "action"
> & {
text: Children; text: Children;
action?: () => void; action?: () => void;
variant?: 'default' | 'uniform'; variant?: "default" | "uniform";
} };
export default function Category(props: Props) { export default function Category(props: Props) {
const { text, action, ...otherProps } = props;
return ( return (
<CategoryBase> <CategoryBase {...otherProps}>
{props.text} {text}
{props.action && ( {action && <Plus size={16} onClick={action} />}
<Plus size={16} onClick={props.action} />
)}
</CategoryBase> </CategoryBase>
); );
}; }
src/components/ui/Checkbox.tsx
View file @ 1ac5de17
import { Check } from "@styled-icons/feather"; import { Check } from "@styled-icons/boxicons-regular";
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
const CheckboxBase = styled.label` const CheckboxBase = styled.label`
gap: 4px; gap: 4px;
z-index: 1; z-index: 1;
padding: 4px;
display: flex; display: flex;
border-radius: 4px; margin-top: 20px;
align-items: center; align-items: center;
border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
...@@ -16,33 +17,36 @@ const CheckboxBase = styled.label` ...@@ -16,33 +17,36 @@ const CheckboxBase = styled.label`
transition: 0.2s ease all; transition: 0.2s ease all;
p {
margin: 0;
}
input { input {
display: none; display: none;
} }
&:hover { &:hover {
background: var(--secondary-background);
.check { .check {
background: var(--background); background: var(--background);
} }
} }
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
&:hover {
background: unset;
}
}
`; `;
const CheckboxContent = styled.span` const CheckboxContent = styled.span`
flex-grow: 1;
display: flex; display: flex;
flex-grow: 1;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
flex-direction: column; flex-direction: column;
`; `;
const CheckboxDescription = styled.span` const CheckboxDescription = styled.span`
font-size: 0.8em; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
color: var(--secondary-foreground); color: var(--secondary-foreground);
`; `;
...@@ -52,14 +56,14 @@ const Checkmark = styled.div<{ checked: boolean }>` ...@@ -52,14 +56,14 @@ const Checkmark = styled.div<{ checked: boolean }>`
width: 24px; width: 24px;
height: 24px; height: 24px;
display: grid; display: grid;
border-radius: 4px; flex-shrink: 0;
place-items: center; place-items: center;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
svg { svg {
color: var(--secondary-background); color: var(--secondary-background);
stroke-width: 2;
} }
${(props) => ${(props) =>
......
src/components/ui/ColourSwatches.tsx
View file @ 1ac5de17
import { useRef } from "preact/hooks"; import { Check } from "@styled-icons/boxicons-regular";
import { Check } from "@styled-icons/feather"; import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Pencil } from "@styled-icons/bootstrap";
import { RefObject } from "preact";
import { useRef } from "preact/hooks";
interface Props { interface Props {
value: string; value: string;
...@@ -32,21 +34,40 @@ const presets = [ ...@@ -32,21 +34,40 @@ const presets = [
]; ];
const SwatchesBase = styled.div` const SwatchesBase = styled.div`
gap: 8px; /*gap: 8px;*/
display: flex; display: flex;
input { input {
width: 0;
height: 0;
top: 72px;
opacity: 0; opacity: 0;
margin-top: 44px; padding: 0;
position: absolute; border: 0;
position: relative;
pointer-events: none; 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 }>` const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: var(--border-radius);
background-color: ${(props) => props.colour}; background-color: ${(props) => props.colour};
display: grid; display: grid;
...@@ -68,7 +89,7 @@ const Swatch = styled.div<{ type: "small" | "large"; colour: string }>` ...@@ -68,7 +89,7 @@ const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
height: 30px; height: 30px;
svg { svg {
stroke-width: 2; /*stroke-width: 2;*/
} }
` `
: css` : css`
...@@ -81,32 +102,39 @@ const Rows = styled.div` ...@@ -81,32 +102,39 @@ const Rows = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
padding-bottom: 4px;
> div { > div {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-inline-start: 8px;
} }
`; `;
export default function ColourSwatches({ value, onChange }: Props) { export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>(); const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
return ( return (
<SwatchesBase> <SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current.click()}
>
<Pencil size={32} />
</Swatch>
<input <input
type="color" type="color"
value={value} value={value}
ref={ref} ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)} 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> <Rows>
{presets.map((row, i) => ( {presets.map((row, i) => (
<div key={i}> <div key={i}>
...@@ -115,11 +143,8 @@ export default function ColourSwatches({ value, onChange }: Props) { ...@@ -115,11 +143,8 @@ export default function ColourSwatches({ value, onChange }: Props) {
colour={swatch} colour={swatch}
type="small" type="small"
key={i} key={i}
onClick={() => onChange(swatch)} onClick={() => onChange(swatch)}>
> {swatch === value && <Check size={22} />}
{swatch === value && (
<Check size={18} strokeWidth={2} />
)}
</Swatch> </Swatch>
))} ))}
</div> </div>
......
src/components/ui/ComboBox.tsx
View file @ 1ac5de17
import styled from "styled-components"; import styled from "styled-components";
export default styled.select` export default styled.select`
padding: 8px; width: 100%;
border-radius: 2px; padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: box-shadow 0.2s ease-in-out;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
&:focus { &:focus {
outline-color: var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);
} }
`; `;
src/components/ui/DateDivider.tsx
View file @ 1ac5de17
import dayjs from "dayjs";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { dayjs } from "../../context/Locale";
const Base = styled.div<{ unread?: boolean }>` const Base = styled.div<{ unread?: boolean }>`
height: 0; height: 0;
display: flex; display: flex;
margin: 14px 10px;
user-select: none; user-select: none;
align-items: center; align-items: center;
margin: 17px 12px 5px;
border-top: thin solid var(--tertiary-foreground); border-top: thin solid var(--tertiary-foreground);
time { time {
margin-top: -2px; margin-top: -2px;
font-size: .6875rem; font-size: 0.6875rem;
line-height: .6875rem; line-height: 0.6875rem;
padding: 2px 5px 2px 0; padding: 2px 0 2px 0;
padding-inline-end: 5px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
background: var(--primary-background); background: var(--primary-background);
} }
${ props => props.unread && css` ${(props) =>
border-top: thin solid var(--accent); props.unread &&
` } css`
border-top: thin solid var(--accent);
`}
`; `;
const Unread = styled.div` const Unread = styled.div`
...@@ -39,10 +43,8 @@ interface Props { ...@@ -39,10 +43,8 @@ interface Props {
export default function DateDivider(props: Props) { export default function DateDivider(props: Props) {
return ( return (
<Base unread={props.unread}> <Base unread={props.unread}>
{ props.unread && <Unread>NEW</Unread> } {props.unread && <Unread>NEW</Unread>}
<time> <time>{dayjs(props.date).format("LL")}</time>
{ dayjs(props.date).format("LL") }
</time>
</Base> </Base>
); );
} }
src/components/ui/Details.tsx 0 → 100644
View file @ 1ac5de17
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);
}
}
`;
src/components/ui/Header.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
borders?: boolean;
background?: boolean; background?: boolean;
placement: 'primary' | 'secondary' placement: "primary" | "secondary";
} }
export default styled.div<Props>` export default styled.div<Props>`
height: 56px; gap: 6px;
font-weight: 600; height: 48px;
user-select: none;
gap: 10px;
flex: 0 auto; flex: 0 auto;
display: flex; display: flex;
padding: 20px;
flex-shrink: 0; flex-shrink: 0;
padding: 0 16px;
font-weight: 600;
user-select: none;
align-items: center; align-items: center;
background-color: var(--primary-header);
background-size: cover !important; background-size: cover !important;
background-position: center !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;
text-shadow: 0px 0px 1px black;
`}
${ props => props.background && css` ${(props) =>
height: 120px; props.placement === "secondary" &&
align-items: flex-end; css`
` } background-color: var(--secondary-header);
padding: 14px;
`}
${ props => props.placement === 'secondary' && css` ${(props) =>
background-color: var(--secondary-header); props.borders &&
padding: 14px; css`
` } border-start-start-radius: 8px;
`}
`; `;
src/components/ui/IconButton.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
type?: 'default' | 'circle' rotate?: string;
type?: "default" | "circle";
} }
const normal = `var(--secondary-foreground)`; const normal = `var(--secondary-foreground)`;
...@@ -12,32 +13,47 @@ export default styled.div<Props>` ...@@ -12,32 +13,47 @@ export default styled.div<Props>`
display: grid; display: grid;
cursor: pointer; cursor: pointer;
place-items: center; place-items: center;
transition: 0.1s ease background-color;
fill: ${normal}; fill: ${normal};
color: ${normal}; color: ${normal};
stroke: ${normal}; /*stroke: ${normal};*/
a { a {
color: ${normal}; color: ${normal};
} }
svg {
transition: 0.2s ease transform;
}
&:hover { &:hover {
fill: ${hover}; fill: ${hover};
color: ${hover}; color: ${hover};
stroke: ${hover}; /*stroke: ${hover};*/
a { a {
color: ${hover}; color: ${hover};
} }
} }
${ props => props.type === 'circle' && css` ${(props) =>
padding: 4px; props.type === "circle" &&
border-radius: 50%; css`
background-color: var(--secondary-header); padding: 4px;
border-radius: 50%;
&:hover { background-color: var(--secondary-header);
background-color: var(--primary-header);
} &:hover {
` } background-color: var(--primary-header);
}
`}
${(props) =>
props.rotate &&
css`
svg {
transform: rotateZ(${props.rotate});
}
`}
`; `;
src/components/ui/InputBox.tsx
View file @ 1ac5de17
...@@ -6,23 +6,26 @@ interface Props { ...@@ -6,23 +6,26 @@ interface Props {
export default styled.input<Props>` export default styled.input<Props>`
z-index: 1; z-index: 1;
font-size: 1rem;
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: var(--border-radius);
font-family: inherit;
color: var(--foreground); color: var(--foreground);
background: var(--primary-background); background: var(--primary-background);
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }
&:focus { &:focus {
outline: 2px solid var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);
} }
${(props) => ${(props) =>
......
src/components/ui/Masks.tsx 0 → 100644
View file @ 1ac5de17
// 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>
);
}
src/components/ui/Modal.tsx
View file @ 1ac5de17
import Button from "./Button"; /* eslint-disable react-hooks/rules-of-hooks */
import classNames from "classnames";
import { Children } from "../../types/Preact";
import { createPortal, useEffect } from "preact/compat";
import styled, { css, keyframes } from "styled-components"; 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` const open = keyframes`
0% {opacity: 0;} 0% {opacity: 0;}
70% {opacity: 0;} 70% {opacity: 0;}
100% {opacity: 1;} 100% {opacity: 1;}
`; `;
const close = keyframes`
0% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
`;
const zoomIn = keyframes` const zoomIn = keyframes`
0% {transform: scale(0.5);} 0% {transform: scale(0.5);}
98% {transform: scale(1.01);} 98% {transform: scale(1.01);}
100% {transform: scale(1);} 100% {transform: scale(1);}
`; `;
const zoomOut = keyframes`
0% {transform: scale(1);}
100% {transform: scale(0.5);}
`;
const ModalBase = styled.div` const ModalBase = styled.div`
top: 0; top: 0;
left: 0; left: 0;
...@@ -35,42 +50,65 @@ const ModalBase = styled.div` ...@@ -35,42 +50,65 @@ const ModalBase = styled.div`
color: var(--foreground); color: var(--foreground);
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
&.closing {
animation-name: ${close};
}
&.closing > div {
animation-name: ${zoomOut};
}
`; `;
const ModalContainer = styled.div` const ModalContainer = styled.div`
overflow: hidden; overflow: hidden;
border-radius: 8px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
border-radius: var(--border-radius);
animation-name: ${zoomIn}; animation-name: ${zoomIn};
animation-duration: 0.25s; 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 }>` const ModalContent = styled.div<
border-radius: 8px; { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>`
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: var(--border-radius);
h3 { h3 {
margin-top: 0; margin-top: 0;
} }
${ props => !props.noBackground && css` form {
background: var(--secondary-header); display: flex;
` } flex-direction: column;
}
${ props => props.padding && css`
padding: 1.5em;
` }
${ props => props.attachment && css`
border-radius: 8px 8px 0 0;
` }
${ props => props.border && css` ${(props) =>
border-radius: 10px; !props.noBackground &&
border: 2px solid var(--secondary-background); 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` const ModalActions = styled.div`
...@@ -83,13 +121,10 @@ const ModalActions = styled.div` ...@@ -83,13 +121,10 @@ const ModalActions = styled.div`
background: var(--secondary-background); background: var(--secondary-background);
`; `;
export interface Action { export type Action = Omit<ButtonProps, "onClick"> & {
text: Children;
onClick: () => void;
confirmation?: boolean; confirmation?: boolean;
contrast?: boolean; onClick: () => void;
error?: boolean; };
}
interface Props { interface Props {
children?: Children; children?: Children;
...@@ -98,23 +133,26 @@ interface Props { ...@@ -98,23 +133,26 @@ interface Props {
disallowClosing?: boolean; disallowClosing?: boolean;
noBackground?: boolean; noBackground?: boolean;
dontModal?: boolean; dontModal?: boolean;
padding?: boolean;
onClose: () => void; onClose?: () => void;
actions?: Action[]; actions?: Action[];
disabled?: boolean; disabled?: boolean;
border?: boolean; border?: boolean;
visible: boolean; visible: boolean;
} }
export let isModalClosing = false;
export default function Modal(props: Props) { export default function Modal(props: Props) {
if (!props.visible) return null; if (!props.visible) return null;
let content = ( const content = (
<ModalContent <ModalContent
attachment={!!props.actions} attachment={!!props.actions}
noBackground={props.noBackground} noBackground={props.noBackground}
border={props.border} border={props.border}
padding={!props.dontModal}> padding={props.padding ?? !props.dontModal}>
{props.title && <h3>{props.title}</h3>} {props.title && <h3>{props.title}</h3>}
{props.children} {props.children}
</ModalContent> </ModalContent>
...@@ -124,11 +162,36 @@ export default function Modal(props: Props) { ...@@ -124,11 +162,36 @@ export default function Modal(props: Props) {
return content; return content;
} }
let confirmationAction = props.actions?.find(action => action.confirmation); 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") {
onClose();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [props.disallowClosing, onClose]);
const confirmationAction = props.actions?.find(
(action) => action.confirmation,
);
useEffect(() => { useEffect(() => {
if (!confirmationAction) return; 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 // ! can focus the button although that
// ! doesn't seem to work... // ! doesn't seem to work...
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
...@@ -139,27 +202,27 @@ export default function Modal(props: Props) { ...@@ -139,27 +202,27 @@ export default function Modal(props: Props) {
document.body.addEventListener("keydown", keyDown); document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown); return () => document.body.removeEventListener("keydown", keyDown);
}, [ confirmationAction ]); }, [confirmationAction]);
return createPortal( return createPortal(
<ModalBase onClick={(!props.disallowClosing && props.onClose) || undefined}> <ModalBase
<ModalContainer onClick={e => (e.cancelBubble = true)}> className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content} {content}
{props.actions && ( {props.actions && (
<ModalActions> <ModalActions>
{props.actions.map(x => ( {props.actions.map((x, index) => (
<Button <Button
contrast={x.contrast ?? true} key={index}
error={x.error ?? false} {...x}
onClick={x.onClick} disabled={props.disabled}
disabled={props.disabled}> />
{x.text}
</Button>
))} ))}
</ModalActions> </ModalActions>
)} )}
</ModalContainer> </ModalContainer>
</ModalBase>, </ModalBase>,
document.body document.body,
); );
} }
src/components/ui/Overline.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Text } from 'preact-i18n';
interface Props { type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string; error?: string;
block?: boolean; block?: boolean;
spaced?: boolean;
noMargin?: boolean;
children?: Children; children?: Children;
type?: "default" | "subtle" | "error"; type?: "default" | "subtle" | "error";
} };
const OverlineBase = styled.div<Omit<Props, "children" | "error">>` const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline; 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-size: 14px;
font-weight: 600; font-weight: 600;
...@@ -46,9 +60,11 @@ export default function Overline(props: Props) { ...@@ -46,9 +60,11 @@ export default function Overline(props: Props) {
<OverlineBase {...props}> <OverlineBase {...props}>
{props.children} {props.children}
{props.children && props.error && <> &middot; </>} {props.children && props.error && <> &middot; </>}
{props.error && <Overline type="error"> {props.error && (
<Text id={`error.${props.error}`}>{props.error}</Text> <Overline type="error">
</Overline>} <Text id={`error.${props.error}`}>{props.error}</Text>
</Overline>
)}
</OverlineBase> </OverlineBase>
); );
} }
src/components/ui/Preloader.tsx
View file @ 1ac5de17
export default function Preloader() { import styled, { keyframes } from "styled-components";
return <span>LOADING</span>;
const skSpinner = keyframes`
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
`;
const prRing = keyframes`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`;
const PreloaderBase = styled.div`
width: 100%;
height: 100%;
display: grid;
place-items: center;
.spinner {
width: 58px;
display: flex;
text-align: center;
margin: 100px auto 0;
justify-content: space-between;
}
.spinner > div {
width: 14px;
height: 14px;
background-color: var(--tertiary-foreground);
border-radius: 100%;
display: inline-block;
animation: ${skSpinner} 1.4s infinite ease-in-out both;
}
.spinner div:nth-child(1) {
animation-delay: -0.32s;
}
.spinner div:nth-child(2) {
animation-delay: -0.16s;
}
.ring {
display: inline-block;
position: relative;
width: 48px;
height: 52px;
}
.ring div {
width: 32px;
margin: 8px;
height: 32px;
display: block;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
border: 2px solid #fff;
animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.ring div:nth-child(1) {
animation-delay: -0.45s;
}
.ring div:nth-child(2) {
animation-delay: -0.3s;
}
.ring div:nth-child(3) {
animation-delay: -0.15s;
}
`;
interface Props {
type: "spinner" | "ring";
}
export default function Preloader({ type }: Props) {
return (
<PreloaderBase>
<div class={type}>
<div />
<div />
<div />
</div>
</PreloaderBase>
);
} }