cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-13 18:59:22 -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, useUsers,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import CollapsibleSection from "../../common/CollapsibleSection";
import Category from "../../ui/Category"; import Category from "../../ui/Category";
import Preloader from "../../ui/Preloader"; import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg"; import placeholderSVG from "../items/placeholder.svg";
@ -121,36 +122,39 @@ export function GroupMemberSidebar({
)} )}
</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}
{members.length === 0 && ( </span>
/*!voiceActive &&*/ <img src={placeholderSVG} /> }
)} />
{members.map( }>
(user) => {members.length === 0 && <img src={placeholderSVG} />}
user && ( {members.map(
<UserButton (user) =>
key={user._id} user && (
user={user} <UserButton
context={channel} key={user._id}
onClick={() => user={user}
openScreen({ context={channel}
id: "profile", onClick={() =>
user_id: user._id, openScreen({
}) id: "profile",
} user_id: user._id,
/> })
), }
)} />
),
)}
</CollapsibleSection>
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
@ -235,32 +239,39 @@ export function ServerMemberSidebar({
<ChannelDebugInfo id={channel._id} /> <ChannelDebugInfo id={channel._id} />
<div>{!members && <Preloader type="ring" />}</div> <div>{!members && <Preloader type="ring" />}</div>
{members && ( {members && (
<Category <CollapsibleSection
variant="uniform" sticky
text={ id="members"
<span> defaultValue
<Text id="app.main.categories.members" /> —{" "} summary={
{users.length} <Category
</span> variant="uniform"
} text={
/> <span>
)} <Text id="app.main.categories.members" />{" "}
{members && users.length === 0 && <img src={placeholderSVG} />} — {users.length}
{users.map( </span>
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
} }
/> />
), }>
{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> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>

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

@ -30,6 +30,7 @@ export default styled.details<{ sticky?: boolean; large?: boolean }>`
outline: none; outline: none;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
user-select: none;
align-items: center; align-items: center;
transition: 0.2s opacity; transition: 0.2s opacity;

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

@ -1,14 +1,8 @@
import EventEmitter from "eventemitter3"; import EventEmitter from "eventemitter3";
import * as mediasoupClient from "mediasoup-client"; import * as mediasoupClient from "mediasoup-client";
import { types } from "mediasoup-client";
import { import { Device, Producer, Transport } from "mediasoup-client/lib/types";
Device,
Producer,
Transport,
} from "mediasoup-client/lib/types";
import { types } from 'mediasoup-client';
const UnsupportedError = types.UnsupportedError;
import Signaling from "./Signaling"; import Signaling from "./Signaling";
import { import {
@ -20,6 +14,8 @@ import {
WSErrorCode, WSErrorCode,
} from "./Types"; } from "./Types";
const UnsupportedError = types.UnsupportedError;
interface VoiceEvents { interface VoiceEvents {
ready: () => void; ready: () => void;
error: (error: Error) => 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 { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { dispatch, getState } from "../../redux";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks"; import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import MessageBox from "../../components/common/messaging/MessageBox"; import MessageBox from "../../components/common/messaging/MessageBox";
@ -18,7 +20,6 @@ import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader"; import ChannelHeader from "./ChannelHeader";
import { MessageArea } from "./messaging/MessageArea"; import { MessageArea } from "./messaging/MessageArea";
import VoiceHeader from "./voice/VoiceHeader"; import VoiceHeader from "./voice/VoiceHeader";
import { dispatch, getState } from "../../redux";
const ChannelMain = styled.div` const ChannelMain = styled.div`
flex-grow: 1; 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 }) { function TextChannel({ channel }: { channel: Channels.Channel }) {
if ( if (
(channel.channel_type === "TextChannel" || (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; let id = channel._id;
return ( return (
@ -127,17 +130,18 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
if (showMembers) { if (showMembers) {
dispatch({ dispatch({
type: 'SECTION_TOGGLE_SET', type: "SECTION_TOGGLE_SET",
id: MEMBERS_SIDEBAR_KEY, id: MEMBERS_SIDEBAR_KEY,
state: false state: false,
}); });
} else { } else {
dispatch({ dispatch({
type: 'SECTION_TOGGLE_UNSET', type: "SECTION_TOGGLE_UNSET",
id: MEMBERS_SIDEBAR_KEY id: MEMBERS_SIDEBAR_KEY,
}); });
} }
}} /> }}
/>
<ChannelMain> <ChannelMain>
<ChannelContent> <ChannelContent>
<VoiceHeader id={id} /> <VoiceHeader id={id} />