OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix final style issues

pull/21833/head
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 AccessibleButton from '../../elements/AccessibleButton';
import dis from '../../../../dispatcher/dispatcher';
import classNames from 'classnames';
const callTypeTranslationByType: Record<CallType, () => string> = {
[CallType.Video]: () => _t("Video Call"),
@ -58,7 +59,7 @@ const onExpandClick = (roomId: string) => {
type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & {
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">
{ (pipMode && type === CallType.Video) &&
<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")}
/> }
</div>;
}
function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element {
};
const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
return <span className="mx_CallView_header_secondaryCallInfo">
<AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
<RoomAvatar room={callRoom} height={16} width={16} />
@ -80,16 +81,16 @@ function SecondaryCallInfo({ callRoom }: {callRoom: Room}): JSX.Element {
</span>
</AccessibleButton>
</span>;
}
};
function CallTypeIcon({ type }: {type: CallType}) {
const classes = {
[CallType.Video]: 'mx_CallView_header_callTypeIcon_video',
[CallType.Voice]: 'mx_CallView_header_callTypeIcon_voice',
};
const iconClass = classes[type] ?? '';
return <div className={`mx_CallView_header_callTypeIcon ${iconClass}`} />;
}
const CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
const classes = classNames({
'mx_CallView_header_callTypeIcon': true,
'mx_CallView_header_callTypeIcon_video': type === CallType.Video,
'mx_CallView_header_callTypeIcon_voice': type === CallType.Voice,
});
return <div className={classes} />;
};
export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
type,