Fix Friend button styling and actions.

Can now call from friends list.
This commit is contained in:
Paul 2021-07-02 11:13:14 +01:00
parent 212d70f382
commit 3eef61fe11
5 changed files with 48 additions and 23 deletions

View file

@ -12,6 +12,7 @@ export default styled.div<Props>`
display: grid; display: grid;
cursor: pointer; cursor: pointer;
place-items: center; place-items: center;
transition: .1s ease background-color;
fill: ${normal}; fill: ${normal};
color: ${normal}; color: ${normal};

View file

@ -3,12 +3,12 @@ import { Client } from "revolt.js";
import { takeError } from "./util"; import { takeError } from "./util";
import { createContext } from "preact"; import { createContext } from "preact";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { useHistory } from 'react-router-dom';
import { Route } from "revolt.js/dist/api/routes"; import { Route } from "revolt.js/dist/api/routes";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import Preloader from "../../components/ui/Preloader"; import Preloader from "../../components/ui/Preloader";
import { WithDispatcher } from "../../redux/reducers"; import { WithDispatcher } from "../../redux/reducers";
import { AuthState } from "../../redux/reducers/auth"; import { AuthState } from "../../redux/reducers/auth";
import { SyncOptions } from "../../redux/reducers/sync";
import { useEffect, useMemo, useState } from "preact/hooks"; import { useEffect, useMemo, useState } from "preact/hooks";
import { useIntermediate } from '../intermediate/Intermediate'; import { useIntermediate } from '../intermediate/Intermediate';
import { registerEvents, setReconnectDisallowed } from "./events"; import { registerEvents, setReconnectDisallowed } from "./events";
@ -30,6 +30,8 @@ export interface ClientOperations {
logout: (shouldRequest?: boolean) => Promise<void>; logout: (shouldRequest?: boolean) => Promise<void>;
loggedIn: () => boolean; loggedIn: () => boolean;
ready: () => boolean; ready: () => boolean;
openDM: (user_id: string) => Promise<string>;
} }
export const AppContext = createContext<Client>(undefined as any); export const AppContext = createContext<Client>(undefined as any);
@ -42,6 +44,7 @@ type Props = WithDispatcher & {
}; };
function Context({ auth, children, dispatcher }: Props) { function Context({ auth, children, dispatcher }: Props) {
const history = useHistory();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const [status, setStatus] = useState(ClientStatus.INIT); const [status, setStatus] = useState(ClientStatus.INIT);
const [client, setClient] = useState<Client>(undefined as unknown as Client); const [client, setClient] = useState<Client>(undefined as unknown as Client);
@ -132,7 +135,12 @@ function Context({ auth, children, dispatcher }: Props) {
ready: () => ( ready: () => (
operations.loggedIn() && operations.loggedIn() &&
typeof client.user !== "undefined" typeof client.user !== "undefined"
) ),
openDM: async (user_id: string) => {
let channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`);
return channel!._id;
}
} }
}, [ client, auth.active ]); }, [ client, auth.active ]);

View file

@ -72,16 +72,16 @@
display: flex; display: flex;
gap: 12px; gap: 12px;
> a { .button {
height: 40px;
width: 40px; width: 40px;
height: 40px;
&:nth-child(1):hover { &:hover.error {
background: var(--status-online); //TOFIX: change to normal green color background: var(--error);
} }
&:nth-child(3):hover { &:hover.success {
background: var(--error); background: var(--success);
} }
} }
} }

View file

@ -1,18 +1,19 @@
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { Link } from "react-router-dom"; import classNames from "classnames";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { X, Plus } from "@styled-icons/boxicons-regular";
import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
import IconButton from "../../components/ui/IconButton"; import IconButton from "../../components/ui/IconButton";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { X, Plus } from "@styled-icons/boxicons-regular";
import { User, Users } from "revolt.js/dist/api/objects"; import { User, Users } from "revolt.js/dist/api/objects";
import { stopPropagation } from "../../lib/stopPropagation"; import { stopPropagation } from "../../lib/stopPropagation";
import { VoiceOperationsContext } from "../../context/Voice";
import UserIcon from "../../components/common/user/UserIcon"; import UserIcon from "../../components/common/user/UserIcon";
import UserStatus from '../../components/common/user/UserStatus'; import UserStatus from '../../components/common/user/UserStatus';
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
interface Props { interface Props {
user: User; user: User;
@ -21,6 +22,8 @@ interface Props {
export function Friend({ user }: Props) { export function Friend({ user }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { openDM } = useContext(OperationsContext);
const { connect } = useContext(VoiceOperationsContext);
const actions: Children[] = []; const actions: Children[] = [];
let subtext: Children = null; let subtext: Children = null;
@ -29,18 +32,16 @@ export function Friend({ user }: Props) {
subtext = <UserStatus user={user} /> subtext = <UserStatus user={user} />
actions.push( actions.push(
<> <>
<Link to={'/open/' + user._id}>
<IconButton type="circle" <IconButton type="circle"
onClick={stopPropagation}> className={classNames(styles.button, styles.success)}
onClick={ev => stopPropagation(ev, openDM(user._id).then(connect))}>
<PhoneCall size={20} /> <PhoneCall size={20} />
</IconButton> </IconButton>
</Link>
<Link to={'/open/' + user._id}>
<IconButton type="circle" <IconButton type="circle"
onClick={stopPropagation}> className={styles.button}
onClick={ev => stopPropagation(ev, openDM(user._id))}>
<Envelope size={20} /> <Envelope size={20} />
</IconButton> </IconButton>
</Link>
</> </>
); );
} }
@ -48,6 +49,7 @@ export function Friend({ user }: Props) {
if (user.relationship === Users.Relationship.Incoming) { if (user.relationship === Users.Relationship.Incoming) {
actions.push( actions.push(
<IconButton type="circle" <IconButton type="circle"
className={styles.button}
onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}> onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
<Plus size={24} /> <Plus size={24} />
</IconButton> </IconButton>
@ -67,6 +69,7 @@ export function Friend({ user }: Props) {
) { ) {
actions.push( actions.push(
<IconButton type="circle" <IconButton type="circle"
className={classNames(styles.button, styles.error)}
onClick={ev => stopPropagation(ev, client.users.removeFriend(user._id))}> onClick={ev => stopPropagation(ev, client.users.removeFriend(user._id))}>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
@ -76,6 +79,7 @@ export function Friend({ user }: Props) {
if (user.relationship === Users.Relationship.Blocked) { if (user.relationship === Users.Relationship.Blocked) {
actions.push( actions.push(
<IconButton type="circle" <IconButton type="circle"
className={classNames(styles.button, styles.error)}
onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}> onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>

View file

@ -29,6 +29,9 @@ export default function Friends() {
x => x.relationship === Users.Relationship.Blocked x => x.relationship === Users.Relationship.Blocked
); );
const online = friends.filter(x => x.online && x.status?.presence !== Users.Presence.Invisible);
const offline = friends.filter(x => !x.online || x.status?.presence === Users.Presence.Invisible);
return ( return (
<> <>
<Header placement="primary"> <Header placement="primary">
@ -36,7 +39,7 @@ export default function Friends() {
<div className={styles.title}> <div className={styles.title}>
<Text id="app.navigation.tabs.friends" /> <Text id="app.navigation.tabs.friends" />
</div> </div>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}> {/* TOFIX: Make sure this opens the "Start Group DM" window on click */} <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
<Conversation size={24} /> <Conversation size={24} />
</IconButton> </IconButton>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}> <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
@ -64,13 +67,22 @@ export default function Friends() {
{pending.map(y => ( {pending.map(y => (
<Friend key={y._id} user={y} /> <Friend key={y._id} user={y} />
))} ))}
{friends.length > 0 && ( {online.length > 0 && (
<Overline className={styles.overline} type="subtle"> <Overline className={styles.overline} type="subtle">
<Text id="app.navigation.tabs.friends" /> {" "} <Text id="app.status.online" /> {" "}
{friends.length} {online.length}
</Overline> </Overline>
)} )}
{friends.map(y => ( {online.map(y => (
<Friend key={y._id} user={y} />
))}
{offline.length > 0 && (
<Overline className={styles.overline} type="subtle">
<Text id="app.status.offline" /> {" "}
{offline.length}
</Overline>
)}
{offline.map(y => (
<Friend key={y._id} user={y} /> <Friend key={y._id} user={y} />
))} ))}
{blocked.length > 0 && ( {blocked.length > 0 && (