mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 07:00:58 -05:00
fix(friends): fixed friends tab
* you can deny requests on mobile now * fixed menu to work with glass header
This commit is contained in:
parent
b34ed4c24c
commit
fc0224562f
2 changed files with 123 additions and 103 deletions
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue