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 { useButton } from "@react-aria/button";
import { mergeProps, useObjectRef } from "@react-aria/utils";
import { Tooltip, TooltipTrigger } from "../Tooltip";
import { TooltipTrigger } from "../Tooltip";
export const variantToClassName = {
default: [styles.button],
@ -18,6 +18,7 @@ export const variantToClassName = {
secondary: [styles.secondary],
copy: [styles.copyButton],
iconCopy: [styles.iconCopyButton],
secondaryCopy: [styles.copyButton],
};
export const sizeToClassName = {
@ -65,6 +66,7 @@ export const Button = forwardRef(
{
[styles.on]: on,
[styles.off]: off,
[styles.secondaryCopy]: variant === "secondaryCopy",
}
)}
{...mergeProps(rest, filteredButtonProps)}

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

@ -107,6 +107,11 @@ limitations under the License.
background-color: transparent;
}
.copyButton.secondaryCopy {
color: var(--textColor1);
border-color: var(--textColor1);
}
.copyButton {
width: 100%;
height: 40px;
@ -140,6 +145,10 @@ limitations under the License.
stroke: white;
}
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--textColor1);
}
.iconCopyButton svg * {
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 { ReactComponent as CheckIcon } from "../icons/Check.svg";
import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
@ -17,7 +17,7 @@ export function CopyButton({
return (
<Button
{...rest}
variant={variant === "icon" ? "iconCopy" : "copy"}
variant={variant === "icon" ? "iconCopy" : variant || "copy"}
on={isCopied}
className={className}
onPress={setCopied}

16
src/room/LobbyView.jsx
View file

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

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

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