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

Add pending requests menu.

Browse source
This commit is contained in:
Paul 2021-07-02 18:00:17 +01:00
parent bfb15e3109
commit d8e23aea12
8 changed files with 107 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/context/intermediate/Intermediate.tsx
View file

@ -53,6 +53,7 @@ export type Screen =
| { id: "modify_account"; field: "username" | "email" | "password" }
| { id: "profile"; user_id: string }
| { id: "channel_info"; channel_id: string }
| { id: "pending_requests"; users: string[] }
| {
id: "user_picker";
omit?: string[];
@ -119,7 +120,7 @@ export default function Intermediate(props: Props) {
} /** By specifying a key, we reset state whenever switching screen. */
/>
<Prompt
when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'user_picker' ].includes(screen.id)}
when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'pending_requests', 'user_picker' ].includes(screen.id)}
message={(_, action) => {
if (action === 'POP') {
openScreen({ id: 'none' });

3
src/context/intermediate/Popovers.tsx
View file

@ -7,6 +7,7 @@ import { SpecialPromptModal } from "./modals/Prompt";
import { UserProfile } from "./popovers/UserProfile";
import { ImageViewer } from "./popovers/ImageViewer";
import { ChannelInfo } from "./popovers/ChannelInfo";
import { PendingRequests } from "./popovers/PendingRequests";
import { ModifyAccountModal } from "./popovers/ModifyAccount";
export default function Popovers() {
@ -24,6 +25,8 @@ export default function Popovers() {
return <ImageViewer {...screen} onClose={onClose} />;
case "channel_info":
return <ChannelInfo {...screen} onClose={onClose} />;
case "pending_requests":
return <PendingRequests {...screen} onClose={onClose} />;
case "modify_account":
return <ModifyAccountModal onClose={onClose} {...screen} />;
case "special_prompt":

26
src/context/intermediate/popovers/PendingRequests.tsx Normal file
View file

@ -0,0 +1,26 @@
import styles from "./UserPicker.module.scss";
import { useUsers } from "../../revoltjs/hooks";
import Modal from "../../../components/ui/Modal";
import { Friend } from "../../../pages/friends/Friend";
interface Props {
users: string[];
onClose: () => void;
}
export function PendingRequests({ users: ids, onClose }: Props) {
const users = useUsers(ids);
return (
<Modal
visible={true}
title={"Pending requests"}
onClose={onClose}>
<div className={styles.list}>
{ users
.filter(x => typeof x !== 'undefined')
.map(x => <Friend user={x!} key={x!._id} />) }
</div>
</Modal>
);
}

3
src/lib/ContextMenus.tsx
View file

@ -23,7 +23,6 @@ import { At, Bell, BellOff, Check, CheckSquare, ChevronRight, Block, Square, Lef
import { Cog } from "@styled-icons/boxicons-solid";
import { getNotificationState, Notifications, NotificationState } from "../redux/reducers/notifications";
import UserStatus from "../components/common/user/UserStatus";
import { Link } from "react-router-dom";
import IconButton from "../components/ui/IconButton";
interface ContextMenuData {
@ -438,7 +437,7 @@ function ContextMenus(props: Props) {
];
break;
case Users.Relationship.Incoming:
actions = ["add_friend", "block_user"];
actions = ["add_friend", "cancel_friend", "block_user"];
break;
case Users.Relationship.Outgoing:
actions = ["cancel_friend", "block_user"];

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

@ -122,6 +122,53 @@
background: var(--primary-background);
}
.title {
flex-grow: 1;
}
.pending {
gap: 12px;
padding: 1em;
display: flex;
cursor: pointer;
margin-top: 1em;
align-items: center;
flex-direction: row;
background: var(--secondary-background);
.avatars {
display: flex;
}
.details {
flex-grow: 1;
display: flex;
flex-direction: column;
> div {
font-size: 1.4em;
font-weight: 800;
span {
width: 1.5em;
height: 1.5em;
font-size: 0.8em;
border-radius: 50%;
align-items: center;
display: inline-flex;
justify-content: center;
background: var(--error);
}
}
> span {
font-weight: 600;
color: var(--tertiary-foreground);
}
}
}
@media only screen and (max-width: 768px) {
.list {
padding: 0 8px 8px 8px;
@ -131,10 +178,3 @@
display: none;
}
}
//! FIXME: Move this to the Header component, do this:
// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
.title {
flex-grow: 1;
}

6
src/pages/friends/Friend.tsx
View file

@ -70,7 +70,11 @@ export function Friend({ user }: Props) {
actions.push(
<IconButton type="circle"
className={classNames(styles.button, styles.error)}
onClick={ev => stopPropagation(ev, openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user }))}>
onClick={ev => stopPropagation(ev,
user.relationship === Users.Relationship.Friend ?
openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user })
: client.users.removeFriend(user._id)
)}>
<X size={24} />
</IconButton>
);

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

@ -1,16 +1,17 @@
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
import styles from "./Friend.module.scss";
import Tooltip from "../../components/common/Tooltip";
import Header from "../../components/ui/Header";
import Overline from "../../components/ui/Overline";
import Tooltip from "../../components/common/Tooltip";
import IconButton from "../../components/ui/IconButton";
import { useUsers } from "../../context/revoltjs/hooks";
import { User, Users } from "revolt.js/dist/api/objects";
import UserIcon from "../../components/common/user/UserIcon";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
import { UserDetail, Conversation, UserPlus, TennisBall } from "@styled-icons/boxicons-solid";
import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
export default function Friends() {
const { openScreen } = useIntermediate();
@ -22,7 +23,9 @@ export default function Friends() {
const lists = [
[ 'app.special.friends.pending', users.filter(x =>
x.relationship === Users.Relationship.Incoming ||
x.relationship === Users.Relationship.Incoming
) ],
[ 'app.special.friends.pending', users.filter(x =>
x.relationship === Users.Relationship.Outgoing
) ],
[ 'app.status.online', friends.filter(x =>
@ -70,8 +73,23 @@ export default function Friends() {
<Text id="app.special.friends.nobody" />
</>
)}
{ lists[0][1].length > 0 && <div className={styles.pending}
onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
<div className={styles.avatars}>
{ lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={64} />) }
</div>
<div className={styles.details}>
{/* ! FIXME: i18n */}
<div>Pending requests <span>{ lists[0][1].length }</span></div>
<span>From { lists[0][1].map(x => x.username).join(', ') }</span>
</div>
<ChevronRight size={48} />
</div> }
{
lists.map(([i18n, list]) => {
lists.map(([i18n, list], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (

2
src/styles/_context-menu.scss
View file

@ -1,5 +1,5 @@
.preact-context-menu .context-menu {
z-index: 100;
z-index: 10000;
min-width: 190px;
padding: 6px 8px;
user-select: none;