diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/gameBar.tsx | 4 | ||||
| -rw-r--r-- | components/navbar.tsx | 108 | ||||
| -rw-r--r-- | components/ui.tsx | 38 |
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> +} + |