Fix call type icon

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-25 17:24:18 +02:00
parent a8d27746b4
commit 03a8308ae8
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
2 changed files with 15 additions and 3 deletions

View file

@ -279,7 +279,7 @@ limitations under the License.
max-width: 240px; max-width: 240px;
} }
.mx_CallView_header_phoneIcon { .mx_CallView_header_callTypeIcon {
display: inline-block; display: inline-block;
margin-right: 6px; margin-right: 6px;
height: 16px; height: 16px;
@ -293,12 +293,19 @@ limitations under the License.
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $warning-color; background-color: $secondary-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
}
&.mx_CallView_header_callTypeIcon_voice::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
&.mx_CallView_header_callTypeIcon_video::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
} }
.mx_CallView_callControls { .mx_CallView_callControls {

View file

@ -822,10 +822,15 @@ export default class CallView extends React.Component<IProps, IState> {
{ expandButton } { expandButton }
</div>; </div>;
const callTypeIconClassName = classNames("mx_CallView_header_callTypeIcon", {
"mx_CallView_header_callTypeIcon_voice": !isVideoCall,
"mx_CallView_header_callTypeIcon_video": isVideoCall,
});
let header: React.ReactNode; let header: React.ReactNode;
if (!this.props.pipMode) { if (!this.props.pipMode) {
header = <div className="mx_CallView_header"> header = <div className="mx_CallView_header">
<div className="mx_CallView_header_phoneIcon" /> <div className={callTypeIconClassName} />
<span className="mx_CallView_header_callType">{ callTypeText }</span> <span className="mx_CallView_header_callType">{ callTypeText }</span>
{ headerControls } { headerControls }
</div>; </div>;