mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Update call lobby UI to match new designs

Browse source
This commit is contained in:
Evan Hahn 2021-08-17 16:45:18 -05:00 • committed by GitHub
parent 50c4fa06cc
commit 763c35e546
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 857 additions and 435 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ts/components/CallingButton.tsx
View file

@ -1,8 +1,9 @@
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { v4 as uuid } from 'uuid';
import { Tooltip, TooltipPlacement } from './Tooltip';
import { Theme } from '../util/theme';
import { LocalizerType } from '../types/Util';
@ -33,42 +34,55 @@ export const CallingButton = ({
onClick,
tooltipDirection,
}: PropsType): JSX.Element => {
const uniqueButtonId = useMemo(() => uuid(), []);
let classNameSuffix = '';
let tooltipContent = '';
let label = '';
let disabled = false;
if (buttonType === CallingButtonType.AUDIO_DISABLED) {
classNameSuffix = 'audio--disabled';
tooltipContent = i18n('calling__button--audio-disabled');
label = i18n('calling__button--audio__label');
disabled = true;
} else if (buttonType === CallingButtonType.AUDIO_OFF) {
classNameSuffix = 'audio--off';
tooltipContent = i18n('calling__button--audio-on');
label = i18n('calling__button--audio__label');
} else if (buttonType === CallingButtonType.AUDIO_ON) {
classNameSuffix = 'audio--on';
tooltipContent = i18n('calling__button--audio-off');
label = i18n('calling__button--audio__label');
} else if (buttonType === CallingButtonType.VIDEO_DISABLED) {
classNameSuffix = 'video--disabled';
tooltipContent = i18n('calling__button--video-disabled');
disabled = true;
label = i18n('calling__button--video__label');
} else if (buttonType === CallingButtonType.VIDEO_OFF) {
classNameSuffix = 'video--off';
tooltipContent = i18n('calling__button--video-on');
label = i18n('calling__button--video__label');
} else if (buttonType === CallingButtonType.VIDEO_ON) {
classNameSuffix = 'video--on';
tooltipContent = i18n('calling__button--video-off');
label = i18n('calling__button--video__label');
} else if (buttonType === CallingButtonType.HANG_UP) {
classNameSuffix = 'hangup';
tooltipContent = i18n('calling__hangup');
label = i18n('calling__hangup');
} else if (buttonType === CallingButtonType.PRESENTING_DISABLED) {
classNameSuffix = 'presenting--disabled';
tooltipContent = i18n('calling__button--presenting-disabled');
disabled = true;
label = i18n('calling__button--presenting__label');
} else if (buttonType === CallingButtonType.PRESENTING_ON) {
classNameSuffix = 'presenting--on';
tooltipContent = i18n('calling__button--presenting-off');
label = i18n('calling__button--presenting__label');
} else if (buttonType === CallingButtonType.PRESENTING_OFF) {
classNameSuffix = 'presenting--off';
tooltipContent = i18n('calling__button--presenting-on');
label = i18n('calling__button--presenting__label');
}
const className = classNames(
@ -82,15 +96,24 @@ export const CallingButton = ({
direction={tooltipDirection}
theme={Theme.Dark}
>
<button
aria-label={tooltipContent}
className={className}
disabled={disabled}
onClick={onClick}
type="button"
>
<div />
</button>
<div className="module-calling-button__container">
<button
aria-label={tooltipContent}
className={className}
disabled={disabled}
id={uniqueButtonId}
onClick={onClick}
type="button"
>
<div />
</button>
<label
className="module-calling-button__label"
htmlFor={uniqueButtonId}
>
{label}
</label>
</div>
</Tooltip>
);
};