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

Improve UI/UX in calls (#7791)

Browse source
This commit is contained in:
Šimon Brandner 2022-05-04 17:16:38 +02:00 • committed by GitHub
parent 5cdc8fb3fd
commit a5b795c934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 433 additions and 435 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/voip/CallView/_CallViewButtons.scss
View file

@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2021 - 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -27,7 +27,7 @@ limitations under the License.
position: absolute;
display: flex;
justify-content: center;
bottom: 24px;
bottom: 32px;
opacity: 1;
transition: opacity 0.5s;
z-index: 200; // To be above _all_ feeds

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

@ -1,6 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 - 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -22,202 +23,176 @@ limitations under the License.
padding-right: 8px;
// XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place
pointer-events: initial;
}
.mx_CallView_large {
padding-bottom: 10px;
margin: $container-gap-width;
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
margin-right: calc($container-gap-width / 2);
margin-bottom: 10px;
display: flex;
flex-direction: column;
flex: 1;
.mx_CallView_toast {
position: absolute;
top: 74px;
padding: 4px 8px;
border-radius: 4px;
z-index: 50;
// Same on both themes
color: white;
background-color: #17191c;
}
.mx_CallView_content_wrapper {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
.mx_CallView_content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
overflow: hidden;
border-radius: 10px;
padding: 10px;
padding-right: calc(20% + 20px); // Space for the sidebar
background-color: $call-view-content-background;
.mx_CallView_status {
z-index: 50;
color: $accent-fg-color;
}
.mx_CallView_avatarsContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
div {
margin-left: 12px;
margin-right: 12px;
}
}
.mx_CallView_holdBackground {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(20px);
&::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}
&.mx_CallView_content_hold .mx_CallView_status {
font-weight: bold;
text-align: center;
&::before {
display: block;
margin-left: auto;
margin-right: auto;
content: "";
width: 40px;
height: 40px;
background-image: url("$(res)/img/voip/paused.svg");
background-position: center;
background-size: cover;
}
.mx_CallView_pip &::before {
width: 30px;
height: 30px;
}
.mx_AccessibleButton_hasKind {
padding: 0px;
}
}
}
}
&:not(.mx_CallView_sidebar) .mx_CallView_content {
padding: 0;
width: 100%;
height: 100%;
.mx_VideoFeed_primary {
aspect-ratio: unset;
border: 0;
width: 100%;
height: 100%;
}
}
&.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
border-radius: 8px;
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
.mx_CallViewButtons {
bottom: 13px;
.mx_CallViewButtons_button {
width: 34px;
height: 34px;
&::before {
width: 22px;
height: 22px;
}
}
}
.mx_CallView_content {
min-height: 180px;
}
}
&.mx_CallView_large {
display: flex;
flex-direction: column;
align-items: center;
.mx_CallView_voice {
flex: 1;
padding-bottom: 10px;
margin: $container-gap-width;
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
margin-right: calc($container-gap-width / 2);
margin-bottom: 10px;
}
&.mx_CallView_belowWidget {
margin-top: 0;
}
}
.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.mx_CallView_video_hold,
.mx_CallView_voice {
height: 180px;
}
.mx_CallViewButtons {
bottom: 13px;
}
.mx_CallViewButtons_button {
width: 34px;
height: 34px;
&::before {
width: 22px;
height: 22px;
}
}
.mx_CallView_holdTransferContent {
padding-top: 10px;
padding-bottom: 25px;
}
}
.mx_CallView_content {
position: relative;
display: flex;
justify-content: center;
border-radius: 8px;
> .mx_VideoFeed {
width: 100%;
height: 100%;
&.mx_VideoFeed_voice {
display: flex;
justify-content: center;
align-items: center;
}
.mx_VideoFeed_video {
height: 100%;
background-color: #000;
}
.mx_VideoFeed_mic {
left: 10px;
bottom: 10px;
}
}
}
.mx_CallView_voice {
align-items: center;
justify-content: center;
flex-direction: column;
background-color: $inverted-bg-color;
}
.mx_CallView_voice_avatarsContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
div {
margin-left: 12px;
margin-right: 12px;
}
}
.mx_CallView_voice .mx_CallView_holdTransferContent {
// This masks the avatar image so when it's blurred, the edge is still crisp
.mx_CallView_voice_avatarContainer {
border-radius: 2000px;
overflow: hidden;
position: relative;
}
}
.mx_CallView_holdTransferContent {
height: 20px;
padding-top: 20px;
padding-bottom: 15px;
color: $accent-fg-color;
user-select: none;
.mx_AccessibleButton_hasKind {
padding: 0px;
font-weight: bold;
}
}
.mx_CallView_video {
width: 100%;
height: 100%;
z-index: 30;
overflow: hidden;
}
.mx_CallView_video_hold {
overflow: hidden;
// we keep these around in the DOM: it saved wiring them up again when the call
// is resumed and keeps the container the right size
.mx_VideoFeed {
visibility: hidden;
}
}
.mx_CallView_video_holdBackground {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(20px);
&::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}
.mx_CallView_video .mx_CallView_holdTransferContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
color: $accent-fg-color;
text-align: center;
&::before {
display: block;
margin-left: auto;
margin-right: auto;
content: "";
width: 40px;
height: 40px;
background-image: url("$(res)/img/voip/paused.svg");
background-position: center;
background-size: cover;
}
.mx_CallView_pip &::before {
width: 30px;
height: 30px;
}
.mx_AccessibleButton_hasKind {
padding: 0px;
}
}
.mx_CallView_presenting {
position: absolute;
margin-top: 18px;
padding: 4px 8px;
border-radius: 4px;
// Same on both themes
color: white;
background-color: #17191c;
}

4
res/css/views/voip/_CallViewHeader.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 - 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -19,8 +20,9 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
justify-content: space-between;
flex-shrink: 0;
width: 100%;
&.mx_CallViewHeader_pip {
cursor: pointer;

24
res/css/views/voip/_CallViewSidebar.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2021 - 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -16,18 +16,15 @@ limitations under the License.
.mx_CallViewSidebar {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 100; // To be above the primary feed
right: 10px;
width: 20%;
height: 100%;
overflow: auto;
height: calc(100% - 32px); // Subtract the top and bottom padding
width: 20%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 12px;
@ -42,15 +39,6 @@ limitations under the License.
background-color: $video-feed-secondary-background;
}
.mx_VideoFeed_video {
border-radius: 4px;
}
.mx_VideoFeed_mic {
left: 6px;
bottom: 6px;
}
}
&.mx_CallViewSidebar_pipMode {

26
res/css/views/voip/_VideoFeed.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016, 2020 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016, 2020, 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 - 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -20,15 +21,32 @@ limitations under the License.
box-sizing: border-box;
border: transparent 2px solid;
display: flex;
border-radius: 4px;
&.mx_VideoFeed_secondary {
position: absolute;
right: 24px;
bottom: 72px;
width: 20%;
}
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
aspect-ratio: 16 / 9;
display: flex;
justify-content: center;
align-items: center;
&:not(.mx_VideoFeed_primary) {
aspect-ratio: 16 / 9;
}
}
.mx_VideoFeed_video {
height: 100%;
width: 100%;
background-color: transparent;
border-radius: 4px;
background-color: #000000;
&.mx_VideoFeed_video_mirror {
transform: scale(-1, 1);
@ -37,6 +55,8 @@ limitations under the License.
.mx_VideoFeed_mic {
position: absolute;
left: 6px;
bottom: 6px;
display: flex;
align-items: center;
justify-content: center;