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

Add call type icon

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Š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; display: flex;
flex-direction: column; flex-direction: column;
h1, p { h1, .mx_CallEvent_type {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-size: $font-14px; font-size: $font-14px;
@ -46,13 +46,36 @@ limitations under the License.
font-weight: bold; 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_IncomingCallToast_content_voice {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before { .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
} }
&.mx_IncomingCallToast_content_video { &.mx_IncomingCallToast_content_video {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before { .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg'); mask-image: url('$(res)/img/element-icons/call/video-call.svg');
} }
@ -107,7 +130,7 @@ limitations under the License.
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: $secondary-fg-color; background-color: $tertiary-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;

7
src/toasts/IncomingCallToast.tsx
View file

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