From cf7dd6f99b4f7f8f6b0d59ba81c45a580bcf28c8 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Tue, 6 Jul 2021 22:52:50 +0100
Subject: [PATCH] Add collapsible sections to member sidebars.
---
.../navigation/right/MemberSidebar.tsx | 119 ++++++++++--------
src/components/ui/Details.tsx | 1 +
src/lib/vortex/VoiceClient.ts | 12 +-
src/pages/channels/Channel.tsx | 20 +--
4 files changed, 82 insertions(+), 70 deletions(-)
diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx
index 47a44ff..10ee673 100644
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -19,6 +19,7 @@ import {
useUsers,
} from "../../../context/revoltjs/hooks";
+import CollapsibleSection from "../../common/CollapsibleSection";
import Category from "../../ui/Category";
import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg";
@@ -121,36 +122,39 @@ export function GroupMemberSidebar({
)}
</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 && (
- <UserButton
- key={user._id}
- user={user}
- context={channel}
- onClick={() =>
- openScreen({
- id: "profile",
- user_id: user._id,
- })
- }
- />
- ),
- )}
+ <CollapsibleSection
+ sticky
+ id="members"
+ defaultValue
+ summary={
+ <Category
+ variant="uniform"
+ text={
+ <span>
+ <Text id="app.main.categories.members" /> —{" "}
+ {channel.recipients.length}
+ </span>
+ }
+ />
+ }>
+ {members.length === 0 && <img src={placeholderSVG} />}
+ {members.map(
+ (user) =>
+ user && (
+ <UserButton
+ key={user._id}
+ user={user}
+ context={channel}
+ onClick={() =>
+ openScreen({
+ id: "profile",
+ user_id: user._id,
+ })
+ }
+ />
+ ),
+ )}
+ </CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
@@ -235,32 +239,39 @@ export function ServerMemberSidebar({
<ChannelDebugInfo id={channel._id} />
<div>{!members && <Preloader type="ring" />}</div>
{members && (
- <Category
- variant="uniform"
- text={
- <span>
- <Text id="app.main.categories.members" /> —{" "}
- {users.length}
- </span>
- }
- />
- )}
- {members && users.length === 0 && <img src={placeholderSVG} />}
- {users.map(
- (user) =>
- user && (
- <UserButton
- key={user._id}
- user={user}
- context={channel}
- onClick={() =>
- openScreen({
- id: "profile",
- user_id: user._id,
- })
+ <CollapsibleSection
+ sticky
+ id="members"
+ defaultValue
+ summary={
+ <Category
+ variant="uniform"
+ text={
+ <span>
+ <Text id="app.main.categories.members" />{" "}
+ — {users.length}
+ </span>
}
/>
- ),
+ }>
+ {users.length === 0 && <img src={placeholderSVG} />}
+ {users.map(
+ (user) =>
+ user && (
+ <UserButton
+ key={user._id}
+ user={user}
+ context={channel}
+ onClick={() =>
+ openScreen({
+ id: "profile",
+ user_id: user._id,
+ })
+ }
+ />
+ ),
+ )}
+ </CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx
index 5696f29..05f2d71 100644
--- a/src/components/ui/Details.tsx
+++ b/src/components/ui/Details.tsx
@@ -30,6 +30,7 @@ export default styled.details<{ sticky?: boolean; large?: boolean }>`
outline: none;
cursor: pointer;
list-style: none;
+ user-select: none;
align-items: center;
transition: 0.2s opacity;
diff --git a/src/lib/vortex/VoiceClient.ts b/src/lib/vortex/VoiceClient.ts
index f5e8149..fa3ac83 100644
--- a/src/lib/vortex/VoiceClient.ts
+++ b/src/lib/vortex/VoiceClient.ts
@@ -1,14 +1,8 @@
import EventEmitter from "eventemitter3";
import * as mediasoupClient from "mediasoup-client";
+import { types } from "mediasoup-client";
-import {
- Device,
- Producer,
- Transport,
-} from "mediasoup-client/lib/types";
-
-import { types } from 'mediasoup-client';
-const UnsupportedError = types.UnsupportedError;
+import { Device, Producer, Transport } from "mediasoup-client/lib/types";
import Signaling from "./Signaling";
import {
@@ -20,6 +14,8 @@ import {
WSErrorCode,
} from "./Types";
+const UnsupportedError = types.UnsupportedError;
+
interface VoiceEvents {
ready: () => void;
error: (error: Error) => void;
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index f4d0b3d..f68b29a 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -6,6 +6,8 @@ import { useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+import { dispatch, getState } from "../../redux";
+
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import MessageBox from "../../components/common/messaging/MessageBox";
@@ -18,7 +20,6 @@ import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader";
import { MessageArea } from "./messaging/MessageArea";
import VoiceHeader from "./voice/VoiceHeader";
-import { dispatch, getState } from "../../redux";
const ChannelMain = styled.div`
flex-grow: 1;
@@ -74,7 +75,7 @@ export function Channel({ id }: { id: string }) {
}
}
-const MEMBERS_SIDEBAR_KEY = 'sidebar_members';
+const MEMBERS_SIDEBAR_KEY = "sidebar_members";
function TextChannel({ channel }: { channel: Channels.Channel }) {
if (
(channel.channel_type === "TextChannel" ||
@@ -115,7 +116,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
}
}
- const [showMembers, setMembers] = useState(getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true);
+ const [showMembers, setMembers] = useState(
+ getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
+ );
let id = channel._id;
return (
@@ -127,17 +130,18 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
if (showMembers) {
dispatch({
- type: 'SECTION_TOGGLE_SET',
+ type: "SECTION_TOGGLE_SET",
id: MEMBERS_SIDEBAR_KEY,
- state: false
+ state: false,
});
} else {
dispatch({
- type: 'SECTION_TOGGLE_UNSET',
- id: MEMBERS_SIDEBAR_KEY
+ type: "SECTION_TOGGLE_UNSET",
+ id: MEMBERS_SIDEBAR_KEY,
});
}
- }} />
+ }}
+ />
<ChannelMain>
<ChannelContent>
<VoiceHeader id={id} />
--
GitLab