abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases 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 9e2e6f0505
commit 5ce6a679ab
4 changed files with 82 additions and 70 deletions
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>