Convert CallingHeader texts to toasts
This commit is contained in:
trevor-signal
GitHub
parent
f180f66e77
commit
292ef1b6f5
10 changed files with 268 additions and 270 deletions
|
|
@ -1,7 +1,6 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
|
|
@ -14,10 +13,8 @@ export type PropsType = {
|
|||
callViewMode?: CallViewMode;
|
||||
i18n: LocalizerType;
|
||||
isGroupCall?: boolean;
|
||||
message?: ReactNode;
|
||||
onCancel?: () => void;
|
||||
participantCount: number;
|
||||
title?: string;
|
||||
togglePip?: () => void;
|
||||
toggleSettings: () => void;
|
||||
changeCallView?: (mode: CallViewMode) => void;
|
||||
|
|
@ -28,132 +25,122 @@ export function CallingHeader({
|
|||
changeCallView,
|
||||
i18n,
|
||||
isGroupCall = false,
|
||||
message,
|
||||
onCancel,
|
||||
participantCount,
|
||||
title,
|
||||
togglePip,
|
||||
toggleSettings,
|
||||
}: PropsType): JSX.Element {
|
||||
return (
|
||||
<div className="module-calling__header">
|
||||
{title ? (
|
||||
<div className="module-calling__header--header-name">{title}</div>
|
||||
) : null}
|
||||
{message ? (
|
||||
<div className="module-ongoing-call__header-message">{message}</div>
|
||||
) : null}
|
||||
<div className="module-calling-tools">
|
||||
{isGroupCall &&
|
||||
participantCount > 2 &&
|
||||
callViewMode &&
|
||||
changeCallView && (
|
||||
<div className="module-calling-tools__button">
|
||||
<ContextMenu
|
||||
ariaLabel={i18n('icu:calling__change-view')}
|
||||
i18n={i18n}
|
||||
menuOptions={[
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--PaginatedView',
|
||||
label: i18n('icu:calling__view_mode--paginated'),
|
||||
onClick: () => changeCallView(CallViewMode.Paginated),
|
||||
value: CallViewMode.Paginated,
|
||||
},
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--OverflowView',
|
||||
label: i18n('icu:calling__view_mode--overflow'),
|
||||
onClick: () => changeCallView(CallViewMode.Overflow),
|
||||
value: CallViewMode.Overflow,
|
||||
},
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--SpeakerView',
|
||||
label: i18n('icu:calling__view_mode--speaker'),
|
||||
onClick: () => changeCallView(CallViewMode.Speaker),
|
||||
value: CallViewMode.Speaker,
|
||||
},
|
||||
]}
|
||||
<div className="module-calling-tools">
|
||||
{isGroupCall &&
|
||||
participantCount > 2 &&
|
||||
callViewMode &&
|
||||
changeCallView && (
|
||||
<div className="module-calling-tools__button">
|
||||
<ContextMenu
|
||||
ariaLabel={i18n('icu:calling__change-view')}
|
||||
i18n={i18n}
|
||||
menuOptions={[
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--PaginatedView',
|
||||
label: i18n('icu:calling__view_mode--paginated'),
|
||||
onClick: () => changeCallView(CallViewMode.Paginated),
|
||||
value: CallViewMode.Paginated,
|
||||
},
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--OverflowView',
|
||||
label: i18n('icu:calling__view_mode--overflow'),
|
||||
onClick: () => changeCallView(CallViewMode.Overflow),
|
||||
value: CallViewMode.Overflow,
|
||||
},
|
||||
{
|
||||
icon: 'CallSettingsButton__Icon--SpeakerView',
|
||||
label: i18n('icu:calling__view_mode--speaker'),
|
||||
onClick: () => changeCallView(CallViewMode.Speaker),
|
||||
value: CallViewMode.Speaker,
|
||||
},
|
||||
]}
|
||||
theme={Theme.Dark}
|
||||
popperOptions={{
|
||||
placement: 'bottom',
|
||||
strategy: 'absolute',
|
||||
}}
|
||||
value={
|
||||
// If it's Presentation we want to still show Speaker as selected
|
||||
callViewMode === CallViewMode.Presentation
|
||||
? CallViewMode.Speaker
|
||||
: callViewMode
|
||||
}
|
||||
>
|
||||
<Tooltip
|
||||
content={i18n('icu:calling__change-view')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
popperOptions={{
|
||||
placement: 'bottom',
|
||||
strategy: 'absolute',
|
||||
}}
|
||||
value={
|
||||
// If it's Presentation we want to still show Speaker as selected
|
||||
callViewMode === CallViewMode.Presentation
|
||||
? CallViewMode.Speaker
|
||||
: callViewMode
|
||||
}
|
||||
>
|
||||
<Tooltip
|
||||
content={i18n('icu:calling__change-view')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<div className="CallSettingsButton__Button">
|
||||
<span
|
||||
className={classNames(
|
||||
'CallSettingsButton__Icon',
|
||||
getCallViewIconClassname(callViewMode)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
)}
|
||||
<div className="CallSettingsButton__Button">
|
||||
<span
|
||||
className={classNames(
|
||||
'CallSettingsButton__Icon',
|
||||
getCallViewIconClassname(callViewMode)
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
)}
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:callingDeviceSelection__settings')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:callingDeviceSelection__settings')}
|
||||
className="CallSettingsButton__Button"
|
||||
onClick={toggleSettings}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Settings" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{togglePip && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:callingDeviceSelection__settings')}
|
||||
content={i18n('icu:calling__pip--on')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:callingDeviceSelection__settings')}
|
||||
aria-label={i18n('icu:calling__pip--on')}
|
||||
className="CallSettingsButton__Button"
|
||||
onClick={toggleSettings}
|
||||
onClick={togglePip}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Settings" />
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{togglePip && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:calling__pip--on')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
)}
|
||||
{onCancel && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:cancel')}
|
||||
theme={Theme.Dark}
|
||||
className="CallingButton__tooltip"
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:cancel')}
|
||||
className="CallSettingsButton__Button CallSettingsButton__Button--Cancel"
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:calling__pip--on')}
|
||||
className="CallSettingsButton__Button"
|
||||
onClick={togglePip}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{onCancel && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:cancel')}
|
||||
theme={Theme.Dark}
|
||||
className="CallingButton__tooltip"
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:cancel')}
|
||||
className="CallSettingsButton__Button CallSettingsButton__Button--Cancel"
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Cancel" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Cancel" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue