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

Fix button tooltips

Browse source
This commit is contained in:
Robert Long 2022-01-20 13:03:54 -08:00
commit d7d38c1ba9
8 changed files with 105 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/button/Button.jsx
View file

@ -76,25 +76,13 @@ export const Button = forwardRef(
}
);
export function ButtonTooltip({ className, children }) {
return (
<div className={classNames(styles.buttonTooltip, className)}>
{children}
</div>
);
}
export function MicButton({ muted, ...rest }) {
return (
<TooltipTrigger>
<Button variant="toolbar" {...rest} off={muted}>
{muted ? <MuteMicIcon /> : <MicIcon />}
</Button>
{(props) => (
<Tooltip position="top" {...props}>
{muted ? "Unmute microphone" : "Mute microphone"}
</Tooltip>
)}
{() => (muted ? "Unmute microphone" : "Mute microphone")}
</TooltipTrigger>
);
}
@ -105,11 +93,7 @@ export function VideoButton({ muted, ...rest }) {
<Button variant="toolbar" {...rest} off={muted}>
{muted ? <DisableVideoIcon /> : <VideoIcon />}
</Button>
{(props) => (
<Tooltip position="top" {...props}>
{muted ? "Turn on camera" : "Turn off camera"}
</Tooltip>
)}
{() => (muted ? "Turn on camera" : "Turn off camera")}
</TooltipTrigger>
);
}
@ -120,11 +104,7 @@ export function ScreenshareButton({ enabled, className, ...rest }) {
<Button variant="toolbar" {...rest} on={enabled}>
<ScreenshareIcon />
</Button>
{(props) => (
<Tooltip position="top" {...props}>
{enabled ? "Stop sharing screen" : "Share screen"}
</Tooltip>
)}
{() => (enabled ? "Stop sharing screen" : "Share screen")}
</TooltipTrigger>
);
}
@ -139,11 +119,7 @@ export function HangupButton({ className, ...rest }) {
>
<HangupIcon />
</Button>
{(props) => (
<Tooltip position="top" {...props}>
Leave
</Tooltip>
)}
{() => "Leave"}
</TooltipTrigger>
);
}

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

@ -100,35 +100,6 @@ limitations under the License.
fill: #21262c;
}
.buttonTooltip {
display: none;
background-color: var(--bgColor2);
position: absolute;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 10px;
color: var(--textColor1);
border-radius: 8px;
max-width: 135px;
width: max-content;
z-index: 1;
}
.buttonTooltip.bottomRight {
right: 0;
}
.toolbarButton:hover .buttonTooltip {
display: flex;
bottom: calc(100% + 6px);
}
.iconButton:hover .buttonTooltip {
display: flex;
top: calc(100% + 6px);
}
.secondary,
.copyButton {
color: #0dbd8b;