PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix final style issues

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-03 15:20:55 +02:00
parent 8a1def1d26
commit b18d03be32
No known key found for this signature in database
GPG key ID: 28DFE7164F497CB6
1 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/views/voip/CallView/CallViewHeader.tsx
View file

@ -21,6 +21,7 @@ import { _t } from '../../../../languageHandler';
import RoomAvatar from '../../avatars/RoomAvatar'; import RoomAvatar from '../../avatars/RoomAvatar';
import AccessibleButton from '../../elements/AccessibleButton'; import AccessibleButton from '../../elements/AccessibleButton';
import dis from '../../../../dispatcher/dispatcher'; import dis from '../../../../dispatcher/dispatcher';
import classNames from 'classnames';
const callTypeTranslationByType: Record<CallType, () => string> = { const callTypeTranslationByType: Record<CallType, () => string> = {
[CallType.Video]: () => _t("Video Call"), [CallType.Video]: () => _t("Video Call"),
@ -58,7 +59,7 @@ const onExpandClick = (roomId: string) => {
type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & { type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & {
roomId: string; roomId: string;
}; };
function CallViewHeaderControls({ pipMode = false, type, roomId }: CallControlsProps): JSX.Element { const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false, type, roomId }) => {
return <div className="mx_CallView_header_controls"> return <div className="mx_CallView_header_controls">
{ (pipMode && type === CallType.Video) && { (pipMode && type === CallType.Video) &&
<div className="mx_CallView_header_button mx_CallView_header_button_fullscreen" <div className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
@ -70,8 +71,8 @@ function CallViewHeaderControls({ pipMode = false, type, roomId }: CallControlsP
title={_t("Return to call")} title={_t("Return to call")}
/> } /> }
</div>; </div>;
} };
function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element { const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
return <span className="mx_CallView_header_secondaryCallInfo"> return <span className="mx_CallView_header_secondaryCallInfo">
<AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}> <AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
<RoomAvatar room={callRoom} height={16} width={16} /> <RoomAvatar room={callRoom} height={16} width={16} />
@ -80,16 +81,16 @@ function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element {
</span> </span>
</AccessibleButton> </AccessibleButton>
</span>; </span>;
} };
function CallTypeIcon({ type }: {type: CallType}) { const CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
const classes = { const classes = classNames({
[CallType.Video]: 'mx_CallView_header_callTypeIcon_video', 'mx_CallView_header_callTypeIcon': true,
[CallType.Voice]: 'mx_CallView_header_callTypeIcon_voice', 'mx_CallView_header_callTypeIcon_video': type === CallType.Video,
}; 'mx_CallView_header_callTypeIcon_voice': type === CallType.Voice,
const iconClass = classes[type] ?? ''; });
return <div className={`mx_CallView_header_callTypeIcon ${iconClass}`} />; return <div className={classes} />;
} };
export const CallViewHeader: React.FC<CallViewHeaderProps> = ({ export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
type, type,