cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(friends): fixed friends tab

Browse source 
* you can deny requests on mobile now
* fixed menu to work with glass header
This commit is contained in:
trashtemp 2021-12-30 14:02:00 +01:00
parent b34ed4c24c
commit fc0224562f
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 123 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/pages/friends/Friend.module.scss
View file

@ -10,17 +10,11 @@
gap: 20px;
}
/*::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}*/
.list {
padding: 0 10px 10px 10px;
padding-top: 48px;
user-select: none;
overflow-y: scroll;
/*overflow-y: scroll;*/
&[data-empty="true"] {
img {
@ -194,10 +188,10 @@
@media only screen and (max-width: 768px) {
.list {
padding: 0 8px 8px 8px;
}
padding: 56px 8px 8px 8px;
.remove {
display: none;
.remove {
display: none;
}
}
}

210
src/pages/friends/Friends.tsx
View file

@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { RelationshipStatus, Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import styles from "./Friend.module.scss";
import { Text } from "preact-i18n";
@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton";
import { Children } from "../../types/Preact";
import { Friend } from "./Friend";
const Container = styled.div`
overflow-y: scroll;
::-webkit-scrollbar-thumb {
min-height: 100px;
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}
${() =>
isTouchscreenDevice &&
css`
::-webkit-scrollbar-thumb {
min-height: 150px;
border-top: 56px solid transparent;
border-bottom: var(--bottom-navigation-height) solid transparent;
}
`}
`;
export default observer(() => {
const { openScreen } = useIntermediate();
@ -115,100 +136,105 @@ export default observer(() => {
*/}
</div>
</PageHeader>
<div
className={styles.list}
data-empty={isEmpty}
data-mobile={isTouchscreenDevice}>
{isEmpty && (
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" />
</>
)}
<Container>
<div
className={styles.list}
data-empty={isEmpty}
data-mobile={isTouchscreenDevice}>
{isEmpty && (
<>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" />
</>
)}
{incoming.length > 0 && (
<div
className={styles.pending}
onClick={() =>
openScreen({
id: "pending_requests",
users: incoming,
})
}>
<div className={styles.avatars}>
{incoming.map(
(x, i) =>
i < 3 && (
<UserIcon
target={x}
size={64}
mask={
i <
Math.min(incoming.length - 1, 2)
? "url(#overlap)"
: undefined
}
/>
),
)}
</div>
<div className={styles.details}>
<div>
<Text id="app.special.friends.pending" />{" "}
<span>{incoming.length}</span>
</div>
<span>
{incoming.length > 3 ? (
<TextReact
id="app.special.friends.from.several"
fields={{
userlist: userlist.slice(0, 6),
count: incoming.length - 3,
}}
/>
) : incoming.length > 1 ? (
<TextReact
id="app.special.friends.from.multiple"
fields={{
user: userlist.shift()!,
userlist: userlist.slice(1),
}}
/>
) : (
<TextReact
id="app.special.friends.from.single"
fields={{ user: userlist[0] }}
/>
)}
</span>
</div>
<ChevronRight size={28} />
</div>
)}
{lists.map(([i18n, list, section_id], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (
<CollapsibleSection
key={section_id}
id={`friends_${section_id}`}
defaultValue={true}
sticky
large
summary={
<div class="title">
<Text id={i18n} /> — {list.length}
</div>
{incoming.length > 0 && (
<div
className={styles.pending}
onClick={() =>
openScreen({
id: "pending_requests",
users: incoming,
})
}>
{list.map((x) => (
<Friend key={x._id} user={x} />
))}
</CollapsibleSection>
);
})}
</div>
<div className={styles.avatars}>
{incoming.map(
(x, i) =>
i < 3 && (
<UserIcon
target={x}
size={64}
mask={
i <
Math.min(
incoming.length - 1,
2,
)
? "url(#overlap)"
: undefined
}
/>
),
)}
</div>
<div className={styles.details}>
<div>
<Text id="app.special.friends.pending" />{" "}
<span>{incoming.length}</span>
</div>
<span>
{incoming.length > 3 ? (
<TextReact
id="app.special.friends.from.several"
fields={{
userlist: userlist.slice(0, 6),
count: incoming.length - 3,
}}
/>
) : incoming.length > 1 ? (
<TextReact
id="app.special.friends.from.multiple"
fields={{
user: userlist.shift()!,
userlist: userlist.slice(1),
}}
/>
) : (
<TextReact
id="app.special.friends.from.single"
fields={{ user: userlist[0] }}
/>
)}
</span>
</div>
<ChevronRight size={28} />
</div>
)}
{lists.map(([i18n, list, section_id], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (
<CollapsibleSection
key={section_id}
id={`friends_${section_id}`}
defaultValue={true}
sticky
large
summary={
<div class="title">
<Text id={i18n} /> — {list.length}
</div>
}>
{list.map((x) => (
<Friend key={x._id} user={x} />
))}
</CollapsibleSection>
);
})}
</div>
</Container>
</>
);
});