Invite modal
This commit is contained in:
parent
8425a177e2
commit
742fdab56d
7 changed files with 65 additions and 54 deletions
|
@ -4,20 +4,28 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid #0dbd8b;
|
||||
border-radius: 8px;
|
||||
color: #0dbd8b;
|
||||
width: 100%;
|
||||
transition: border-color 250ms, background-color 250ms;
|
||||
height: 40px;
|
||||
transition: border-color 250ms, background-color 250ms;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.copyButton span {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.copyButton svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.copyButton:not(.copied) svg * {
|
||||
|
|
|
@ -1,14 +1,25 @@
|
|||
import React from "react";
|
||||
import { Overlay } from "./Overlay";
|
||||
import { Modal, ModalContent } from "./Modal";
|
||||
import { CopyButton } from "./CopyButton";
|
||||
import { HeaderButton, ButtonTooltip } from "./RoomButton";
|
||||
import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
|
||||
|
||||
export function InviteModal({ roomUrl, ...rest }) {
|
||||
export function InviteModalButton({ roomUrl }) {
|
||||
return (
|
||||
<Modal title="Invite People" isDismissable {...rest}>
|
||||
<Overlay>
|
||||
<HeaderButton>
|
||||
<ButtonTooltip>Add User</ButtonTooltip>
|
||||
<AddUserIcon width={20} height={20} />
|
||||
</HeaderButton>
|
||||
{(modalProps) => (
|
||||
<Modal title="Invite People" isDismissable {...modalProps}>
|
||||
<ModalContent>
|
||||
<p>Copy and share this meeting link</p>
|
||||
<CopyButton value={roomUrl} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)}
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@ export function Modal(props) {
|
|||
const { dialogProps, titleProps } = useDialog(props, modalRef);
|
||||
const closeButtonRef = useRef();
|
||||
const { buttonProps: closeButtonProps } = useButton({
|
||||
onPress: () => props.close(),
|
||||
onPress: () => props.onClose(),
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
background: #21262c;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
min-width: 420px;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
|
|
|
@ -53,7 +53,8 @@ export function Overlay({ children }) {
|
|||
{...buttonProps}
|
||||
ref={buttonRef}
|
||||
/>
|
||||
{overlayState.isOpen && overlay({ ...overlayState })}
|
||||
{overlayState.isOpen &&
|
||||
overlay({ isOpen: overlayState.isOpen, onClose: overlayState.close })}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
11
src/Room.jsx
11
src/Room.jsx
|
@ -24,7 +24,6 @@ import {
|
|||
LayoutToggleButton,
|
||||
ScreenshareButton,
|
||||
DropdownButton,
|
||||
InviteButton,
|
||||
} from "./RoomButton";
|
||||
import {
|
||||
Header,
|
||||
|
@ -48,8 +47,7 @@ import { fetchGroupCall } from "./ConferenceCallManagerHooks";
|
|||
import { ErrorModal } from "./ErrorModal";
|
||||
import { GroupCallInspector } from "./GroupCallInspector";
|
||||
import * as Sentry from "@sentry/react";
|
||||
import { Overlay } from "./Overlay";
|
||||
import { InviteModal } from "./InviteModal";
|
||||
import { InviteModalButton } from "./InviteModal";
|
||||
|
||||
const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
|
||||
// There is currently a bug in Safari our our code with cloning and sending MediaStreams
|
||||
|
@ -507,12 +505,7 @@ function InRoomView({
|
|||
<RoomHeaderInfo roomName={roomName} />
|
||||
</LeftNav>
|
||||
<RightNav>
|
||||
<Overlay>
|
||||
<InviteButton />
|
||||
{(props) => (
|
||||
<InviteModal roomUrl="https://example.com" {...props} />
|
||||
)}
|
||||
</Overlay>
|
||||
<InviteModalButton roomUrl={window.location.href} />
|
||||
<LayoutToggleButton
|
||||
title={layout === "spotlight" ? "Spotlight" : "Freedom"}
|
||||
layout={layout}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useRef, useState, useEffect } from "react";
|
||||
import React, { useRef, useState, useEffect, forwardRef } from "react";
|
||||
import classNames from "classnames";
|
||||
import styles from "./RoomButton.module.css";
|
||||
import { ReactComponent as MicIcon } from "./icons/Mic.svg";
|
||||
|
@ -12,19 +12,23 @@ import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
|
|||
import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
|
||||
import { ReactComponent as ChevronIcon } from "./icons/Chevron.svg";
|
||||
import { ReactComponent as UserIcon } from "./icons/User.svg";
|
||||
import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
|
||||
import { ReactComponent as CheckIcon } from "./icons/Check.svg";
|
||||
|
||||
export function RoomButton({ on, className, children, ...rest }) {
|
||||
export const RoomButton = forwardRef(
|
||||
({ on, className, children, ...rest }, ref) => {
|
||||
return (
|
||||
<button
|
||||
className={classNames(styles.roomButton, className, { [styles.on]: on })}
|
||||
className={classNames(styles.roomButton, className, {
|
||||
[styles.on]: on,
|
||||
})}
|
||||
{...rest}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export function DropdownButton({ onChange, options, value, children }) {
|
||||
const buttonRef = useRef();
|
||||
|
@ -124,18 +128,21 @@ export function HangupButton({ className, ...rest }) {
|
|||
);
|
||||
}
|
||||
|
||||
export function HeaderButton({ on, className, children, ...rest }) {
|
||||
export const HeaderButton = forwardRef(
|
||||
({ on, className, children, ...rest }, ref) => {
|
||||
return (
|
||||
<button
|
||||
className={classNames(styles.headerButton, className, {
|
||||
[styles.on]: on,
|
||||
})}
|
||||
{...rest}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export function HeaderDropdownButton({ children, content }) {
|
||||
const buttonRef = useRef();
|
||||
|
@ -212,15 +219,6 @@ export function SettingsButton(props) {
|
|||
);
|
||||
}
|
||||
|
||||
export function InviteButton(props) {
|
||||
return (
|
||||
<HeaderButton {...props}>
|
||||
<ButtonTooltip>Add User</ButtonTooltip>
|
||||
<AddUserIcon width={20} height={20} />
|
||||
</HeaderButton>
|
||||
);
|
||||
}
|
||||
|
||||
export function LayoutToggleButton({ layout, setLayout, ...rest }) {
|
||||
return (
|
||||
<HeaderDropdownButton
|
||||
|
|
Loading…
Reference in a new issue