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

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
Download Patch File Download Diff File Expand all files Collapse all files

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 && (