abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 08:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add i18n to incoming requests.

Browse Source 
Add icon stacking mask.
This commit is contained in:
Paul
2021-07-02 18:56:00 +01:00
parent c15a2f1968
commit 73c61cd7f8
6 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/friends/Friend.module.scss
View File

@@ -150,6 +150,11 @@
display: flex;
flex-shrink: 0;
margin-inline-end: 15px;
svg:not(:first-child) {
position: relative;
margin-left: -32px;
}
}
.details {

27
src/pages/friends/Friends.tsx
View File

@@ -12,6 +12,8 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
export default function Friends() {
const { openScreen } = useIntermediate();
@@ -22,10 +24,10 @@ export default function Friends() {
const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
const lists = [
[ 'app.special.friends.pending', users.filter(x =>
[ '', users.filter(x =>
x.relationship === Users.Relationship.Incoming
) ],
[ 'app.special.friends.pending', users.filter(x =>
[ 'app.special.friends.sent', users.filter(x =>
x.relationship === Users.Relationship.Outgoing
) ],
[ 'app.status.online', friends.filter(x =>
@@ -39,6 +41,10 @@ export default function Friends() {
) ]
] as [ string, User[] ][];
const incoming = lists[0][1];
const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
for (let i=incoming.length-1;i>0;i--) userlist.splice(i, 0, ', ');
const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
return (
<>
@@ -74,15 +80,20 @@ export default function Friends() {
</>
)}
{ lists[0][1].length > 0 && <div className={styles.pending}
onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
{ incoming.length > 0 && <div className={styles.pending}
onClick={() => openScreen({ id: 'pending_requests', users: incoming.map(x => x._id) })}>
<div className={styles.avatars}>
{ lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={54} />) }
{ 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}>
{/* ! FIXME: i18n */}
<div className={styles.title}>Pending requests<span>{ lists[0][1].length }</span></div>
<span className={styles.from}>From <span className={styles.user}>{ lists[0][1].map(x => x.username).join(', ') }</span></span>
<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> }