HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Virtualised sidebar test.

Browse Source
This commit is contained in:
Paul
2021-08-08 16:17:16 +01:00
parent 17f68088d1
commit 8e24d1490c
11 changed files with 241 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/messaging/MessageBase.tsx
View File

@@ -182,6 +182,13 @@ export const MessageInfo = styled.div`
.header {
cursor: pointer;
}
.systemIcon {
height: 1.33em;
width: 1.33em;
margin-right: 0.5em;
color: var(--tertiary-foreground);
}
`;
export const MessageContent = styled.div`

9
src/components/common/messaging/SystemMessage.tsx
View File

@@ -57,13 +57,6 @@ export const SystemMessage = observer(
const SystemMessageIcon =
iconDictionary[data.type as SystemMessageI["type"]] ?? InfoCircle;
const SystemIcon = styled(SystemMessageIcon)`
height: 1.33em;
width: 1.33em;
margin-right: 0.5em;
color: var(--tertiary-foreground);
`;
let children;
switch (data.type) {
case "text":
@@ -136,7 +129,7 @@ export const SystemMessage = observer(
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
<SystemIcon className="system-message-icon" />
<SystemMessageIcon className="systemIcon" />
</MessageInfo>
)}
<SystemContent>{children}</SystemContent>

8
src/components/navigation/SidebarBase.tsx
View File

@@ -10,17 +10,19 @@ export default styled.div`
align-items: stretch;
`;
export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
export const GenericSidebarBase = styled.div<{
mobilePadding?: boolean;
}>`
height: 100%;
width: 240px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
border-end-start-radius: 8px;
background: var(--secondary-background);
${(props) =>
props.padding &&
props.mobilePadding &&
isTouchscreenDevice &&
css`
padding-bottom: 50px;

14
src/components/navigation/items/ButtonItem.tsx
View File

@@ -30,6 +30,7 @@ type CommonProps = Omit<
active?: boolean;
alert?: "unread" | "mention";
alertCount?: number;
margin?: boolean;
};
type UserProps = CommonProps & {
@@ -39,8 +40,16 @@ type UserProps = CommonProps & {
};
export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } =
props;
const {
active,
alert,
margin,
alertCount,
user,
context,
channel,
...divProps
} = props;
const { openScreen } = useIntermediate();
return (
@@ -48,6 +57,7 @@ export const UserButton = observer((props: UserProps) => {
{...divProps}
className={classNames(styles.item, styles.user)}
data-active={active}
data-margin={margin}
data-alert={typeof alert === "string"}
data-online={
typeof channel !== "undefined" ||

27
src/components/navigation/items/Item.module.scss
View File

@@ -9,10 +9,10 @@
gap: 8px;
align-items: center;
flex-direction: row;
cursor: pointer;
font-size: 16px;
transition: .1s ease-in-out background-color;
transition: 0.1s ease-in-out background-color;
color: var(--tertiary-foreground);
@@ -20,14 +20,15 @@
height: 42px;
}
&.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
&.compact {
/* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
height: 32px;
}
&.user {
opacity: 0.4;
cursor: pointer;
transition: .1s ease-in-out opacity;
transition: 0.1s ease-in-out opacity;
&[data-online="true"],
&:hover {
@@ -43,7 +44,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: color .1s ease-in-out;
transition: color 0.1s ease-in-out;
&.content {
gap: 10px;
@@ -73,13 +74,13 @@
flex-grow: 1;
display: flex;
font-weight: 600;
font-size: .90625rem;
font-size: 0.90625rem;
flex-direction: column;
.subText {
margin-top: -1px;
font-weight: 500;
font-size: .6875rem;
font-size: 0.6875rem;
color: var(--tertiary-foreground);
}
}
@@ -90,7 +91,7 @@
svg {
opacity: 0;
display: none;
transition: .1s ease-in-out opacity;
transition: 0.1s ease-in-out opacity;
}
}
}
@@ -115,13 +116,19 @@
}
}
&[data-alert="true"], &[data-active="true"], &:hover {
&[data-alert="true"],
&[data-active="true"],
&:hover {
color: var(--foreground);
.subText {
color: var(--secondary-foreground) !important;
}
}
&[data-margin="true"] {
margin: 0 6px;
}
}
.alert {
@@ -162,4 +169,4 @@
}
}
}
}
}

2
src/components/navigation/left/HomeSidebar.tsx
View File

@@ -65,7 +65,7 @@ const HomeSidebar = observer((props: Props) => {
channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (
<GenericSidebarBase padding>
<GenericSidebarBase mobilePadding>
<ConnectionStatus />
<GenericSidebarList>
<ConditionalLink active={pathname === "/"} to="/">

92
src/components/navigation/right/MemberList.tsx Normal file
View File

@@ -0,0 +1,92 @@
import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as List } from "react-window";
import { User } from "revolt.js/dist/maps/Users";
import { forwardRef } from "preact/compat";
import { UserButton } from "../items/ButtonItem";
export type MemberListEntry = string | User;
interface ItemData {
entries: MemberListEntry[];
}
const PADDING_SIZE = 6;
const Row = ({
data,
style,
index,
}: {
data: ItemData;
index: number;
style: JSX.CSSProperties;
}) => {
const item = data.entries[index];
return (
<div
style={{
...style,
top: `${parseFloat(style.top as string) + PADDING_SIZE}px`,
}}>
{typeof item === "string" ? (
`cat ${item}`
) : (
<UserButton
key={item._id}
user={item}
margin
/* context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
} */
/>
)}
</div>
);
};
// @ts-expect-error Copied directly from example code.
const innerElementType = forwardRef(({ style, ...rest }, ref) => (
<div
// @ts-expect-error Copied directly from example code.
ref={ref}
style={{
...style,
height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`,
}}
{...rest}
/>
));
export default function MemberList({
entries,
}: {
entries: MemberListEntry[];
}) {
return (
<AutoSizer>
{({ width, height }) => (
<List
className="virtualList"
width={width}
height={height}
itemData={{
entries,
}}
itemCount={entries.length}
innerElementType={innerElementType}
itemSize={42}>
{
// eslint-disable-next-line
Row as any
}
</List>
)}
</AutoSizer>
);
}

66
src/components/navigation/right/MemberSidebar.tsx
View File

@@ -4,9 +4,10 @@ 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 { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { getState } from "../../../redux";
@@ -27,6 +28,7 @@ import placeholderSVG from "../items/placeholder.svg";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
import MemberList, { MemberListEntry } from "./MemberList";
export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
const { channel: channel_id } = useParams<{ channel: string }>();
@@ -90,7 +92,6 @@ export const GroupMemberSidebar = observer(
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo channel={channel} />
<Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
@@ -161,6 +162,64 @@ export const GroupMemberSidebar = observer(
export const ServerMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const client = useClient();
const status = useContext(StatusContext);
useEffect(() => {
if (status === ClientStatus.ONLINE) {
channel.server!.fetchMembers();
}
}, [status, channel.server]);
const keys = [...client.members.keys()];
const entries = useMemo(() => {
const categories: { [key: string]: [User, string][] } = {
online: [],
offline: [],
};
keys.forEach((key) => {
const { server, user } = JSON.parse(key);
if (server !== channel.server_id) return;
const u = client.users.get(user);
if (!u) return;
const member = client.members.get(key);
const sort = member?.nickname ?? u.username;
const entry = [u, sort] as [User, string];
if (!u.online || u.status?.presence === Presence.Invisible) {
categories.offline.push(entry);
} else {
categories.online.push(entry);
}
});
Object.keys(categories).forEach((key) =>
categories[key].sort((a, b) => a[1].localeCompare(b[1])),
);
const entries = [];
entries.push(
"online",
...categories.online.map((x) => x[0]),
"offline",
...categories.offline.map((x) => x[0]),
);
return entries;
// eslint-disable-next-line
}, [keys]);
return (
<GenericSidebarBase>
<MemberList entries={entries} />
</GenericSidebarBase>
);
/*
const client = useClient();
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
@@ -202,7 +261,6 @@ export const ServerMemberSidebar = observer(
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo channel={channel} />
<Search channel={channel} />
<div>{users.length === 0 && <Preloader type="ring" />}</div>
{users.length > 0 && (
@@ -236,7 +294,7 @@ export const ServerMemberSidebar = observer(
)}
</GenericSidebarList>
</GenericSidebarBase>
);
);*/
},
);