aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-03-12 13:27:58 +0100
committerlonkaars <l.leblansch@gmail.com>2021-03-12 13:27:58 +0100
commit381aa865bdeb358dc4a63f3f9848055da62abc08 (patch)
tree0e093027d76bab5e734d887f8a936b2624f95cc2
parent04a42a7874f165861878d80f20a0c9809cf20cda (diff)
WIP friend requests dialog
-rw-r--r--components/gameBar.tsx4
-rw-r--r--components/navbar.tsx108
-rw-r--r--components/ui.tsx38
3 files changed, 146 insertions, 4 deletions
diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index cacb5e8..f26201c 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,5 +1,5 @@
import { CSSProperties, ReactNode } from 'react';
-import { Vierkant } from './ui';
+import { Vierkant, Bubble } from './ui';
import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
@@ -71,6 +71,8 @@ export function GameBar(props: {
<div style={{ ...GameBarAlignStyle, float: "right" }}>
<GameBarModule>
<SettingsRoundedIcon/>
+ <Bubble>
+ </Bubble>
</GameBarModule>
<GameBarSpacer/>
<GameBarModule>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7da6716..2c7ce32 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,6 +1,9 @@
import { CSSProperties, useEffect, useState } from "react";
import { LogoDark } from "../components/logo";
+import { AccountAvatar } from "./account";
+import { userInfo } from "../api/api";
+import { Bubble, Vierkant, Button } from './ui';
import Home from '@material-ui/icons/Home';
import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
@@ -8,7 +11,86 @@ import ExtensionIcon from '@material-ui/icons/Extension';
import SearchIcon from '@material-ui/icons/Search';
import SettingsIcon from '@material-ui/icons/Settings';
import PersonIcon from '@material-ui/icons/Person';
-import { AccountAvatar } from "./account";
+import GroupAddIcon from '@material-ui/icons/GroupAdd';
+import DoneIcon from '@material-ui/icons/Done';
+import CloseIcon from '@material-ui/icons/Close';
+
+function FriendRequestsBubble(props: {
+ visible?: boolean;
+}) {
+ return props.visible && <Bubble style={{
+ left: 48 + 12,
+ top: 92,
+ transform: "translateY(-100%)",
+ textAlign: "left",
+ width: 400,
+ height: 450
+ }} tuitjeStyle={{
+ left: 12,
+ bottom: 86,
+ transform: "translate(-100%, 100%) rotate(90deg)"
+ }}>
+ <h2 style={{ marginBottom: 24 }}>Vriendschapsverzoeken</h2>
+ <div style={{
+ overflowY: "scroll",
+ whiteSpace: "normal",
+ height: 450 - 24 * 4,
+ borderRadius: 6
+ }}>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ <FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+ </div>
+ </Bubble>
+}
+
+var FriendRequestButtonStyle: CSSProperties = {
+ display: "inline-block",
+ padding: 12,
+ borderRadius: 6,
+ marginLeft: 6
+};
+
+function FriendRequest(props: {
+ user: userInfo;
+}) {
+ return <Vierkant style={{
+ borderRadius: 8,
+ background: "var(--background-alt)",
+ margin: 0,
+ padding: 12,
+ width: "100%",
+ marginBottom: 12
+ }}>
+ <div style={{
+ position: "relative"
+ }}>
+ <a href={"/user?id=" + props.user.id}>
+ <AccountAvatar size={48} dummy/>
+ <div style={{
+ display: "inline-block",
+ verticalAlign: "top",
+ marginLeft: 6
+ }}>
+ <b>{props.user.username}</b>
+ <p>{props.user.status}</p>
+ </div>
+ </a>
+ <div style={{
+ display: "inline-block",
+ verticalAlign: "top",
+ float: "right"
+ }}>
+ <Button style={FriendRequestButtonStyle}><DoneIcon/></Button>
+ <Button style={FriendRequestButtonStyle}><CloseIcon/></Button>
+ </div>
+ </div>
+ </Vierkant>
+}
+
var NavBarItemStyle: CSSProperties = {
margin: 12,
@@ -20,6 +102,8 @@ export function NavBar() {
var [ loggedIn, setLoggedIn ] = useState(false);
useEffect(() => setLoggedIn(document.cookie.includes("token")), []);
+ var [ friendRequestDialogVisible, setFriendRequestDialogVisible ] = useState(false);
+
return <div className="navbar" style={{
width: 48,
height: "100%",
@@ -33,8 +117,9 @@ export function NavBar() {
top: 0,
left: 0,
- overflow: "hidden",
- whiteSpace: "nowrap"
+ overflow: "visible",
+ whiteSpace: "nowrap",
+ zIndex: 1
}}>
<div style={NavBarItemStyle}><LogoDark/></div>
<a href="/" style={NavBarItemStyle}><Home/></a>
@@ -48,6 +133,23 @@ export function NavBar() {
left: 0,
backgroundColor: "var(--background)"
}}>
+ { loggedIn && <a style={{
+ overflow: "visible",
+ position: "relative",
+ ...NavBarItemStyle
+ }}>
+ <div style={{ cursor: "pointer" }} onClick={() => setFriendRequestDialogVisible(!friendRequestDialogVisible)}>
+ <GroupAddIcon/>
+ </div>
+ <div style={{
+ backgroundColor: "var(--disk-a)",
+ width: 8, height: 8,
+ borderRadius: 4,
+ position: "absolute",
+ top: -2, right: -2
+ }}/>
+ <FriendRequestsBubble visible={friendRequestDialogVisible}/>
+ </a> }
<a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}>
{
loggedIn ?
diff --git a/components/ui.tsx b/components/ui.tsx
index 7f10424..9d532f8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -242,3 +242,41 @@ export class ColorPicker extends Component<{
}
}
+export function Tuitje(props: {
+ style?: CSSProperties;
+ rotation?: number;
+}) {
+ return <svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
+ ...props.style
+ }}>
+ <path d="M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z"
+ fill={ props.style?.background as string || "var(--background)" }/>
+ </svg>
+}
+
+export function Bubble(props: {
+ children?: ReactNode;
+ style?: CSSProperties;
+ tuitjeStyle?: CSSProperties;
+}) {
+ return <Vierkant style={{
+ position: "absolute",
+ textAlign: "center",
+ margin: 0,
+ overflow: "visible",
+ left: "50%",
+ top: -24,
+ transform: "translateY(-100%) translateX(-50%)",
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+ ...props.style
+ }}>
+ {props.children}
+ <Tuitje style={{
+ position: "absolute",
+ bottom: -12,
+ transform: "translate(-50%, 0%) rotate(0deg)",
+ ...props.tuitjeStyle
+ }}/>
+ </Vierkant>
+}
+