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

Visual fixups for call UI

Browse source 
* Add bottom margin on PiP view
 * Remove avatar blurring & pause icon for held calls
 * Change background of incoming call box to match PiP view
 * Put drop shadow & border radius on PiP view & incoming call box
   rather than the CallContainer they're in (so they each have their own
   drop shadow / rounded corners).
 * Add margin between incoming call box and PiP view
This commit is contained in:
David Baker 2020-12-18 18:08:04 +00:00
parent f364c852fd
commit f63572f02b
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
res/css/views/voip/_CallContainer.scss
View file

@ -18,10 +18,7 @@ limitations under the License.
position: absolute; position: absolute;
right: 20px; right: 20px;
bottom: 72px; bottom: 72px;
border-radius: 8px;
overflow: hidden;
z-index: 100; z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
// Disable pointer events for Jitsi widgets to function. Direct // Disable pointer events for Jitsi widgets to function. Direct
// calls have their own cursor and behaviour, but we need to make // calls have their own cursor and behaviour, but we need to make
@ -49,8 +46,10 @@ limitations under the License.
.mx_IncomingCallBox { .mx_IncomingCallBox {
min-width: 250px; min-width: 250px;
background-color: $primary-bg-color; background-color: $secondary-accent-color;
padding: 8px; padding: 8px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;
pointer-events: initial; // restore pointer events so the user can accept/decline pointer-events: initial; // restore pointer events so the user can accept/decline
cursor: pointer; cursor: pointer;

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

@ -35,6 +35,10 @@ limitations under the License.
.mx_CallView_pip { .mx_CallView_pip {
width: 320px; width: 320px;
padding-bottom: 8px;
margin-top: 10px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;
.mx_CallView_voice { .mx_CallView_voice {
height: 180px; height: 180px;
@ -84,6 +88,7 @@ limitations under the License.
border-radius: 2000px; border-radius: 2000px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
/* Blurred avatar images & pause icon for on-hold removed for now
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
@ -101,17 +106,21 @@ limitations under the License.
.mx_CallView_pip &::after { .mx_CallView_pip &::after {
background-size: 30px; background-size: 30px;
} }
*/
} }
/*
.mx_BaseAvatar { .mx_BaseAvatar {
filter: blur(20px); filter: blur(20px);
overflow: hidden; overflow: hidden;
} }
*/
} }
.mx_CallView_voice_secondaryAvatarContainer { .mx_CallView_voice_secondaryAvatarContainer {
border-radius: 2000px; border-radius: 2000px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
/*
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
@ -129,6 +138,7 @@ limitations under the License.
.mx_CallView_pip &::after { .mx_CallView_pip &::after {
background-size: 24px; background-size: 24px;
} }
*/
} }
.mx_CallView_voice_holdText { .mx_CallView_voice_holdText {