cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add collapsible sections to member sidebars.

Browse source
This commit is contained in:
Paul 2021-07-06 22:52:50 +01:00
parent d5fae8b9f0
commit cf7dd6f99b
4 changed files with 82 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/components/navigation/right/MemberSidebar.tsx
View file

@ -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>

1
src/components/ui/Details.tsx
View file

@ -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;

12
src/lib/vortex/VoiceClient.ts
View file

@ -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;

20
src/pages/channels/Channel.tsx
View file

@ -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} />