cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix Friend button styling and actions.

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/ui/IconButton.tsx
View file

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

12
src/context/revoltjs/RevoltClient.tsx
View file

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

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

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

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

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

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

@ -29,6 +29,9 @@ export default function Friends() {
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 (
<>
<Header placement="primary">
@ -36,7 +39,7 @@ export default function Friends() {
<div className={styles.title}>
<Text id="app.navigation.tabs.friends" />
</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} />
</IconButton>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
@ -64,13 +67,22 @@ export default function Friends() {
{pending.map(y => (
<Friend key={y._id} user={y} />
))}
{friends.length > 0 && (
{online.length > 0 && (
<Overline className={styles.overline} type="subtle">
<Text id="app.navigation.tabs.friends" /> —{" "}
{friends.length}
<Text id="app.status.online" /> —{" "}
{online.length}
</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} />
))}
{blocked.length > 0 && (