fix(friends): fixed friends tab

* 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

View file

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

View file

@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { RelationshipStatus, Presence } from "revolt-api/types/Users"; import { RelationshipStatus, Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users"; import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Friend } from "./Friend"; 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(() => { export default observer(() => {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
@ -115,100 +136,105 @@ export default observer(() => {
*/} */}
</div> </div>
</PageHeader> </PageHeader>
<div <Container>
className={styles.list} <div
data-empty={isEmpty} className={styles.list}
data-mobile={isTouchscreenDevice}> data-empty={isEmpty}
{isEmpty && ( data-mobile={isTouchscreenDevice}>
<> {isEmpty && (
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" /> <>
<Text id="app.special.friends.nobody" /> <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
</> <Text id="app.special.friends.nobody" />
)} </>
)}
{incoming.length > 0 && ( {incoming.length > 0 && (
<div <div
className={styles.pending} className={styles.pending}
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "pending_requests", id: "pending_requests",
users: incoming, 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>
}> }>
{list.map((x) => ( <div className={styles.avatars}>
<Friend key={x._id} user={x} /> {incoming.map(
))} (x, i) =>
</CollapsibleSection> i < 3 && (
); <UserIcon
})} target={x}
</div> 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>
</> </>
); );
}); });