xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move join room button

Browse source
This commit is contained in:
Robert Long 2022-02-04 12:31:59 -08:00
parent cde352bcae
commit 9c3e4907c8
5 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/button/Button.jsx
View file

@ -9,7 +9,7 @@ import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg"; import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
import { useButton } from "@react-aria/button"; import { useButton } from "@react-aria/button";
import { mergeProps, useObjectRef } from "@react-aria/utils"; import { mergeProps, useObjectRef } from "@react-aria/utils";
import { Tooltip, TooltipTrigger } from "../Tooltip"; import { TooltipTrigger } from "../Tooltip";
export const variantToClassName = { export const variantToClassName = {
default: [styles.button], default: [styles.button],
@ -18,6 +18,7 @@ export const variantToClassName = {
secondary: [styles.secondary], secondary: [styles.secondary],
copy: [styles.copyButton], copy: [styles.copyButton],
iconCopy: [styles.iconCopyButton], iconCopy: [styles.iconCopyButton],
secondaryCopy: [styles.copyButton],
}; };
export const sizeToClassName = { export const sizeToClassName = {
@ -65,6 +66,7 @@ export const Button = forwardRef(
{ {
[styles.on]: on, [styles.on]: on,
[styles.off]: off, [styles.off]: off,
[styles.secondaryCopy]: variant === "secondaryCopy",
} }
)} )}
{...mergeProps(rest, filteredButtonProps)} {...mergeProps(rest, filteredButtonProps)}

9
src/button/Button.module.css
View file

@ -107,6 +107,11 @@ limitations under the License.
background-color: transparent; background-color: transparent;
} }
.copyButton.secondaryCopy {
color: var(--textColor1);
border-color: var(--textColor1);
}
.copyButton { .copyButton {
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -140,6 +145,10 @@ limitations under the License.
stroke: white; stroke: white;
} }
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--textColor1);
}
.iconCopyButton svg * { .iconCopyButton svg * {
fill: var(--textColor3); fill: var(--textColor3);
} }

4
src/button/CopyButton.jsx
View file

@ -1,4 +1,4 @@
import React, { useCallback } from "react"; import React from "react";
import useClipboard from "react-use-clipboard"; import useClipboard from "react-use-clipboard";
import { ReactComponent as CheckIcon } from "../icons/Check.svg"; import { ReactComponent as CheckIcon } from "../icons/Check.svg";
import { ReactComponent as CopyIcon } from "../icons/Copy.svg"; import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
@ -17,7 +17,7 @@ export function CopyButton({
return ( return (
<Button <Button
{...rest} {...rest}
variant={variant === "icon" ? "iconCopy" : "copy"} variant={variant === "icon" ? "iconCopy" : variant || "copy"}
on={isCopied} on={isCopied}
className={className} className={className}
onPress={setCopied} onPress={setCopied}

16
src/room/LobbyView.jsx
View file

@ -83,13 +83,6 @@ export function LobbyView({
/> />
</div> </div>
)} )}
<Button
className={styles.joinCallButton}
disabled={state !== GroupCallState.LocalCallFeedInitialized}
onPress={onEnter}
>
Join call now
</Button>
<div className={styles.previewButtons}> <div className={styles.previewButtons}>
<MicButton <MicButton
muted={microphoneMuted} muted={microphoneMuted}
@ -109,8 +102,17 @@ export function LobbyView({
</> </>
)} )}
</div> </div>
<Button
className={styles.copyButton}
size="lg"
disabled={state !== GroupCallState.LocalCallFeedInitialized}
onPress={onEnter}
>
Join call now
</Button>
<Body>Or</Body> <Body>Or</Body>
<CopyButton <CopyButton
variant="secondaryCopy"
value={getRoomUrl(roomId)} value={getRoomUrl(roomId)}
className={styles.copyButton} className={styles.copyButton}
copiedMessage="Call link copied" copiedMessage="Call link copied"

5
src/room/LobbyView.module.css
View file

@ -112,6 +112,11 @@ limitations under the License.
.copyButton { .copyButton {
width: 320px !important; width: 320px !important;
margin-bottom: 15px;
}
.copyButton:last-child {
margin-bottom: 0;
} }
.previewButtons > * { .previewButtons > * {