imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make new in-call UI work

Browse source 
* Buttons on the main view will disappear after 1 second of the user
not moving the mouse over the call view.
 * PIP view has no buttons, and not moveable yet
 * No call status in room view yet
 * Room status bar is still there currently
This commit is contained in:
David Baker 2020-11-18 14:22:38 +00:00
parent 6caca97942
commit a2d58e2f1f
8 changed files with 293 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

117
res/css/views/voip/_CallView.scss
View file

@ -41,58 +41,13 @@ limitations under the License.
}
.mx_CallView_voice {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: $inverted-bg-color;
}
/*
.mx_CallView_voice {
padding: 6px;
font-weight: bold;
min-width: 200px;
text-align: center;
vertical-align: middle;
}
.mx_CallView_hangup {
position: absolute;
right: 8px;
bottom: 10px;
height: 35px;
width: 35px;
border-radius: 35px;
background-color: $notice-primary-color;
z-index: 101;
cursor: pointer;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 6.5px;
left: 7.5px;
mask: url('$(res)/img/hangup.svg');
mask-size: contain;
background-size: contain;
background-color: $primary-fg-color;
}
}
*/
.mx_CallView_video {
width: 100%;
position: relative;
@ -172,3 +127,73 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
.mx_CallView_callControls {
position: absolute;
display: flex;
justify-content: center;
bottom: 5px;
width: 100%;
opacity: 1;
transition: opacity 0.5s;
}
.mx_CallView_callControls_hidden {
opacity: 0.001;
pointer-events: none;
}
.mx_CallView_callControls_button {
cursor: pointer;
&::before {
content: '';
display: inline-block;
height: 48px;
width: 48px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
}
.mx_CallView_callControls_button_micOn {
&::before {
background-image: url('$(res)/img/voip_buttons/mic_on.svg');
}
}
.mx_CallView_callControls_button_micOff {
&::before {
background-image: url('$(res)/img/voip_buttons/mic_off.svg');
}
}
.mx_CallView_callControls_button_vidOn {
&::before {
background-image: url('$(res)/img/voip_buttons/vid_on.svg');
}
}
.mx_CallView_callControls_button_vidOff {
&::before {
background-image: url('$(res)/img/voip_buttons/vid_off.svg');
}
}
.mx_CallView_callControls_button_hangup {
margin-left: 16px;
margin-right: 16px;
&::before {
background-image: url('$(res)/img/voip_buttons/hangup.svg');
}
}
.mx_CallView_callControls_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}