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

Add call type icon 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-07-24 19:30:37 +02:00
parent 25d62983de
commit 064544369a
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
res/css/views/toasts/_IncomingCallToast.scss
View File

@ -35,7 +35,7 @@ limitations under the License.
display: flex;
flex-direction: column;
h1, p {
h1, .mx_CallEvent_type {
margin: 0px;
padding: 0px;
font-size: $font-14px;
@ -46,13 +46,36 @@ limitations under the License.
font-weight: bold;
}
.mx_CallEvent_type {
display: flex;
flex-direction: row;
.mx_CallEvent_type_icon {
height: 16px;
width: 16px;
margin-right: 6px;
&::before {
content: '';
position: absolute;
height: inherit;
width: inherit;
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
&.mx_IncomingCallToast_content_voice {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_IncomingCallToast_content_video {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
@ -107,7 +130,7 @@ limitations under the License.
height: 20px;
width: 20px;
background-color: $secondary-fg-color;
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

7
src/toasts/IncomingCallToast.tsx
View File

@ -109,9 +109,10 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
<h1>
{ room ? room.name : _t("Unknown caller") }
</h1>
<p>
{ isVoice ? _t("Incoming voice call") : _t("Incoming video call") }
</p>
<div className="mx_CallEvent_type">
<div className="mx_CallEvent_type_icon" />
{ isVoice ? _t("Voice call") : _t("Video call") }
</div>
<AccessibleTooltipButton
className={silenceClass}
onClick={this.onSilenceClick}